Padding / Margin probs.... any ideas?

[MrPunkin]

I am having troubles with my page. If you go to www.mrpunkin.com in IE you see the menu on the left with the rollovers. See how its got a 10px margin on top and bottom or so? Now do it in Mozilla, Firebird, Safari, etc and it has a HUGE left margin for the menu. The same is for my thumbnails on the photo page. It seems to not like the margins or padding on the lists, as both my menu and thumbnails are setup as lists.

Anyone got a solution? The CSS is www.mrpunkin.com/default.css

Thanks ahead of time.

[pyro]

Play with the margin and padding on the ul element.

[MrPunkin]

I have a lot but it doesnt seem to change anything, or it just screws everything up vertically. It seems I can NOT move it to the left anymore, only further to the right.

[Paul Jr]

Off the top of my head, try adding padding-left: 5px; to your #menulist styles.

[PeOfEo]

In your menulist make it position:absolute; See what that does. I would rop the margins all together if I were you and use left:5px; and top:5px; too, but that would be me.

[MrPunkin]

I love you.... honestly. That fixed it, although I used 0 instead of 5px. AMAZING it was that simple. Thanks!

btw: I had tried the absolute position and it didnt work. This works now though in all my browsers, thanks everyone! it was the padding-left.

[pyro]

Originally posted by MrPunkin
That fixed it

Yep:

Originally posted by pyro
Play with the margin and padding on the ul element.

IE and Mozilla render them differently, which is why I told you to play with the values for both.

[PeOfEo]

that is why I said use left and not margin and get rid of that all togther, left and absolute to position it 5px from the side of the div.

[pyro]

Originally posted by PeOfEo
make it position:absolute;

You're addicted to position: absolute;, aren't you?

[PeOfEo]

No, I use relative too, but with the left you would need it (or relative) but I can just see relative causing problems in this situation with how it likes to wrap things.

[pyro]

Which is why using no positioning at all is the best method. Simply removing the margin and padding is the way to go.

[PeOfEo]

Originally posted by pyro
Which is why using no positioning at all is the best method. Simply removing the margin and padding is the way to go.

grrrr float:center;

[MrPunkin]

well, no matter how its done, right now it reads the exact same in Mozilla, Firebird .7, Safari 1.1, IE6, and Opera 7. I know because I have all these here and have tested them all.

[PeOfEo]

want me to check it in ie 5 and 5.5 for yah? I just previewed it in is 5 and 5.5 and it reads just like ie6 in those two browsers, so you don't have any box model problems, congrats.