padding woes

[Spudhead]

I've got myself into a bit of a quagmire

Test page

I want the green section to be horizontally centre in the blue container, with about 10px margin either side.

I'm playing about with the width and margins here:

.lbox_inner{position:relative; float:left; width:575px; margin:0px 0px 0px 10px; padding:4px;}

but it's going screwy in IE6 - adding 10px of left padding to it shunts it way over to the right. And adding any more makes it overflow the 613px total width. Of course, none of this erratic nonsense happens in Firefox.

I don't get quite what I've done, but I think it needs a fresh pair of eyes.

I'm pretty sure I need to leave the float / positioning in there - I dunno if that's causing a conflict but I can't absolutely position the "read more" link down the bottom without relative positioning the parent, and the whole thing is supposed to be floated to fit in the page layout.

Any suggestions?

[daemonkin]

IE6 does not adhere to the box model for padding.
Call in another stylesheet or use CSS conditioning if the browser is IE6 to alter the styles for the affected elements.

[Jutlander]

Did you get this fixed, cause they look the same on FF and IE 6 now.

[croatiankid]

Haven't looked at it in any detail, but it looks like you might have a problem with IE's double floated margin bug. Try adding display:inline to what you already have for .lbox_inner. If that's the problem, it'll be fixed, with no effect on other browsers.

[Jutlander]

Originally Posted by croatiankid

Haven't looked at it in any detail

You should then, cause you'll discover that the page looks exactly the same on Firefox 2, IE 6 & 7 and Opera.

http://img252.imageshack.us/img252/1305/uploadkx7.png