Hiho,
ich baue grad an einer Seite im 3-Column-Layout. Zugrundegelegt habe ich das Konstrukt dem Vorschlag von Michael Levine, der für "A List Apart" publiziert. http://www.alistapart.com/articles/holygrail
Viele kennen es mit Sicherheit.
Nun denn: Im Firefox sieht das Layout perfekt aus. Im IE ist die linke Spalte beim Laden der Seite zu weit links. erst wenn ich über mein Menu gehe, schiebt sich die linke Spalte an die richtige Position... o_O
Ich bin verwirrt! Kennt jmd dieses Problem?
Der Source in grob:
<div id="pageregion">
<div id="pageregionContent" class="column">
... Content ...
</div>
<div id="pageregionLeft" class="column">
... LeftNavi ...
</div>
<div id="pageregionRight" class="column">
... RightTeaser ...
</div>
</div>
Das CSS in groben Auszügen:
body {
min-width: 95%;
font-size: 0.8em;
}
#pageregion {
padding-left: 146px; /* LC fullwidth */
padding-right: 180px; /* RC fullwidth + CC padding */
}
#pageregion .column {
position: relative;
float: left;
}
#pageregionContent {
padding: 20px 10px 10px 20px;
width: 100%;
}
#pageregionLeft {
width: 146px; /* LC width */
right: 176px; /* LC fullwidth + CC padding */
margin-left: -100%;
border-left: 2px solid #00639C;
border-right: 2px solid #00639C;
background-color: #B5DBF7;
}
#pageregionRight {
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
}
#pageregionBottom {
float: left;
width: 100%;
background-color: #B5DBF7;
margin: 0px;
padding: 0px;
border: 0px;
clear: both;
position:relative;
}
/*** IE Fix ***/
* html #pageregionLeft {
left: 150px; /* RC fullwidth */
}
/*** Equal-height Columns ***/
#pageregion {
overflow: hidden;
}
#pageregion .column {
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */
}
/*** Footer Fix ***/
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 20010px;
margin-bottom: -20000px;
background: #FFF; /*** Same as body background ***/
}
Und das Menu:
Source:
<div id="Menu">
<ul>
....
<li class="Menu_item"><a href="http://...">Aktuelles</a></li>
....
</ul>
</div>
CSS:
#Menu {
float: left;
width: 100%;
background-color: #00639C;
}
#Menu ul {
float: left;
margin:0px;
font-size: 0.9em;
margin-left: -38px !important; margin-left: 1px;
}
#Menu ul li {
line-height: 150%;
display: inline;
padding:0px;
margin:0px;
}
#Menu ul li a {
float: left;
font-family: verdana, arial, helvetica, sans-serif;
font-weight:bold;
padding: 0.2em 1em;
background-color: #00639C;
color: White;
text-decoration: none;
border-right: 0.1em solid #fff;
}
#Menu ul li a.current {
color:#fff;
background-color: #990000;
}
#Menu ul li a.home {
background-color: #333;
}
#Menu ul li a:hover {
background-color: #333;
color: #fff;
}
/*----- menu colors-----*/
#Menu ul li.Menu_item a:hover {
background-color: #ffa500;
}