List items wont wrap around a DIV in firefox

[buckers]

I have a list which flows down the right hand side of a DIV which is floated left. In IE7 the list items wrap perfectly around the div, but in firefox, the list item just above the bottom of the div remains in a block on the right hand side.

How can I make the list item wrap around the div?

[kolin]

i think one of the main things to think about here is that you have 'fluked' the correct display in IE7. firefox is displaying the css/markup as coded by yourself, and some quirk in Internet Exploiter has meant that by chance it's doing what you intended it to do.

can you post the markup for the div container and it's corresponding css?

[buckers]

Hi Kolin,

Thanks for the reply.

The css for the div is:

#leftnav {
padding: 0px;
width: 315px;
margin: 0px;
overflow: hidden;
float: left;
}

The css for the list is:

ul {
padding:0;
list-style-type: disc;
list-style-position: inside;
margin: 0px;
clear: none;
width: auto;
display: inline;
}

li {
margin-bottom: 10px;
white-space: normal;
margin-left: 0px;
width: auto;
}

Is there a way to make the list wrap in both browsers, whether its fluked in IE or not? :)

Cheers,

Chris.

[SuzyUK]

Hi buckers Welcome to WebmasterWorld!

try adding a couple more list items to the end of your list and put a temporary background color on your left nav div. (both just temporary for a test)

I can't quite tell from your description if what you're saying is that just the last list item should wrap but doesn't as in my test the list is wrapping but just in different places. If it is what you're seeing then this could all depend on what it is the #leftnav div.

With the temporary background color on the left div you might see that it is not quite the same height in FF and IE,
e.g. does IE appear to have no top/bottom padding on the left div, whereas firefox does? If so this could be simply be causing your list to wrap at different places in each browser, which adding extra list items should highlight.

let us know if this is what is happening, maybe I've picked up the description wrong.

-Suzy

[Xapti]

CSS is useless without HTML. They are hand-in-hand partners, so you should include both in your example.

[buckers]

HTML as below:

<div id="mainnav">
<div id="leftnav">
<h1 class="swap" id="your_hearing_aid_explained"><span>your hearing aid explained</span></h1>
<img src="images/photo_2.jpg" name="mainpic" width="297" height="212" id="mainpic" /></div>
<p id="firstpara">Digital hearing aids are highly sophisticated instruments. Here is a brief guide to some of the features now available. If you'd like to know more about any of these please ask one of our staff. </p>
<ul>
<li>...</li>
[ten more list items here]
</ul>
<a href="the_better_hearing_care_digital_hearing _aid_range.asp"><img src="images/buttons/button_Our_range.gif" alt="our range" width="136" height="39" class="next" /></a></div>
</div>

What happens is that the first few list items appear to the right hand side of the div, as you would expect. The list item that starts just before the end of the div but finishes below it stays locked to the right hand side, eg. the sentences which you would expect to wrap beneath the div dont. The remaining list items appear fine as you would expect, starting from the left hand side of the div and running the full length of the container div.

[SuzyUK]

The list item that starts just before the end of the div but finishes below it stays locked to the right hand side

This is correct behaviour. The top of the list item in question starts before the end of the left div. The text inside the <li> generates an anonymous inline box [w3.org], it is the entire box which is involved in the float/wrap process. It's the top of the line box which dictates its vertical position on the page, so while the text itself may look like it could/should wrap under the left div it can't do that because it can't wrap the whole 'inline-box'

maybe a bit much info but again if you want to 'see' this, put a temporary border on top of your list items - if the top border can't wrap the text can't wrap..

I have a feeling that this one is all in the maths, and that you are going to have to try and get the sum of the line-heights on the right to match the height of the #leftnav in order to produce the visual effect you're after?

does this test case approximate your page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0;}
#leftnav {
margin: 0; padding: 0;
width: 315px;
overflow: hidden;
float: left;
background: #eee;
}

ul {
margin: 0; padding:0;
list-style-type: disc;
list-style-position: inside;
}

li {
margin-bottom: 10px;
border-top: 1px solid #f00;
}

#firstpara {background: #cfc;}

</style>
</head>
<body>
<div id="mainnav">
<div id="leftnav">
<h1 class="swap" id="your_hearing_aid_explained"><span>your hearing aid explained</span></h1>
<img src="http://www.searchengineworld.com/gfx/logo.png" name="mainpic" width="297" height="212" id="mainpic" />
</div>
<p id="firstpara">Digital hearing aids are highly sophisticated instruments. Here is a brief guide to some of the features now available. If you'd like to know more about any of these please ask one of our staff. </p>
<ul>
<li>list item</li><li>list item</li><li>list item</li><li>list item</li><li>list item</li><li>list item</li><li>list item</li><li>list item</li><li>list item</li><li>list item</li><li>list item</li>
</ul>
<a href="#">...</a></div>
</div>
</body>
</html>

if so, there are a few things which aren't helping your cause.. and I think the main problem to be overcome is collapsing margins inside the leftnav div..

You should see, in IE, with this sample that there is no "padding" above the <h1>, whereas there is in Firefox, this is not actually padding it's IE collapsing the margin of the <h1> wrongly.. if this is happening in your page taking control of the margin rather than leaving it at default settings will fix this: e.g.

#mainnav h1 {margin: 0 0 10px 0;}

You can specify a top margin as well if you like, just as long as you specify it rather than leaving it to default

Then you should also see in my sample that there is a gap between the bottom of the image and the bottom of the leftnav div (in IE), this is because an image is an inline element and it's allowing some space for the descenders of letters like g, y, etc.. again if this is happening in your page you can take control of this space by making the image a block level element: e.g.

#mainnav img {display: block;}

these two additions to your CSS should at least make the height of the leftnav div more uniform between the browsers. This is important because it is this height that determines how many lines can sit to the right of it.

It may be that this will now make the list appear to wrap more evenly for your purpose, however you could jiggle the height of the left div by adding/subtracting a few pixels to the h1's top margin, or a few pixels bottom padding to the #mainnav div itself. This will make the left side slightly taller/shorter in order to help make the right side 'appear' to wrap neatly

BUT, overall, I'm pretty sure that you'll not be able to get this pixel perfect exact in any case, e.g. if you change the width of the screen, or the font-size it all depends on the number of lines the paragraph takes up where the list is going to wrap, and no amount of fickering with pixels is going to make this the same in every possible viewing scenario!

but if you want to try to see if you can get a compromise, see how it goes and/or if these adjustments are needed/help the visual aspect any. If not, then plan B might be to try to make the line-heights on the right side items so they divide into the height of the left (or approximately anyway) :)

-Suzy
Edit Reason - grammar/spelling!

[edited by: SuzyUK at 1:05 pm (utc) on Dec. 1, 2007]