Hallo,
Ich habe schon Suchmaschinen und Foren durchforstet, aber zu diesem Bug habe ich nichts sinnvolles gefunden. Mein unlösbares Problem:
Ich möchte ein horizontales Menü in die Seite einbauen. Ich habe es unterhalb eines <div header> und oberhalb eines <div content> eingebaut. Alles befindet sich in einem <div container>. Die Links der ul, aus denen das Menü besteht, floaten und haben eine fixe Breite. Wenn man die Seite im IE6 öffnet und zum ersten Mal über einen Link hovert, dann wird das umschließende div plötzlich mit einem Ruck größer und bleibt dann so.
Was ich außerdem unlogisch finde: wenn ich der #rightnav ein clear: (egal ob left oder both) verpasse, reißt es das layout auseinander. Kann mir das jemand erklären?
mfg
Hier der Code, sorry wenn er lang ist, aber die Seite ist auf keinem Webserver:
Code:
<style type="text/css">
<!--
* { margin: 0; padding: 0; }
/*fix for IE ignoring auto margins of #container*/
body
{
text-align: center;
}
/*fix end*/
/*fix for IE ignoring auto margins makes text-align necessary*/
#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
text-align: left;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#top h1
{
padding: 0;
margin: 0;
}
#navi
{
padding: 0.5em 0;
background-color: #99CCFF;
border-bottom: 1px solid red;
float: left;
width: 100%;
margin: 0px;
}
#navi ul
{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 100%;
color: #fff;
background-color: #036;
}
#navi li { display: inline; }
#navi li a
{
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
}
#navi li a:hover
{
color: #fff;
background-color: #369;
}
#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
}
#content
{
padding: 1em;
margin-right: 200px;
border-right: 1px solid gray;
}
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
#rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
-->
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="navi">
<ul>
<li><a href="#">brot</a></li>
<li><a href="#">milch</a></li>
<li><a href="#">eier</a></li>
<li><a href="#">kartoffeln</a></li>
<li><a href="#">bratwurst</a></li>
</ul>
</div>
<div id="rightnav">
<p>
blah
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
blah
</p>
</div>
<div id="footer">
Footer
</div>
</div>
25.02.2007, 03:50
IE6 verschiebt Liste beim Hovern
Ähnliche Themen
Linear-Darstellung
