Re: IE6, CSS and WordPress – a dog’s breakfast

[matthancocknz]

I managed to abandon the Kubrick version entirely and went back to a ground-up prototype I had at the beginning. The layout now renders properly in IE, but it’s now missing the text in the content div. This occurs in both IE6 and IE7.
[attachment=0]ie7.jpg[/attachment]
While I’m here, what’s the easiest way to align the text in the navigation and content divs so they line up at the top?

Cheers. :)

Code:

body {
width:750px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background: #e7e7e7;
}

/* —– HEADER —– */

#header {
width:750px;
height:92px;
background-image: url(header.jpg);
background-repeat: no-repeat;
background-position: left top;
}

#flash {
width:750px;
height:106px;
background-image: url(flash.jpg);
background-repeat: no-repeat;
background-position: left top;
}

#uppernav {
width:750px;
height:35px;
background-image: url(uppernavbg.jpg);
background-position: bottom;
background-repeat: no-repeat;
line-height: 20px;
border: 0 1px 0 1px;

}

#searchbar {
position: relative;
top: 20px;
width: 95%;
text-align:right;
}

#uppernav {
width:750px;
height:42px;
background-color:#354032;
line-height: 20px;
border: 0 1px 0 1px;

}

#uppernav ul {
display:block;
width:750px;
margin:0 auto;
}

#uppernav li {
background:transparent url(‘http://wordpress.oldworld.co.nz/wp-content/themes/default/ images/navborder.gif’) no-repeat scroll right bottom;
color:#FFFFFF;
display:block;
float:left;
padding:5px 10px;
}

#uppernav ul a {
color:#FFFFFF;
display:block;
float:left;
padding:5px 10px;
}

/* FAUX LAYOUT WRAPPER */

#wrapper{
width:750px;
background:url(spacer.gif) repeat-y;
overflow:auto;
}

/* —– NAVIGATION —– */

#navigation {
width:287px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background-color:#4b825a;
float:right;
padding: 10px 0 10px 10px;
}

/* —– MAIN CONTENT —– */

#content {
width:736px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background-color:#a5c19b;
padding: 10px 0 10px 10px;
}

/* —– FOOTER —– */

#footer {
width:750px;
height:33px;
background-color:#354032;
color:white;
}