0

You can see the issue here: http://jsfiddle.net/6WuVz/7/

This works in all other browser (image top) but when viewed in ie6 (image bottom) it wraps incorrectly:

enter image description here

Note: You can see this in later versions of IE by using compatibility view and selecting IE5 Quirks.

PhilMY
  • 2,621
  • 21
  • 29
Greg G
  • 697
  • 2
  • 8
  • 17
  • seriously, the problem here is Quirks mode. If you're writing a site that requires quirks mode, even in IE6, then you're doing it wrong. You're deliberately introducing browser bugs... no wonder it doesn't work. – Spudley Jul 16 '12 at 19:29

1 Answers1

2

From what I can tell, the div that holds your title doesn't have a set width. Therefore, IE is telling it to expand, and as it expands, it shifts downward, where there's space. Try setting a width for IE6 only and see if that fixes it.

Additionally, IE6 has some issues with overflow: hidden. Though it's usually in combination with position: relative, you may be running into something similar. If the previous solution doesn't work, you could try this.

Edit - Since you don't want to set an explicit width, I've thought of a few other options left to you:

  1. Explicitly set clear: none on the non-floated element
  2. Use a span element instead of div for the text in question (span is inline, while div is block, so it shouldn't expand to the parent width; given what you're doing, it probably makes more semantic sense to use span, anyway).
  3. Use JavaScript to determine the width of the floated div for IE6, and set a size on the non-floated div accordingly (again, you can use conditional comments in your HTML to target IE6 exclusively)
  4. Seriously consider whether it's worth supporting IE6 (ie - if this is on a site where the audience is fairly tech-savvy, you can probably forego IE6 support entirely, or at the very least, fixing this problem will cost your project more than the returns you get; but if you're dealing with healthcare providers, you probably have to still deal with IE6).

IE6 has a non-standard box model, which tells block-level elements to expand the full width of their container, instead of "shrink-wrapping" to their content. Their content is larger than the width they're allowing, and the float property takes the floated elements out of the document flow (which is why your overflow: hidden, when turned to overflow: visible, runs over top the floated content). The newer browsers have basically an "updated definition" (so to speak) of the float property, which tells sibling content to flow around the floated element, in addition to taking it out of the normal document flow. CSS-tricks has a good article on float, as does A List Apart, if you need more information.

Community
  • 1
  • 1
Shauna
  • 9,495
  • 2
  • 37
  • 54
  • Thanks a bunch for the reply, Not having a width is the entire point, so that isn't an option. I want the content on the right to push the title and resize it. The content on the left has the potential to grow quite a lot, and its much more important than the title. You can see my edits here: http://jsfiddle.net/6WuVz/20/ – Greg G Jul 16 '12 at 18:22
  • the left is the title isn't it? if you want the title to wrap at a certain point, then put a width. I don't understand why you can't have a width – Huangism Jul 16 '12 at 19:16
  • I don't want it to wrap at a certain point if you look at the images above the top example with the ellipsis is the correct one the bottom one is the incorrect one. – Greg G Jul 16 '12 at 22:44