Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    Margin-spacing difference in IE vs FF

    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
    Code:
    #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?
    Last edited by canadianjameson; 07-25-2007 at 09:13 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Regular Coder medigerati's Avatar
    Join Date
    Jul 2005
    Location
    San Antonio, Tx
    Posts
    163
    Thanks
    0
    Thanked 7 Times in 7 Posts
    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. 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:

    Code:
    #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'.
    Last edited by medigerati; 07-25-2007 at 09:28 PM.
    If you need a little more help, I'm available as a Website designer in San Antonio
    ----------
    If I've helped, please check out my friend's nature photography and let me know if you like anything.

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    perfect!

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

    What are some general guidelines to follow?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #4
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    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:

    1. a:link
    2. a:visited
    3. a:active
    4. a:hover
    .
    .

  • #5
    Regular Coder medigerati's Avatar
    Join Date
    Jul 2005
    Location
    San Antonio, Tx
    Posts
    163
    Thanks
    0
    Thanked 7 Times in 7 Posts
    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.

    Code:
    p { 
    	background-color: red;
    	background-color: blue;  // Overrides red background
    }
    Take a deeper look into css specificity for more information.
    If you need a little more help, I'm available as a Website designer in San Antonio
    ----------
    If I've helped, please check out my friend's nature photography and let me know if you like anything.

  • #6
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Thank you both
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •