SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu width problems

    I created a menu last night which looked fine on my IE5.5 at home. I looked at it this morning in IE6 and Mozilla and it's not rendering anything like what I intended

    Basically each menu item should be a specific width, in IE5.5 it is (and Opera 7) but in IE6 the menu items are just as long as the text is. How can I fix this?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title></title>
    <style>
    #menu {
     float: left;
     width: 189px;
    }
    #menu ul {
     margin: 0px;
     padding: 0px;
     list-style: none;
     border-bottom: 20px solid #9B7CD4;
    }
    #menu ul li {
     margin: 0px;
     padding: 3px;
     list-style: none;
     display: block;
    }
    #menu ul li a {
     width: 183px;
     font-weight: bold;
    }
    #menu ul li a:link {
     color: #9B7CD4;
     text-decoration: none;
     border-bottom: 1px solid #cfcfcf;
     border-right: 7px solid #d6d6d6;
    }
    #menu ul li a:visited {
     color: #9B7CD4;
     text-decoration: none;
     border-bottom: 1px solid #cfcfcf;
     border-right: 7px solid #d6d6d6;
    }
    #menu ul li a:hover {
     color: #79797a;
     text-decoration: underline;
     border-bottom: 1px solid #D59B7C;
     border-right: 7px solid #D59B7C;
     background-color: #EED5C9;
    }
    img { border: none; }
    </style>
    </head>
    <body>
     <div id="menu">
      <ul>
       <li><a href="index.htm"><img src="pics/home-icon.gif" width="11" height="13" alt="" /> Home</a></li>
       <li><a href="history/"><img src="pics/history-icon.gif" width="11" height="13" alt="" /> History</a></li>
       <li><a href="business/"><img src="pics/business-icon.gif" width="11" height="13" alt="" /> Business</a></li>
       <li><a href="social/"><img src="pics/social-icon.gif" width="11" height="13" alt="" /> Social</a></li>
       <li><a href="sport/" title=""><img src="pics/sport-icon.gif" width="11" height="13" alt="" /> Sport</a></li>
       <li><a href="churches/"><img src="pics/churches-icon.gif" width="11" height="13" alt="" /> Local Churches</a></li>
       <li><a href="health/"><img src="pics/health-icon.gif" width="11" height="13" alt="" /> Health</a></li>
       <li><a href="environment/"><img src="pics/environment-icon.gif" width="11" height="13" alt="" /> Environment</a></li>
       <li><a href="entertainment/"><img src="pics/entertainment-icon.gif" width="11" height="13" alt="" /> Entertainment</a></li>
       <li><a href="links/"><img src="pics/links-icon.gif" width="11" height="13" alt="" /> Links</a></li>
      </ul>
     </div>
    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Add display block here:
    Code:
    #menu ul li a {
     display:block;
     width: 183px;
     font-weight: bold;
    }
    Should work now, I hope

    Paul

  3. #3
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does Paul but while you're at it, could you perhaps tell me why I'm having a problem with my banner rendering (which then messes up the layout) in Mozilla? In Moz only the image shows and the rest of the div is white and not the bgcolor I specified in the parent div.

    Code:
    #pagetop {
    width: 100%;
    background-color: #9B7CD4;
    }
    #banner {
    float: left;
    width: 306px;
    height: 51px;
    background-image: url(../pics/welcome-to-killyleagh.gif);
    background-position: top left;
    }
    #topnav {
    float: right;
    width: 122px;
    }
    #topnav ul {
    margin: 0px;
    padding: 0px;
    display: inline;
    }
    #topnav ul li {
    margin: 0px;
    padding: 0px;
    display: inline;
    }
    Code:
    <div id="pagetop">
    <div id="banner">&nbsp;</div>
    <div id="topnav">
    <ul><li><img src="pics/home-top.gif" width="43" height="51" alt="return to homepage" /></li><li><img src="pics/email-top.gif" width="41" height="51" alt="Email" /></li><li><img src="pics/site-map-top.gif" alt="Site Map" /></li></ul>
    </div>
    </div>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I think its because your banner is floated so it basically removed from the flow. Therfore you will either need to give your page top a height or add a clear:both.
    Code:
    <ul><li><img src="pics/home-top.gif" width="43" height="51" alt="return to homepage" /></li><li><img src="pics/email-top.gif" width="41" height="51" alt="Email" /></li><li><img src="pics/site-map-top.gif" alt="Site Map" /></li></ul>
    </div>
    <br style="clear:both" />
    </div>
    Paul

  5. #5
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorted


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
  •