Member Avatar for HelenLF

Hi,

I am hoping someone can help me with this.
I have a div which stretches the width of the web page which is 5px high and an inner div which is 1000px wide, also 5px high, and centred.

Both divs have an x-repeating background image.

In all browsers this displays nicely - except of course IE6 which displays it as a div about 4 times as high.

Are there any workarounds for this?

Thanks

  • 1 Contributor
  • 1 Reply
  • 85 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by HelenLF

Dani AI

Generated

The combination reported by — collapsing the line box (line-height equal to the intended height) and using overflow:hidden — is a common, practical IE6 workaround. Two things explain why it fixes the symptom: setting a small line-height prevents IE6 from expanding the element because of the inline line box, and changing overflow from visible to another value triggers IE6's proprietary "hasLayout" behavior so the browser respects the explicit height.

Other reliable options when supporting IE6:

  • Trigger hasLayout without overflow by using the proprietary zoom:1 on the problem element (safe visual side effects in IE6).
  • Use an IE-only rule (conditional comment) to apply fixes only for legacy browsers. Example snippet for an IE-only stylesheet is shown below.
/* IE6-only stylesheet */
.selector { zoom: 1; /* triggers hasLayout in IE6/7 */ }

Troubleshooting notes: overflow:hidden will also clip children (and acts as a clearfix for floats), so check for floated content inside the bar. Confirm the background image height matches the intended container height. If the element contains text, matching line-height will vertically center single-line text but may not suit multi-line content. When possible, prefer border-based rules or SVG/CSS for thin decorative bars; those avoid many old-browser quirks.

Member Avatar for HelenLF

I managed to solve it.
In case anyone else has the same problem I found that IE6 started to behave properly when I used a combination of setting the line-height to 5px and using overflow:hidden.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.