nicht angemeldet
leichte Verschiebung beim IE wenn links ein div floatet
Hi,
habe ein kleines Layout zusammengebastelt.
Es besteht aus den Divs Überschrift, Menü, Content, Footer. Diese werden durch ein Div Center horizontal in der Mitte des Bildschirms positioniert.
Hier ein kurzer Überblick:
+-----------------------------------+
| +-------------------------------+ |
| |Überschrift | |
| +-------------------------------+ |
| |
| +-----+ +-----------------------+ |
| |Menü | |Content | |
| | | | | |
| | | | | |
| | | | <- | |
| +-----+ | Problem | |
| |<- | |
| | | |
| +-----------------------+ |
| |
| +-------------------------------+ |
| |Footer | |
| +-------------------------------+ |
+-----------------------------------+
das Menü ist per float:left; nach links gewandert.
Content ist per margin-left soweit nach rechts positioniert, dass es nicht mit dem Menü kolliediert.
Mit Opera oder FF habe ich keine Probleme. Wohl aber mit IE6.
Das Problem ist, dass Text im Content-Div auf der Höhe des Menüs 1 Pixel (oder auch 2?) weiter rechts steht, als der Text, der nicht in Höhe des Menüs steht. Das sieht dann so ähnlich aus wie die Pfeile oben in der Grafik.
Ich habe bei SelfHTML schon gesucht und auch die Tutorial-Beispiele durchprobiert. Die sehen im IE genauso scheiße aus wie mein eigenes Layout (sprich 1px verschiebung wenn ein Div links floatet).
Wie bekomme ich die Anzeige in den Griff?
Ein Beispiel wäre in SelfHTML
http://de.selfhtml.org/css/layouts/anzeige/2spaltig_links.htm
(Zum Betrachten evtl. das Browserfenster soweit verkleinern, bis der Text deutlich weiter nach unten rakt als das Menü.)
Danke waste
Hier noch mein CSS und HTML-Code wenns hilft:
CSS-DATEI...
html, body
{
margin: 0px;
padding: 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
}
img
{
border: none;
}
#center
{
width: 50em;
margin-top: 2em;
margin-left: auto;
margin-right: auto;
margin-bottom: 2em;
}
#header
{
width: 100%;
font-size: 3em;
color: #CCCCCC;
margin-bottom: 0.5em;
}
#menu
{
width: 100px;
height: 300px;
float: left;
padding-top: 100px;
padding-left: 20px;
color: white;
background-color: darkred;
}
#main
{
margin-left: 11em;
border-right: 1px solid darkred;
padding-right: 2em;
padding-bottom: 3em;
}
#main h2
{
margin-left: 130px;
font-size: 1.3em;
color: darkred;
}
#main #pageimage
{
float: left;
}
#main #content
{
margin-left: 130px;
}
#footer
{
margin-top: 2em;
margin-left: 11em;
text-align: right;
font-size: 0.8em;
color: #666666;
}
HTML-DATEI ....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<link href="teststyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="center">
<div id="header">
big headline
</div>
<div id="menu">
button1<br>
button2<br>
button3
</div>
<div id="main">
<h2>Headline</h2>
<div id="content">
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
</div>
</div>
<div id="footer">
footer footer footer
</div>
</div>
</body>
</html>
-
Hi,
Das Problem ist, dass Text im Content-Div auf der Höhe des Menüs 1 Pixel (oder auch 2?) weiter rechts steht,
nein, drei. Du bist auf den berühmten Three Pixel Text Jog gestoßen.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Danke für die Antwort, ich werd mich dann mal ans bugfixing machen.
Gruß waste
-
-
Hi,
Ein Beispiel wäre in SelfHTML
http://de.selfhtml.org/css/layouts/anzeige/2spaltig_links.htmwenn Du das schon gefunden hast, warum dann nicht den Hinweis "Im Internet Explorer werden Sie an dieser Stelle vermutlich auch einen Bug erkennen, der den neben einem floatenden Element stehenden Text zusätzlich um *3px* einrückt."?
Oder etwas weiter hinten: "Außerdem beinhalten diese beiden Beispiele einen Workaround für den Internet Explorer gegen die um 3px erweiterte Einrückung des Textes neben der Navigation."?freundliche Grüße
Ingo-
» wenn Du das schon gefunden hast, warum dann nicht den Hinweis ...
Oh man, ich bin ein blindes Huhn.
Danke für den HinweisGruß waste
-