Hallo zusammen,
ich habe gerade ein kleines Problem, das mir der "Faux Columns" Trick im IE nicht funktioniert.
Im Firefox wird alles korrekt angezeigt.
Hier mal der HTML-Code:
HTML-Code:
<div id="MasterTableBox">
<div id="HeaderTableBox"> </div>
<div id="HeaderNavigationBox">
<ul class="HeaderNavigation">
<li><a href="#">Startseite</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<div id="BG">
<div id="LeftContentBox">
<ul class="BoxesLeft">
<li><h2>Titel</h2></li>
<li><h3>Sub Titel</h3></li>
<li><a href="#">• Link 1</a></li>
<li><a href="#">• Link 2</a></li>
<li><a href="#">• Link 3</a></li>
<li><a href="#">• Link 4</a></li>
</ul>
<p class="BoxesLeft"><img src="http://xhtmlforum.de/images/Fluegel.png" width="25" height="12" alt="" /></p>
</div>
<div id="MasterContentBox">
content
</div>
<div id="CalendarContentBox">
kalender
</div>
<div id="RightContentBox">
rechts
</div>
<br style="clear:both;" />
</div>
<div id="FooterBox">footer</div>
</div>
Und die passende CSS dazu (nur mal das Grundgerüst):
HTML-Code:
#MasterTableBox{
width: 900px;
margin-right: auto;
margin-left: auto;
border: 4px solid #990000;
background-color: #FFFFCC;
}
#HeaderTableBox{
background-image: url(../images/logo.png);
height: 120px;
background-repeat: no-repeat;
background-position: center center;
}
#HeaderNavigationBox{
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #990000;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 5px;
}
#LeftContentBox {
float: left;
width: 160px;
}
#MasterContentBox {
float: left;
width: 420px;
height: 100%;
}
#CalendarContentBox {
float: left;
width: 160px;
}
#RightContentBox {
float: left;
width: 160px;
}
#FooterBox{
text-align: center;
background-color: #990000;
color: #FFFFcc;
line-height: 20px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}
#BG{
background-image: url(../images/BG_verlauf.png);
background-repeat: repeat-y;
background-attachment: scroll;
margin-bottom: 5px;
}
Für den "Faux Columns"-Trick habe ich eine Grafik angelegt, die genau passt.
Wie gesagt im Firefox wird das so angezeigt wie ich mir das vorstelle, das ich neben jeder Spalte einen senkrechten Strich habe.
Hat mir da jemand einen Tip?
Suche mir schon die Finger wund.
Danke und Grüße
Stipo