SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Problem Overflow menu

    HI Guys,

    Please I need some help!! I m struggling with the overflow tag on my navigation...

    the navigation work fine in mozilla, but not in IE 5 & 6.. the box of my navigation expand..I try different hacks like to put overflow:relative to the container..but still not work!!

    many thanks
    red


    here the html code:

    <div id="nav">

    <ul id="navigation">
    <li class="selected"><a href="default.html">Home</a></li>
    <li><a href="branding.html">Portfolio</a></li>

    <li ><a href="what.html">What we do</a></li>
    <li><a href="clients.html">Clients</a></li>
    <li><a href="contacts.html">Contacts</a></li>
    </ul>
    </div>


    HERE IS THE CSS:
    a img {
    border:0;
    }

    img {
    border:0;
    float: left;
    }


    html, body {
    background-color:#232323;
    margin: 0;
    padding: 0;
    }


    #container {
    margin:0 auto;
    width:1000px;

    }


    #nav {
    height:25px;
    background-color:#FFC807;
    width: 380px;
    float:left;

    }



    #navigation {
    position:relative;
    z-index:999;
    overflow:visible;
    margin:44px auto 0;
    padding:0;
    width:380px;
    height:25px;
    }


    #navigation li {
    position:relative;
    top:-70px;
    left:15px;
    float:left;
    margin:0 16px 0 0;
    list-style:none;
    font-weight:bold;
    }

    #navigation li a {
    display:block;
    height:75px;
    color:#231f20;
    font-size:15px;
    line-height:75px;
    letter-spacing:-0.03em;
    text-decoration:none;
    }

    #navigation li.selected a {
    color:#fff;
    }

    #navigation li a:hover,
    #navigation li a:focus {
    color:#fff;
    }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,759
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Hi, for one thing, drop IE5

    Second, to restrict something to it's width put overflow:hidden on it.

    If you need the children to be able to still be seen, give the child(ren) position:relative (to make this work the parent that has overflow CANNOT have postion:relative. Be aware of that)

    Just looked at your code..you set the nav to be 25px height but then you set the anchors to 75px height..?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks now it works... very helpfull

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,759
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    You're welcome _.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •