CSS: UL's/OL's vs. Div floating left in IE
-
05-09-2019 - |
Question
The scenario is that the client wants a floating div (the gray box) with text that wraps around it. However some of that text includes ul's and ol's, which hide behind the floating div in IE6.
I tried wrapping the ul's/ol's in a div to see if that would help, but have been unsuccessful. Has anyone experienced this problem before and found a suitable solution?
(note: This is an old site with limited ability to be able to modify much else within the layout)
Solution
I think you can modify the li's to display their bullets inside instead of outside and that should help you...
ul {
list-style-position: inside;
}
OTHER TIPS
However some of that text includes ul's and ol's, which hide behind the floating div in IE6.
If we're talking something as simple as this:
<div style="border: dotted red 1px; float: left; width: 100px; height: 100px">foo</div>
<p>bar</p>
<ol style="border: dotted blue 1px;">
<li>potato</li>
<li>yoghurt</li>
</ol>
Then what happens here happens on all browsers, not just IE. You can see it from the borders on this example: the left-padding of the list occurs behind the float, not pushing the list content further to the right. This is because floats only repel items in a line box, not block elements.
If you want a quick hack workaround, wrap the <ul> in a <div> with style ‘display: inline-block’.
Floating + IE6 is always a causes some unintentional pain and suffering. Some simple fixes:
- Add more margin to the floating box
- Add some left margin to your ul/ol