SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    FireFox problem on UL/LI?

    Hi i have built a navigation system with css controled list, with dropdown effects that works well in both IE6 and FF 1.5 but the problem is that in FF the menu bar is not taking all the space that it is given to him (750px) on the right end of the menu navigation bar there is a white space that i can't get ride of. The navigation bar background is orange!

    In IE there is no problem the entire navigation bar is Orange, but in FF there is 6px white space on the right end!

    here si the code, i have added background almost everywhere to make taht space the same color as the rest of the menu but it doesn't help!


    CSS
    Code:
    /* Positionning & Structure of 1st Level Menu */
    #navigation {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	width: 750px;
    	display: block;
    	background-color: #DA5D09;
    	}
    /* Positionning & Structure for Sub-Menus */
    #navigation ul{
        display:block;
        /*margin:0;*/
        padding:0;
        list-style: none;
        margin: 0;
        background-color: #DA5D09;
        border-style: solid;
        border-color: #fff;
        border: 1px;
    
        }
    	
    #navigation li ul {
    	position: absolute;
    	top: 173px;
    	display: none;
    	}
    
    /* Structure for 1st level Menu Items */
    #navigation li {
        list-style: none;
        width: 124px;
        height: auto;
        display: block;
        float: left;
        margin: 0;
        padding: 0;
        background-color: #DA5D09;
    	}
    /* Structure for Sub-Menu Items */
    #navigation li li {
      display: block;
        float: none;
        margin: 0;
        padding: 0;
        list-style: none;
        width: 124px;
    }
    
    
    /* Styles for 1st level Menu Items */
    #navigation li a{
        text-align: center;
        background: #DA5D09;
        border-width: 0 2px 0 0;
        border-color: #fff;
        border-style: solid;
        color: #fff;
        font-size: 11px;
        font-weight: bold;
        display: block;
        text-decoration: none;
        padding: 10px 0;
        margin: 0;
            }
    /* Styles for Sub-Menu Items */
    #navigation li li a{
        text-align:left;
        background: #DA5D09;
        border-width: 1px 0 0 0;
        border-color: #fff;
        border-style: solid;
        font-size: 10px;
        display: block;
        text-decoration: none;
        padding: 5px;
        margin: 0px;
            }
    /* The magic */
    #navigation li:hover ul, #navigation li.over ul { display: block; }
    The XHTML
    Code:
    <ul id="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="#">Features</a>
          <ul>
            <li><a href="#">Muzik News</a></li>
            <li><a href="#">Interviews</a></li>
            <li><a href="#">Reviews</a></li>
          </ul>
        </li>
        <li><a href="#">Lifestyle</a>
          <ul>
            <li><a href="#">Urban reports</a></li>
            <li><a href="#">Style & Gear</a></li>
            <li><a href="#">Sports Corner</a></li>
          </ul>
        </li>
        <li><a href="#">Community</a>
          <ul>
            <li><a href="#">Forums</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Calendar</a></li>
          </ul>
        </li>
        <li><a href="#">Muzik</a>
          <ul>
            <li><a href="#">Muzik Lounge</a></li>
            <li><a href="#">Online Radios</a></li>
          </ul>
        </li>
        <li><a id="lastright"  href="#">Muzik Store</a></li>
      </ul>
    The navigation UL is included in a global div (that contains the entire page) of 750 px as well!

    I am a real newbie with css based design so you might notice my code is not very logic all the time and has a lot os redundancy but at least i am trying to convert to this new paradigm!

    Thx in advance for the help!
    Last edited by motion-ex; Jul 6, 2006 at 03:32.
    On a PHP/Java/XML/Javascript/MySQL internship right now!

  2. #2
    SitePoint Enthusiast ada80ro's Avatar
    Join Date
    Apr 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In firefox a float element does not have any influence on the height of the containing block (this is the w3c way).
    That's why in firefox <ul id="navigation"> has a height of 0px and because of that you cannot see any background.
    To force the ul element to include the li element you'll have to use the clearfix hack:

    1. add this class in your css:
    /*start clear hack*/
    .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    /*hide from ie-mac\*/
    * html .clearfix {height: 1%;}
    /*hide from ie-mac*/

    2. add the clearfix class to ul:
    <ul id="navigation" class="clearfix">

  3. #3
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Don't be forgetting IE7 now.

    http://www.456bereastreet.com/archiv...eeded_for_ie7/

    As of late, I've found myself using the neater 'overflow combined with a width' method.

  4. #4
    SitePoint Enthusiast ada80ro's Avatar
    Join Date
    Apr 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Egor
    Don't be forgetting IE7 now.

    http://www.456bereastreet.com/archiv...eeded_for_ie7/

    As of late, I've found myself using the neater 'overflow combined with a width' method.
    Thanks for the tip.

  5. #5
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks both of you it works!

    there is another problem with IE6 which is that a: over effect only works on the words that constitues a link not on the entire block which is the case in FF
    Last edited by motion-ex; Jul 8, 2006 at 00:33.
    On a PHP/Java/XML/Javascript/MySQL internship right now!

  6. #6
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok i found my way out of this IE6 inconstancy with this: http://www.brunildo.org/test/IEABlock1.html
    On a PHP/Java/XML/Javascript/MySQL internship right now!


Bookmarks

Posting Permissions

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