Forums

ResQ

I have a strange problem on a web site I'm developing. In FF and IE7 it renders fine but in IE6 it looks like the top border is rendered twice with the header picture also rendered twice causing a 10px problem in IE6. I tried several similar hacks I found searching for a solution, all seem to causing a problem in IE7 without fixing the IE6 problem.

Here's what it looks like. The first is as it appears in IE7 and FF, the second in IE6
http://dpcarescue.com/css.jpg

Here's the website it's at
http://dpcarescue.com/index2.php

I'm attaching the CSS Code.

Thanks for any insights, it's frustrating.

apostrophe

Don't have access to windows right now but I would try this:

#logo {
background:transparent url(/images/banner1.jpg) no-repeat scroll center bottom;
border-bottom:1px solid #FFFFFF;
border-top:10px solid #000000;
cursor:text;
height:150px;
padding:20px 0 0;
}

ResQ

Thanks for the suggestion but it didn't change anything, good or bad. IE7 and FF render ok, IE6 still does double border and overlaps. Any other suggestions?

apostrophe

Ok we'll have to do it properly then.

Remove the 10px solid border from #logo and add it to the body instead. Put #logo inside #page. Place the h2 before #logo but inside page.

<div id=\"page>
<h2>DPCA Doberman Rescue</h2>
<div id=\"logo\"
</div>

body {
color:#666666;
font-size:13px;
border-top: 10px solid #000000;
}
#logo {
background:transparent url(/images/banner1.jpg) no-repeat scroll center top;
border-bottom:1px solid #FFFFFF;
width: 1020px;
height: 150px;
}
h2 {
margin: 2px 0;
text-align: right;
}

treehouse : what would you like to learn today?

Forums

IE6 Seems to render header twice