Top image bar on website broken in IE6 and FF; text is obscured. How to fix this?

May 13, 2004 6:23 AM

I've knocked up a website which is modifed from some of the templates from the layout reservoir. However the top bar which contains the image is causing problems under some browsers (IE6 and Firefox being two) because the height doesn't match the image height which means that the text is obscured. Any suggestions?

One thing I forgot to mention, is that the css can be found here to save you digging through the code.

posted by ralawrence to Computers & Internet (9 answers total)

Looks like you need to increase the height of the #Header element. Since you're not putting anything in it but a background image, just change the padding. The new CSS would look like this:

#Header {
margin:20px 0px 10px 0px;
padding:0;
height:50px;
border-style:solid;
border-color:black;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background: url("logo.jpg") left top no-repeat;
}

Kill all the other stuff releated to the #Header (the voice hack and the Be Kind to Opera stuff) since you're no longer working around different box models (since there's no padding anymore, the height calculation will be consistent across browsers).

You might want to but a no-break space or an empty span tag inside the header element just to make things consistent.
posted by yerfatma at 6:38 AM on May 13, 2004

You knocked off a website. Had you knocked it up, you very well could have gotten a virus or, worse, worms, plus you'd be on the palimony hook for DNR in perpetuity.
posted by blueshammer at 6:43 AM on May 13, 2004

Response by poster: Simple but obvious. Thank you very much for your help. I'll go through and remove the cruft later!
posted by ralawrence at 6:53 AM on May 13, 2004

Knocked out a website. Had you knocked it off, you may very well have gotten worms from sleeping with the fishes in perpetuity.
posted by sageleaf at 7:57 AM on May 13, 2004

Knocked in a website. Had you knocked it out, you may very well have been indicted for template assault.
posted by DrJohnEvans at 8:30 AM on May 13, 2004

Knocked around a website. Had you knocked it in, you may very well have finally won the game for the team in triple-overtime, if you catch my drift...
posted by lilboo at 10:02 AM on May 13, 2004

Knocked back a website. If you had knocked it around, you may very well have rendered the style sheet slightly askew, resulting in the small css disaster which originally inspired this post.
posted by iconomy at 11:14 AM on May 13, 2004

Knocked together a website. Had you knocked it back, the stylesheet might have been doubled or blurred as well as skewed.
posted by ook at 11:27 AM on May 13, 2004

You knock-knocked a website. Which explains all the jokes.
posted by sageleaf at 12:03 PM on May 13, 2004