Stylesheets - Could anyone explain why...

Author

Could anyone explain why...

Chris

2005-05-26, 7:38 pm

Hello

Could anyone explain why the following:

#footer ul
{
float : left;
margin : 2px 0px 7px 28px;
padding : 0px;
width : 360px;
list-style : none;
}

behaves as it should in all browsers except IE6 Win? On IE6 Win the
list appears further to the right than it does in all other major
browsers. Its the amount of space (left-margin) which varies. Maybe I
am missing something really obvious!?

Thanks
Chris

Steve Pugh

2005-05-26, 7:38 pm

"Chris" <absc04@bangor.ac.uk> wrote:

>#footer ul
>{
>float : left;
>margin : 2px 0px 7px 28px;
>padding : 0px;
>width : 360px;
>list-style : none;
>}
>
>behaves as it should in all browsers except IE6 Win? On IE6 Win the
>list appears further to the right than it does in all other major
>browsers. Its the amount of space (left-margin) which varies. Maybe I
>am missing something really obvious!?

When you apply a margin on the same side as a float (i.e. a left
margin on a left floated element or a right margin on a right floated
element) IE doubles the size of the margin.

Solutions: avoid setting margins on the same side as the float OR use
a hack to give IE a value for the margin half the size that it should
be.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

fleemo17@comcast.net

2005-05-26, 7:38 pm

>... use a hack to give IE a value for the margin half the size that it should be.<

That just might solve my latest problem with IE too. How about
providing the hack?

-F

Jasper de Vries

2005-05-26, 7:38 pm

Chris wrote:
> Hello
>
> Could anyone explain why the following:
>
> #footer ul
> {
> float : left;
> margin : 2px 0px 7px 28px;
> padding : 0px;
> width : 360px;
> list-style : none;
> }
>
> behaves as it should in all browsers except IE6 Win? On IE6 Win the
> list appears further to the right than it does in all other major
> browsers. Its the amount of space (left-margin) which varies. Maybe I
> am missing something really obvious!?
>
> Thanks
> Chris
>

That's the double margin bug. Fix it by adding "display: inline;" to
your CSS rules.

Regards,
Jasper

--

Jasper
http://browservulsel.blogspot.com/

kchayka

2005-05-26, 7:39 pm

fleemo17@comcast.net wrote:
>
> That just might solve my latest problem with IE too. How about
> providing the hack?

Just bookmark this page:
<URL:http://www.positioniseverything.net/explorer.html>

You'll see the double-margin bug listed there, among other bizarre
behaviors.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.