Web design crew

Discussion in 'OT Technology' started by Rommel, Jan 18, 2005.

  1. Rommel

    Rommel friends forever

    Joined:
    Jul 31, 2001
    Messages:
    36,867
    Likes Received:
    0
    Location:
    /yourself now
    I am having some problems with list based css menus, now i could overcome this by using this simple code and you may call me stupid for not doing so but i wanna persever with lists first and see if i can fix it.

    Code:
    <div id="menu">
    <a href="">One</a>
    <a href="">Two</a>
    <a href="">Three</a>
    <a href="">Four</a>
    <a href="">Five </a>
    <a href="">Six</a>
    
    Now i just set the div#menu to display as block, set the line-height and everything is dandy.

    Now my problem is with list based menus

    for example

    Code:
    <ul id="menu">
    <li><a href="">Coaches</a></li>
    <li><a href="">Classes</a></li>
    <li><a href="">The Facility</a></li>
    <li><a href="">Timetable</a></li>
    <li><a href="">Event Calender</a></li>
    <li><a href="">Event Calender</a></li>
    <li><a href="">Fight Reviews</a></li>
    <li><a href="">In the News</a></li>
    <li><a href="">Trophies</a></li>
    <li><a href="">Quotes</a></li>
    </ul>
    This is what i want to format

    and its css to format it

    Code:
    ul#menu
    {
    list-style:none;
    margin:0 0 0 0;
    padding:25 0 0 0;
    }
    
    
    ul#menu li
    {
    text-align:center;
    }
    
    ul#menu li a
    {
    line-height:40px;
    display:block;
    text-decoration:none;
    color:black;
    }
    
    ul#menu li a:hover
    {
    background:white;
    }
    
    Now if you notice i use display:block; to get it so that the whole bar to light up for some reason it does this in firefox but not in IE. I'm not sure how to go about this, i want the hover effect but i dont think i can set height and width variables for the a tag.

    Should i just stick with the first example at the top of the page or can any of you guys help me.

    Desired effect in Firefox but screws up in IE
    Consistent effect but not the one i want

    Ignore any other bugs as i can fix them fairly easily with relevant hacks, its just this one that is screwing me at the moment
     
  2. Juvenall

    Juvenall What Would Juvie Do?

    Joined:
    Dec 31, 2004
    Messages:
    2,221
    Likes Received:
    0
    Location:
    #!/usr/bin/Detroit
    Give this a shot:

    Code:
      ul#menu li a
     {
     line-height:40px;
     display:block;
     [b]width:100%;[/b]
     text-decoration:none;
     color:black;
     }
     
  3. Juvenall

    Juvenall What Would Juvie Do?

    Joined:
    Dec 31, 2004
    Messages:
    2,221
    Likes Received:
    0
    Location:
    #!/usr/bin/Detroit
    Tested in Firefox and IE. Works just fine...

    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>
     <title>Menu Example</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <style type="text/css">
     ul#menu
     {
     list-style:none;
     margin:0 0 0 0;
     padding:25 0 0 0;
     }
     ul#menu li
     {
     text-align:center;
     }
     ul#menu li a
     {
     line-height:40px;
     display:block;
     text-decoration:none;
     color:black;
     }
     ul#menu li a:hover
     {
     background:red;
     }
     </style>
     </head>
     
     <body>
     <ul id="menu">
     <li><a href="">Coaches</a></li>
     <li><a href="">Classes</a></li>
     <li><a href="">The Facility</a></li>
     <li><a href="">Timetable</a></li>
     <li><a href="">Event Calender</a></li>
     <li><a href="">Event Calender</a></li>
     <li><a href="">Fight Reviews</a></li>
     <li><a href="">In the News</a></li>
     <li><a href="">Trophies</a></li>
     <li><a href="">Quotes</a></li>
     </ul>
     </body>
     </html>
     
  4. Rommel

    Rommel friends forever

    Joined:
    Jul 31, 2001
    Messages:
    36,867
    Likes Received:
    0
    Location:
    /yourself now
    thanks, i thin it must be some of the other code messing it about
     

Share This Page