...

View Full Version : Margin-spacing difference in IE vs FF



canadianjameson
07-25-2007, 08:11 PM
Hey all,

I'm getting a spacing difference in IE vs FF with regard to the position of an object on my page. it is the right navigation menu found (blue background) here: www.enviromark.ca/head/. The menu is positioned properly in IE but when i load it in FF it seems to be closer to the scrollbar and I can't figure out why.

The css for the menu is

#navcontainer ul
{
float: right;
clear: left;
margin-right: 25px;
margin-top: 25px;
padding: 0;
list-style-type: none;
font-size: 14px;
}

#navcontainer li { margin: 0 0 3px 0; }

.default
{
display: block;
padding: 2px 7px 2px 24px;
font-family: "verdana", trebuchet ms, arial, sans-serif;
text-align: center;
border: 1px solid #333;
width: 120px;
background-color: #FFF;
background-image: url(../images/Picture1.jpg);
}

#navcontainer a:link, #navlist a:visited
{
color: #FFFFFF;
text-decoration: none;
}

.mOver
{
display: block;
padding: 2px 7px 2px 24px;
text-align: center;
border: 1px solid #333;
width: 120px;
background-color: #FFF;
background-image: url(../images/l1_over.gif);
font-family: "verdana", trebuchet ms, arial, sans-serif;
}

.mOut
{
display: block;
padding: 2px 7px 2px 24px;
text-align: center;
border: 1px solid #333;
width: 120px;
background-color: #FFF;
background-image: url(../images/l1_down.gif);
font-family: "verdana", trebuchet ms, arial, sans-serif;
}



What would typically cause a discrepancy like this?

medigerati
07-25-2007, 08:21 PM
EDIT: Sorry but I just realized you were using right margins and not left margins. This bug does not apply to right margins. It has to be something else. Sorry about that.

----

I think this is actually a bug in IE called the IE Doubled Float-Margin Bug (http://www.positioniseverything.net/explorer/doubled-margin.html). Whenever you float an item, IE will double it's left margin. Fortunately, there is a simple fix, add display: inline to the CSS code. It will then look like this:


#navcontainer ul
{
display: inline;
float: right;
clear: left;
margin-right: 25px;
margin-top: 25px;
padding: 0;
list-style-type: none;
font-size: 14px;
}

This does not effect the display, as the float property immediately after the display property overrides the 'display: inline'.

canadianjameson
07-25-2007, 08:28 PM
perfect!

Wow i had no idea that the order in which you declared the css mattered.

What are some general guidelines to follow?

Jutlander
07-25-2007, 08:33 PM
The order doesn't matter. But the order of link selectors with :link, :hover, :visited and :active pseudo classes matter, that is the only thing I know of in CSS. This is the correct order:


a:link
a:visited
a:active
a:hover

medigerati
07-25-2007, 08:41 PM
Oh that worked? I wasn't expecting it to but still it worked!

As far as general guidelines, the last declaration made will normally override all declarations before that. For example, the background color will be blue.



p {
background-color: red;
background-color: blue; // Overrides red background
}


Take a deeper look into css specificity (http://www.htmldog.com/guides/cssadvanced/specificity/) for more information.

canadianjameson
07-25-2007, 09:30 PM
Thank you both :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum