www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Firefox CSS Bug?

  1. #1
    Join Date
    Jul 2003
    Location
    MN, USA
    Posts
    75

    Firefox CSS Bug?

    I've modified a CSS horizantal menu based of the one at http://www.sovavsiti.cz/css/horizontal_menu.html It works ok except now the background dissapears in Firefox but looks ok in IE. Test this code or download the source file and see for your self. Let me know what you think. Thanks

    P.S. For now I set the LI's to have the same background, as a workaround.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>Menu Test</title>
    <style type="text/css">
    <!--
    body {
        margin: 0px 0px 0px 0px;
    }
    #Main_Nav {
        margin: 0px;
        padding: 0px;
        width: 100%;
        background-color: #003399;
        font-size: smaller;
        font-weight: bold;
    }
    #Main_Nav ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        width: 100%;
    }
    #Main_Nav li {
        float: left;
        margin: 0px;
        padding: 0px;
        text-align: center;
        white-space: nowrap;
        width: 12%;
    }
    #Main_Nav a {
        display: block;
        width: 100%;
        color: #DDDDDD;
        text-decoration: none;
    }
    #Main_Nav a:hover {
        background-color: #0000CC;
    }
    -->
    </style>
    </head>
    
    <body>
    <h2>Menu Bug</h2>
    <p>Check out the below menu in both IE and Firefox. 
       You'll see that it looks ok in IE but in FF the background dissapears. 
       This is based off a <a href="http://www.sovavsiti.cz/css/horizontal_menu.html" target="_blank">CSS menu</a>.</p>
    <p><em>* The width set on four LI's are to takup all the space because 100% can't be split evenly into 8.</em></p>
    <div id="Main_Nav">
      <ul>
        <li><a href="http://www.google.com/">Google</a></li>
        <li style="width: 13%;"><a href="http://www.yahoo.com/">Yahoo</a></li>
        <li style="width: 13%;"><a href="http://www.webdeveloper.com/">Web Developer</a></li>
        <li style="width: 13%;"><a href="http://www.phpbuilder.com/">PHP Builder</a></li>
        <li style="width: 13%;"><a href="http://www.slashdot.com/">SlashDot</a></li>
        <li><a href="http://www.msn.com/">MSN</a></li>
        <li><a href="http://www.cnn.com/">CNN</a></li>
        <li><a href="http://www.w3.org/">W3C</a></li>
      </ul>
    </div>
    </body>
    </html>
    Attached Files Attached Files

  2. #2
    Join Date
    Jan 2004
    Posts
    2,422
    Float #Main_Nav to the left- it's children are floating out of it. Not a Firefox bug, it's doing what it's supposed to. You'll have to wait for your technical explanation, though.

  3. #3
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    And here is that techinical explanation

    A web page consists of roughly three main layers, listed in order of being "closest" to the user's eyes:
    Code:
    1. Window (the whole browser lives here)
    2. Frame
    3. Document Flow (Also known as layers/absolute positioning.
    Now within layer 3, there are three sub-layers:

    Code:
    3. Document Flow
        A. Floated Elements |
                            | B. Inline Elements
        C. Block Elements
    Now the reason I indented 3.B. is because Inline elements (like text, <img />, <strong>, <span>, etc) will flow around the edges of floated elements. Floated elements, however, do not exist nor take up room in the Block element layer. So literally, the UL tag didn't contain anything. The LI tags you floated were raised out of the Block element layer (Layer 3.C, which contains the UL tag also) and the UL tag had no width and no height.

  4. #4
    Join Date
    Jul 2003
    Location
    MN, USA
    Posts
    75
    LOL, that's not what I was expecting to hear back. Ok, well I can believe that. IE trying to fix things again... So why does it work in the example at that Website? I'll try and figure out the point were I loose the background while modifying that menu. Any ideas on fixing the issue without setting the background of the LI (not that it's bad or anything)? Thanks

  5. #5
    Join Date
    Jan 2004
    Posts
    2,422
    Originally posted by rpanning
    LOL, that's not what I was expecting to hear back. Ok, well I can believe that. IE trying to fix things again... So why does it work in the example at that Website? I'll try and figure out the point were I loose the background while modifying that menu. Any ideas on fixing the issue without setting the background of the LI (not that it's bad or anything)? Thanks
    Yes. Float the ul, and it goes onto the same level as the li's.

  6. #6
    Join Date
    Jul 2003
    Location
    MN, USA
    Posts
    75
    Ok, got that to work but now two other issues popped up.

    1. Putting borders on the left and right of the links, Anchors, pushes the menu to the left. I can't get it to size correctly. FF is close but IE is to wide.

    2. Putting a border on the bottom of the menu. It goes up to the top of the menu (underneath it). This is because everything is floating. So, how can I get the DIV to expand to the proper height (without specifying height)?

    It will be easier to show you what I'm doing. I'm trying to convert our exsisting design to Section 508 complient. www.stma.k12.mn.us

    Thanks
    Last edited by rpanning; 12-17-2004 at 02:01 PM.

  7. #7
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    The easiest and most cross-browser way is to add an element under your UL that has clear: both; applied to it in CSS.

    In CSS:
    PHP Code:
    #Main_Nav .spacer {
      
    background-color#<color of bottom border>;
      
    height1px;
    }

    .
    spacer {
      
    clearboth;
      
    overflowhidden;

    In HTML:
    PHP Code:
     </ul> <!-- The end of your main nav UL -->
     <
    div class="spacer">&amp;nbsp;</div>
    </
    div> <!-- End of #Main_Nav --> 

  8. #8
    Join Date
    Jul 2003
    Location
    MN, USA
    Posts
    75
    Awsome, that fixed that.

    Now, any ideas on the left and right borders? Getting the width 100% without going over. I've tried several ways with no avail.

    Also, FF seems to put a 1px space between every other link, You can see this when applying a left and right border. Ideas?

    Thanks

  9. #9
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    The reason the borders break the layout is because of the CSS box model. Get well-acquainted.

    To get around the box model problem you're having, take out width: 100% in your #Main_Nav a {} declaration. Since the <a> tags are set to block display, they take up the max amount of width possible by default.

    Leave the width out in your <a> tag style declarations, then add the padding and borders you want. The browser will automatically calculate the width property for you.

    As for the 1 pixel space in Gecko browsers, that might disappear when you take out that width in the main nav <a> tag style declaration. If not, it's probably due to the The 1px Rounding Error Problem outlined at Position Is Everything.

  10. #10
    Join Date
    Jul 2003
    Location
    MN, USA
    Posts
    75
    Wow you guys are genius's! How do you know so much?

    Anyway, that did fix both issues. However (sigh), lol, now in IE you have to hover over the text to get the a:hover effect. It does change the background color for the whole li though. So, it's like it is a box but isn't. Odd.. Ideas on that? Thanks again.

  11. #11
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755

  12. #12
    Join Date
    Jul 2003
    Location
    MN, USA
    Posts
    75
    Here is what I have so far. I also forgot to mention the ~3px gap on the right with IE. That's not the biggest issue however and I can work around that. Thanks

    [EDIT]Just attached now, to much code to post in thread.[/EDIT]
    Attached Files Attached Files
    Last edited by rpanning; 12-20-2004 at 11:16 AM.

  13. #13
    Join Date
    Jul 2003
    Location
    MN, USA
    Posts
    75
    Originally posted by toicontien
    Add position: relative; to your main nav <a> style declaration.
    That worked! LAST thing then I'm going to call it good. There is about a 3px gap on the right side in IE. I can deal with that so if it's not fixable, oh well. Thanks
    Last edited by rpanning; 12-20-2004 at 11:23 AM.

  14. #14
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    Again, that has to do with the 1 pixel rounding error. If you expand and contract the browser window, the gap disappears then reappers again. To mask that, you can put a right border on #Main_Nav, then just give all your <a> tags inside it a left border.

  15. #15
    Join Date
    Jul 2003
    Location
    MN, USA
    Posts
    75
    Ok, I'll just keep it the way it is because I use both left and right borders. Well, I think the menu is as good as I'm going to get it. Thanks for all your help!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles