Banner Display Problem

[julie]

When viewed in Firefox, my banner has a weird white block character at the right end, like a space is highlighted. It doesn't show up in IE and I can't figure out how to make it go away. Any ideas?

 

http://www.eatitandloveit.com

[TweezerMan]

Looking at the source HTML, you have this code in your page:

><div id="banner">
<h1><a href="http://www.eatitandloveit.com/" accesskey="1"><img alt="eatitandloveit.gif" src="http://www.eatitandloveit.com/archives/images/eatitandloveit.gif" width="800" height="70" / border =" 0"></a></h1>
<h2></h2>
</div>

Because the <h2> element is inside the 'banner' div, this style from your stylesheet is being applied to it:

>#banner h2 {
font-size: x-small;
display: inline;
padding-left: 10px;
border-left: 5px solid #fff;
}

What you're seeing in Firefox is a 5px wide white border on the left of where the <h2> element is displayed (even though there is no text). To make the border 'disappear', you can style the border color so it is the same as the background color:

>border-left: 5px solid #006;

You could also just remove the border-left style.

 

Hope this helps...

[julie]

ok thanks - i fixed that part. but i wanted to get rid of the padding above, below, and to the left of the image. it looks right in firefox, but in IE there is still a small blue line below that i dont want to be there.

[TweezerMan]

What you're seeing is the #banner div extending just slightly below the image in IE. The following seems to fix the display in IE without disturbing the display in Firefox:

 

In your stylesheet, set the height for the #banner div equal to the image height.

>#banner {
   font-family: Verdana, Arial, sans-serif;
   color: #fff;

   background-color:#006;
   text-align: left;
   height: 70px;
}

Then add a style to set a negative bottom margin for the image, just enough to make the 'line' go away:

>#banner a img {
   margin-bottom: -3px;
}