Firefox shifts layout horizontally when <li> padding-bottom set

[martal]

I'm having problems getting a working example for this, without including the whole markup. So maybe there is an answer without the actual code.

I am converting a table-based site to CSS and XHTML Strict. A main wrapper, and a wrapper with nav floated left, content floated right.

Page 1 has an unordered list with short list items, no wrapping.

Page 2 has a similarly styled list (same id), but the list items wrap, ie onto two lines.

S0 I set the ul li selector to margin: 0, padding: 0, with a list-item-image.

Looks terrible but this is where you start.

Before setting any left margin/left padding on the li, if I set the padding bottom to 8px, this happens:

Page 1 (short li) stays stable, Page 2 (wrapped li), the whole layout shifts about 3px to the left.

Occurs also in Opera, not in the IEs.

Needless to stay, I've tried every combination that I can think of with margins and padding, on the ul, the li. And the ul is now in its own div, but makes no difference when its not.

I'm hoping someone can give me a pointer here without the codes.

[D_Blackwell]

Probably easier to start with the relevant XHTML & CSS; enough to replicate the problem so that it can be tweaked from there. I could probably code something that I think suits the need, but you wouldn't learn anything from 'plug and play', and I wouldn't get paid for writing it. Would be willing to do some quick trouble shooting though:))

[swa66]

3px jog: that sounds like a well known IE6 bug.

Solution: Think it needs has-layout (e.g. add zoom:1 in the conditional commented stylesheet for IE6), alternatively if you're into hacks, height:1% (The Holly Hack) might do the trick too, but I don't like hacks.

[SuzyUK]

swa, martal says this is a FF/Opera issue so I don't think it can be that.

I wonder martal with the longer list (or page 2) is there a scroll bar being produced on the whole page and is the layout centered?

IE always has a space reserved for the page scroll bar so allows for it when counting/centering. FF/(Opera?) only produce one when required so the layout shifts accordingly when there is one (the shift would be about half the scroollbar width). If that is it you can set a min-height on your html, body elements of 100.01% which should make them act like IE, but if that is it chances are no-one will ever notice it as they are not likely to be comparing page widths

if it's not that I'm afraid we would need the basic layout code and CSS

[martal]

Yes, SuzyUK, it is a height issue, on a centered layout

I found that out when I cloned a page. The new page simply has a list of links like the original. At a certain number of links/position on the page, the shift occurs.

It was just coincidence that adding padding to a list item forced the shift, it was its position.

So, nothing to do with list items and whether they wrap!

Setting a min-height of 700px on the wrapper div fixed the problem, both in Firefox and Opera.

But html, body (min-height: 100.01%} is the better solution, fixing it for all page heights.

The only issue is a scroll bar on all pages, even the short ones.

So it's standard behaviour, but something users, and clients, are unlikely to notice. But it makes designers think there is an error somewhere.

Thanks for the info. I can use this for all the sites I maintain.

[swa66]

swa, martal says this is a FF/Opera issue so I don't think it can be t

Oops, guess I should have read the post in much greater detail.
Sorry.