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 5 of 5
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css relative sizing a dropdown nav menu

    Hi all I'm trying get my dropdownhorizontal menu to size properly using ems but I'm not quite sure how to do it. I allways get overlapping. I just need it to work in ie7 and firefox. I know older ie's dont suport relative sizing but that's ok for now. Here's my html code and css code. If any1 can help me out it would be very helpfull.

    html code:
    HTML Code:

    <ul>
    <li><a href="#">Top 3 Movies</a>
    <ul>
    <li><a href="http://www.imdb.com/title/tt0099685/" target="_blank">Goodfellas</a></li>
    <li><a href="http://www.imdb.com/title/tt0093058/" target="_blank">Full Metal Jacket</a></li>
    <li><a href="http://www.imdb.com/title/tt0110912/" target="_blank">Pulp Fiction</a></li>
    </ul>
    </li>

    <li class="rightBorder"><a href="#">Top 3 Games</a>
    <ul>
    <li><a href="http://www.gamespot.com/gamecube/action/residentevil/index.html?q=resident%20evil&amp;tag=result;title;8" target="_blank">Resident Evil</a></li>
    <li><a href="http://www.gamespot.com/gamecube/action/metroidprime/index.html?q=metroid%20prime&amp;tag=result;title;4" target="_blank">Metroid Prime</a></li><li><a href="http://www.gamespot.com/gamecube/adventure/residentevil4/index.html?q=resident%20evil&amp;tag=result;title;5" target="_blank">Resident Evil 4</a></li>
    </ul>
    </li>
    </ul>

    css code:
    Code:

    body {
    font-size:100%;
    }

    }
    ul {
    font-family:Arial, Helvetica, sans-serif;
    font-size:1em;
    margin:0;
    padding:0;
    list-style:none;
    }
    ul li {
    position:relative;
    float:left;
    width:125px;
    border-bottom:#000000 1px solid;
    border-left:#000000 1px solid;
    border-top:#000000 1px solid;
    top:5px;
    background-image:url(assets/bg_menu2.gif);
    text-align:center;
    }
    li ul li {
    border-bottom:#000000 1px solid;
    border-left:#000000 1px solid;
    border-right:#000000 1px solid;
    border-top:0;
    left:-1px;
    }
    li ul {
    position:absolute;
    left:0;
    top:15px;
    display:none;
    }
    ul li a {
    display:block;
    border-bottom:0;
    text-decoration:none;
    }
    li:hover ul {
    display:block;
    }
    .rightBorder {
    border-right:#000000 1px solid; }

  • #2
    New Coder
    Join Date
    May 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I guess no1 knows what I'm trying to do here. Ok. If you put the css code internal in the head and the html in the body and look at the menu in firefox(provided I didnt screw up the code anywhere) the menu seems to work fine, but when the text is sized up, the dropdown menu overlaps with the intial visible menu. There's the problem, I need the menu to scale down properly so nothing is overlapping while sizing text. Please, any help?

  • #3
    New Coder
    Join Date
    Jul 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    umm, usally when you increase the size of the text, it would almost definity increase the size of the box element.

    What you probably need to do is set an absolute size of that box element.

    I don't know where this dropdown menu is coming from.

    All I see are unordered lists, and unordered lists inside of unordered lists.

    send me a link to your website, and I might be able to help you further on your question.

  • #4
    New Coder
    Join Date
    May 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know, the menu is a bit unorthadox. But it works. I sent you a link. If any1 else can help please feel free.

    Got the css code wrong in first post. This code works.
    css code:

    ul {
    font-family:Arial, Helvetica, sans-serif;
    margin:0;
    padding:0;
    list-style:none;
    }
    ul li {

    position:relative;
    float:left;
    width:125px;
    border-bottom:#000000 1px solid;
    border-left:#000000 1px solid;
    border-top:#000000 1px solid;
    background-color: #FFFFFF;
    }
    li ul li {
    border-bottom:#000000 1px solid;
    border-left:#000000 1px solid;
    border-right:#000000 1px solid;
    border-top:0;
    left:-1px;
    }
    li ul {
    position:absolute;
    left:0;
    top:20px;
    display:none;
    }
    ul li a {
    display:block;
    border-bottom:0;
    text-decoration:none;
    }
    li:hover ul {
    display:block;
    }
    .rightBorder {
    border-right:#000000 1px solid;
    }
    Last edited by melCarmasin; 06-08-2007 at 05:26 AM.

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by melCarmasin View Post
    I just need it to work in ie7 and firefox. I know older ie's dont suport relative sizing but that's ok for now.
    I'm not sure what you mean by that. For instance, IE 6 does support the em unit.

    Have you managed to solve the problem? If not, it would be easier to help if you post a link. For example, we don't know from the code you posted which document type you are using. This affects rendering.


  •  

    Posting Permissions

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