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

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

ralawrence — Thu, 13 May 2004 06:23:39 -0800

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.

By: yerfatma

yerfatma — Thu, 13 May 2004 06:38:51 -0800

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.

By: blueshammer

blueshammer — Thu, 13 May 2004 06:43:28 -0800

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.

By: ralawrence

ralawrence — Thu, 13 May 2004 06:53:09 -0800

Simple but obvious. Thank you very much for your help. I'll go through and remove the cruft later!

By: sageleaf

sageleaf — Thu, 13 May 2004 07:57:41 -0800

Knocked out a website. Had you knocked it off, you may very well have gotten worms from sleeping with the fishes in perpetuity.

By: DrJohnEvans

DrJohnEvans — Thu, 13 May 2004 08:30:26 -0800

Knocked in a website. Had you knocked it out, you may very well have been indicted for template assault.

By: lilboo

lilboo — Thu, 13 May 2004 10:02:45 -0800

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...

By: iconomy

iconomy — Thu, 13 May 2004 11:14:32 -0800

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.

By: ook

ook — Thu, 13 May 2004 11:27:37 -0800

Knocked together a website. Had you knocked it back, the stylesheet might have been doubled or blurred as well as skewed.

By: sageleaf

sageleaf — Thu, 13 May 2004 12:03:17 -0800

You knock-knocked a website. Which explains all the jokes.