zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden [SOLVED]IE 3px float bug + faux coloums führt zu Bauchschmerzen.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.10.2006, 01:00
Benutzerbild von Zen5656
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.07.2006
Beiträge: 378
Zen5656 befindet sich auf einem aufstrebenden Ast
Standard [SOLVED]IE 3px float bug + faux coloums führt zu Bauchschmerzen.

Abend.

Bin grad wieder am basteln. Ich baue gerade 2 Boxen die sich gegenseitig in der länge ausgleichen sollen.

Hier der HTML Teil:

Code:
<div class="faux_column">


    <div>
        <div class="eckeoben orange float"><div></div></div>
        <div class="eckeoben blau"><div></div></div>
    </div>
    <div class="clearboth"></div>

    <div>
        <div class="float">x</div>
        <div class="blau drei_pixel_bug_IE">x</div>
    </div>
    <div class="clearboth"></div>

    <div>
        <div class="eckeunten orange float"><div></div></div>
        <div class="eckeunten blau"><div></div></div>
    </div>
    <div class="clearboth"></div>


</div>
Und das dazugehörige CSS:

Code:
.clearboth {
    clear: both;
}


.eckeoben div {
	background: url(ecke1.png) no-repeat top left ;
}

.eckeoben {
	background: url(ecke2.png) no-repeat top right;
}



.eckeunten div {
	background: url(ecke3.png) no-repeat bottom left;
}

.eckeunten {
	background: url(ecke4.png) no-repeat bottom right;
}

.eckeoben div, .eckeoben, .eckeunten div, .eckeunten {
height: 18px;
}

.orange {
	background-color: #F89724;
	width: 230px;

}

.blau {
	margin-left: 245px;
	background-color: #0074E8;
}


.float {
	float: left;
} 

.faux_column {
	background: url("orange.gif") #0074E8 repeat-y;
}
Das mache ich natürlich mit der altbewähren Faux coloums Methode. Das Problem hierbei ist das die linke der 2 Boxen mit float: left ausgerichtet wird. Darum hat der IE natürlich seinen 3px Floating Bug. Den habe ich dann mit

Code:
* html .drei_pixel_bug_IE {
	display: inline-block;
	padding-left: -10px;
}
ausgeglichen.

Im FF sieht das jetzt natürlich perfekt aus. Bei sind immer gleich lang. Im IE hingegen ist die rechte Box aufgrund des 3px bugs auch 3px weiter rechts. Dadurch ist die Hintergrunddatei der Faux coloumn um 3px zu kurz und eine Art Rand entsteht. Das ganze kann man sich natürlich nur schwer vorstellen *g* Darum hab ich es hier mal hochgeladen:

http://www.the-holics.de/middle/middle.html

Ihr müsst es natürlich im IE anschauen. Hat jemand ne idee wie ich diesen 3px Abstand wegkriege?

MfG Zen

Geändert von Zen5656 (02.10.2006 um 01:05 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.10.2006, 01:04
Benutzerbild von Zen5656
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.07.2006
Beiträge: 378
Zen5656 befindet sich auf einem aufstrebenden Ast
Standard

Ok habs geschafft mit:

Code:
* html .blau {
	margin-left: 242px;
}
CLOSEN!
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Darstellungsprobleme im IE lea11011989 CSS 17 05.11.2010 09:44
Problem mit einem 3D-Effekt moep0710 CSS 12 12.06.2010 14:30
Frage zu horizontalen Linien marvin1989 CSS 3 29.12.2009 23:35
Problem mit CSS Style flo007 CSS 3 25.01.2009 17:08
IE zeigt gewisse Texte nicht an zitronenbaum CSS 2 16.01.2008 15:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:10 Uhr.