Wo kommen diese Pixel her?
alzani
- css
Hallo,
ich habe mal wieder ein Problem mit der unterschiedlichen Darstellung in verschiedenen Browsern. Hier meine Beispielseite:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#main {
margin-left: 10%;
margin-top: 5%;
width: 70%;
border: 3px solid #1D107B;
}
.navi {
float: left;
width: 10em;
border-right: 3px solid #1D107B;
}
.contentbox {
margin-left: 10em;
border-left: 3px solid #1D107B;
}
.clearfix {display: inline-table;}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: left;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>
</head>
<body>
<div id="main" class="clearfix">
<div class="navi">
<p>test test test test test test test test test test test test test test test test test test</p>
</div>
<div class="contentbox">
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
</div>
</div>
</body>
</html>
Ich habe also ein umschliessendes div und darin eines für die Navigation und eines für den Inhalt. Mein Problem ist jetzt, daß im Internet Explorer der Inhalt des Content-Bereichs um ca. 2Pixel nach rechts verschoben wird, sobald im linken Navigationsbereich Inhalte vorhanden sind. Ist der Navigationsinhalt kürzer als der des Contentbereichs (wie in meinem Beispiel), habe ich also eine Stufe in meinem Contentbereich.
Weiß jemand woran das liegt und wie ich das beheben kann?
Gruß, alzani!
hi,
Mein Problem ist jetzt, daß im Internet Explorer der Inhalt des Content-Bereichs um ca. 2Pixel nach rechts verschoben wird, sobald im linken Navigationsbereich Inhalte vorhanden sind. Ist der Navigationsinhalt kürzer als der des Contentbereichs (wie in meinem Beispiel), habe ich also eine Stufe in meinem Contentbereich.
Mir scheint, du hast bekannschaft mit dem Three Pixel Text-Jog gemacht.
gruß,
wahsaga
Hallo,
danke für den Link. Heißt das ich muß auf eine feste Pixelangabe für meine Navigationsbox umsteigen, um auch im IE keine "Stufe" im Content zu haben?
Irgendwie bin ich grad etwas gefrustet, mein erster Versuch von möglichst flexiblem CSS-Layout läuft darauf hinaus, daß ich feste Pixelangaben machen und meine divs mit "display: inline-table;" dazu bringen muß, sich doch wieder wie Tabellen zu benehmen. :-(
Gruß, alzani!