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 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2006
    Location
    Australia
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts

    margin differences in Firefox and IE

    I have a site here:
    http://www.menslineaus.org.au
    You'll see in IE that the menu items on the left are separated by a 2px wide space that allows the gradient in the background to show through between each menu item. However in FF, there is no gap. I've had similar problems on the same page with a div not displaying a clearly specified margin in FF, though it showed in IE. Here's the CSS for the menu items (I've included all selectors, though the probably relevant one is the second one, where you can see top and bottom margin of 1px):
    Code:
    #vert-menu{
    margin-top: 0px;
    z-index:2;
    width:145px;
    padding-bottom:12em; /* To allow room for bottom dropdown */
    float:left;
    }
    
    
    #vert-menu a, #vert-menu h2{
    font:bold 11px/16px arial,helvetica,sans-serif;
    display:block;
    border-width:0px;
    border-style:solid;
    border-color:#ccc #888 #555 #bbb;
    
    background-color: #2c6193; 
    border-left: 1px solid #81a5c7;
    padding: 1px 1px 0px 13px;
    margin: 1px 0px 1px 1px;
    }
    
    #vert-menu h2{
    color:#3e6199;
    }
    
    #vert-menu a{
    color:#3e6199;
    background:#d9e7e8;
    text-decoration:none;
    }
    
    #vert-menu a:hover{
    color:#a00;
    }
    
    #vert-menu a:active{
    color:#060;
    background:#ccc;
    }
    
    #vert-menu ul{
    list-style:none;
    margin:0;
    padding:0;
    width:100%;
    }
    So what is it I don't get about CSS margins in FF?
    pp
    -------------------------------------
    "Laziness is the mother of invention" - Thomas Edison (not really)

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Firefox collapses margins sometimes. I've actually never had this exact problem before but this fixes it
    Code:
    #vert-menu ul li {
    float:left;
    clear:right;
    width:100%;
    }
    It doesn't effect IE either.
    Good article here: http://www.andybudd.com/archives/200...gin_for_error/
    Last edited by _Aerospace_Eng_; 05-29-2007 at 05:14 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Mar 2006
    Location
    Australia
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Aerospace, you're a genius. I did turn up that link you suggested after I posted, and I guessed it was the collapsing margin problem, but a cursory read didn't reveal an immediate solution. I'll have to do some closer reading to work out why your solution works. Cheers.
    pp
    -------------------------------------
    "Laziness is the mother of invention" - Thomas Edison (not really)

  • #4
    New Coder
    Join Date
    Mar 2006
    Location
    Australia
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, almost... Now there's a nice neat one pixel border around each menu item in IE, but in FF, it's got a two px border at the top and no border at the bottom. Come on Aerospace - I know you can do it!
    pp
    -------------------------------------
    "Laziness is the mother of invention" - Thomas Edison (not really)

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You do know I'm not the only person who can help you right? You say what each browser is doing but you don't say which browser is showing it correctly.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New Coder
    Join Date
    Mar 2006
    Location
    Australia
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmmm... odd. I replied to this yesterday, but it's not appearing. Must have screwed up somewhere. In answer to your questions:
    Yes, Aero, I know others can help too, but every time I've asked a question on this forum, it's been you who's answered and fixed my problem. I'm amazed you have time for a life with us pests to save.

    It is IE that shows what I want: a 1px border around the whole menu item. For the sake of completeness, the HTML looks like this:
    Code:
    <div id="vert-menu" style="background: url(images/menu-left-bg.jpg) repeat-y;">
                                        <ul>
                                            <li class="title">
                                                <h2 style="background-image: url(images/menutitle-bg.jpg); background-color: none;
                                                    padding-top: 5px; padding-bottom: 5px;">
                                                    Main Menu</h2>
                                            </li>
                                        </ul>
    
                                        <ul>
                                            <li class="item">
                                                <h2>
                                                    <a href="ServiceDirectory.aspx">Men's Services Database</a></h2>
                                            </li>
                                        </ul>
    ...
    
    </div>
    pp
    -------------------------------------
    "Laziness is the mother of invention" - Thomas Edison (not really)

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this for the relevant CSS, notice I removed the margins from the links.
    Code:
    #vert-menu a, #vert-menu h2{
    font:bold 11px/16px arial,helvetica,sans-serif;
    display:block;
    background-color: #2c6193; 
    border-left: 1px solid #81a5c7;
    padding: 1px 1px 1px 13px;
    margin:0;
    }
    #vert-menu ul li {
    float:left;
    clear:right;
    width:100%;
    margin-bottom:2px;
    }
    #vert-menu ul li ul li{
    float:none;
    clear:none;
    margin-bottom:0;
    }
    I haven't tested this in IE yet.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New Coder
    Join Date
    Mar 2006
    Location
    Australia
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that was great for FF, aero, but it caused the margin between menu items to disappear in IE. I fiddled a bit by adding margins to the <h2> tag only, but could not remove a 1 pixel difference between IE and FF. So I've resorted to conditional comments to iron out this last remaining irritation.

    Thanks for your help again. Now I just have to work out how you did it exactly, so I learn from this experience rather than relying on you bailing me out again some time in the future! Cheers.
    pp
    -------------------------------------
    "Laziness is the mother of invention" - Thomas Edison (not really)


  •  

    Posting Permissions

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