Div img display IE6 raaarrgh!!!!

frinkky · February 26th, 2007, 06:07 PM

Ahoy hoy,

Could someone have a quick look at this: storm-wind.com/clients/blrch/index.html

I have a 3 divs representing a top graphic, a repeating mid graphic and a foot graphic all wrapped in another div (twice actually, once for the background and one for the nav bar) and in both one of the div's is separated from the others - only in IE6 though. In FF it displays as it should. I've done some research and tried things like vertical-align: bottom; and display: block; yada yada but to no avail (also IE6 is not obeying my text-decoration commands!!! EDIT: it is obeying correctly when live, just not viewing it locally).

Oh, both xhtml & css vaildate.

Any help would be greatly appreciated. I'd be happy to buy whoever can help me solve this a virtual pint!!! (or a cookie, whatever really).

Cheers

Frinkky

dawg9 · February 26th, 2007, 06:38 PM

I thought I had css ie issues. This would drive me crazy. I'm new to this so I'm sorry I can't be of much help. I did have a question while looking at the xhtml. What purpose does the "empty" divs serve? navbartop, navbarbottom, and fadebottom. Really good design by the way. It's very easy on the eyes.

frinkky · February 26th, 2007, 06:59 PM

Cheers dawg. I call those divs in css to put in images, etc. I'll post the code so you can see, and also so any real experts can point out my mistakes

As it happens, I've found an interim solution (it seems to be a nasty hack of soghts though) by having 2 css files, one for ie6 only that uses negative margins on the offending items - in fact so you can see, i'll post that one. The other file, for FF just has margin: 0; as it should be.

Code:

* {
padding: 0;
margin: 0;
}
body {
background-color: #FFFFFF;
color: #8a8c6b;
margin: 0;
font-family: small, Arial, Helvetica, sans-serif;
font-size: 100.01%;
}
#wrapper {
width: 750px;
margin: 0 auto;
padding: 0;
}
#bl_logo_top {
width: 750px;
height: 105px;
margin: 0;
padding: 0;
background-image: url(../images/bl_logo_top.jpg);
background-repeat: no-repeat;
}
#fadetop {
width: 660px;
height: 136px;
margin: 0;
padding: 20px 70px 0 20px;
background-image: url(../images/top_bg.jpg);
background-repeat: no-repeat;
float: left;
}
#innerwrapper {
width: 695px;
margin: 0 0 -170px 0;
padding: 0 50px 0 5px;
background-image: url(../images/mid_bg.jpg);
background-repeat: repeat-y;
float: left;
}
#fadebottom {
width: 695px;
height: 170px;
margin: 0;
padding: 0 50px 0 5px;
background-image: url(../images/bot_bg.jpg);
background-repeat: no-repeat;
float: left;
}
#navbarwrapper {
clear: both;
width: 159px;
}
#navbartop {
width: 159px;
height: 13px;
background-image: url(../images/navbar_top.jpg);
background-repeat: no-repeat;
margin: 0 0 -12px 0;
padding: 0;
vertical-align: bottom;
}
#navbarmid {
width: 159px;
margin: 0;
padding: 0;
font-size: 0.76em;
line-height: 31px;
background-image: url(../images/navbar_mid.jpg);
background-repeat: repeat-y;
}
#navbarmid ul, li {
width: 145px;
margin: 0 0 0 7px;
padding: 0;
color: #8a8c6b;
text-align: left;
list-style-type: none;
}
#navbarmid a:link, #navbar a:visited {
text-decoration: none;
color: #660000;
}
#navbarmid a:hover {
text-decoration: underline;
}
#navbarbot {
width: 159px;
height: 17px;
margin: 0;
padding: 0;
background-image: url(../images/navbar_bot.jpg);
background-repeat: no-repeat;
}