Yet another cross browser issue

liunx

Guest
Here's another one I can't figure out at this page (<!-- m --><a class="postlink" href="http://www.bassreports.com/test/jobtyps.php">http://www.bassreports.com/test/jobtyps.php</a><!-- m -->) with the css that defines the divs here (<!-- m --><a class="postlink" href="http://www.bassreports.com/test/floating.css">http://www.bassreports.com/test/floating.css</a><!-- m -->).

The two bulleted items on the right should be horizontally aligned with the ones on the left, and in IE they are. In Firefox they are lower and that appears to be due to FF putting whitespace around the text in all dimensions in the right-hand div but not the left. I have tried margin: 0, padding: 0 and border: 0, all with no luck. The divs are all roomy (wide) enough for the content.

Can anyone help me with what's going on?Add .float: left; to .cleft or give both container div's a border.Okay, the float: left did it, but why? Did you know a rule and apply it, or was your suggestion the result of trial and error? If the former, what is the rule?Floated margins do not collapse. Elements with borders do not collapse.
You had 1 list with collapsing-margins (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">http://www.w3.org/TR/CSS21/box.html#collapsing-margins</a><!-- m -->), 1 without. Solution: either collapse both or neither.
IE interprets the ambiguous W3C recommendation differently.Excellent explanation. Clear and concise. Thank you, next time I will know what to look for.
 
Back
Top