SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <li> not 100% in IE

    I got this css menu template from Stu Nicholls. It works fine when I set a numeric width for both the ul and the li. But when I set the ul width to "auto" and the li to "100%", it works fine in FF but in IE7 the li is only as wide as the text. I've did tons of trial and error and online research, but nothing seems to work. I really need to complete this project.

    This is the link: http://www.ebonetworks.com/rsd_mock/departments.php

    Here is the CSS:

    .preload1 {background: url(images/six_0a.gif);}.preload2 {background: url(images/six_1a.gif);}#nav {padding:0; margin:0; list-style:none; height:38px; background:#fff url(images/six_0.gif) repeat-x; position:relative; z-index:200; font-family:arial, verdana, sans-serif;}#nav li.top {display:block; float:left;}#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursorointer;background: url(images/six_0.gif);}#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(images/six_0.gif) right top no-repeat;}#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(images/six_0a.gif) no-repeat right top;}#nav li:hover a.top_link,#nav a.top_link:hover{color:#fff; background: url(images/six_1.gif) no-repeat;}#nav li:hover a.top_link span, #nav a.top_link:hover span{background:url(images/six_1.gif) no-repeat right top;}#nav li:hover a.top_link span.down,#nav a.top_link:hover span.down{background:url(images/six_1a.gif) no-repeat right top; padding-bottom:3px;}#nav table {border-collapse:collapse; padding:0; margin:0; position:absolute; left:0; top:0;}#nav li:hover {position:relative; z-index:200;}#nav a:hover {position:relative; white-space:nowrap; z-index:200;}html>body ul.sub li {width:100%;}#nav :hover ul.sub{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #ffffff; white-space:nowrap; width:auto; min-width:90px; height:auto; z-index:300;}#nav :hover ul.sub li{display:block; height:20px; position:relative; /*float:left;*/ width:100%; /*min-width:90px;*/ font-weight:normal; margin-right:5px; line-height:18px;}#nav :hover ul.sub li a{position: relative; display:block; font-size:11px; height:auto; width:100%; line-height:18px; text-indent:3px; color:#000; text-decoration:none;/*border:1px solid #50b5d0;*/}#nav li ul.sub li a.fly{background:#50b5d0 url(images/arrow.gif) 99% 6px no-repeat;}#nav :hover ul.sub li a:hover {background:#3f96a9; color:#fff; border-color:#fff;}#nav :hover ul.sub li a.fly:hover{background:#3f96a9 url(images/arrow_over.gif) 99% 6px no-repeat; color:#fff;}#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}#nav a:hover a:hover ul,#nav a:hover a:hover a:hover ul,#nav a:hover a:hover a:hover a:hover ul,#nav a:hover a:hover a:hover a:hover a:hover ul{left:89px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #ffffff; white-space:nowrap; width:auto; min-width:90px; z-index:400; height:auto;}#nav ul, #nav a:hover ul ul,#nav a:hover a:hover ul ul,#nav a:hover a:hover a:hover ul ul,#nav a:hover a:hover a:hover a:hover ul ul{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}#nav li:hover li:hover > ul{left:100%; top:-4px; background: #50b5d0; padding:3px; border:1px solid #ffffff; white-space:nowrap; width:auto; z-index:400; height:auto; margin-right:5px;}#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}#nav li:hover li:hover > a.fly{background:#3f96a9 url(images/arrow_over.gif) 99% 6px no-repeat; color:#fff; border-color:#fff;} #nav li:hover li:hover > li a.fly{background:#50b5d0 url(images/arrow.gif) 99% 6px no-repeat; color:#000; border-color:#50b5d0;}


    Here is the HTML:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><link href="recover2.css" rel="stylesheet" type="text/css" /></head><body><div id="header"> <div class="hleft"> <a href="index.html"><img src="images/rsd_sm_noshadow.jpg" border="0"></a> </div> <div class="hright"> <span class="head1"><a href="index.html">Home</a>&nbsp; | &nbsp;&nbsp;Admin&nbsp;&nbsp;| &nbsp;&nbsp;Schools&nbsp; | &nbsp;&nbsp;Parents&nbsp;&nbsp;| &nbsp;&nbsp;Community&nbsp; | &nbsp;&nbsp;Teachers</span> </div> </div> <div id="headNav"> <ul id="nav"> <li class="top"><a href="#" class="top_link"><span>Home</span></a></li> <li class="top"><a href="#nogo2" id="about_us" class="top_link"><span class="down">About Us</span> <!--[if gte IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <!--<li><b>Cameras</b></li>--> <li><a href="#">About the RSD <!--[if gte IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <!-- <ul> <li><a href="#nogo4">Nikon</a></li> <li><a href="#nogo5">Minolta</a></li> <li><a href="#nogo6">Pentax</a></li> </ul> --> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#" class="fly">Paul Vallas <!--[if gte IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#">Biography</a></li> <li><a href="#">Monthly Message</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top"><a href="#nogo22" id="departments" class="top_link"><span class="down">Departments</span> <!--[if gte IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><a href="#" class="fly">Academics</a> <ul> <li><a href="#">Curriculum &amp Instruction</a></li> <li><a href="#" class="fly">Professional Development</a> <ul> <li><a href="#">Positive Behavior Support</a></li> <li><a href="#">Educational Technology</a></li> </ul> </li> <li><a href="#" class="fly">Intervention Services</a> <ul> <li><a href="#">Early Childhood</a></li> </ul> </li> </ul> </li> <li><a href="#nogo24" class="fly">Operations</a> <ul> <li><a href="#">Information Technology</a></li> <li><a href="#">Capital Improvements</a></li> <li><a href="#">Transportation</a></li> <li><a href="#">Food Service</a></li> </ul> </li> <li><a href="#nogo25" class="fly">School Management</a> <ul> <li><a href="#" alt="Registration Info">Student Services</a></li> <li><a href="#" alt="Volunteer Info, Family Resources, and Faith-Based">School & Commmunity Relations</a></li> <li><a href="#">Athletics, Health & PE</a></li> </ul> </li> <li><a href="#nogo26" class="fly">Accountability</a> <ul> <li><a href="#">Testing</a></li> </ul> </li> <li><a href="#nogo23" class="fly">Administration & Finance</a> <ul> <li><a href="#">Budget Documents</a></li> </ul> </li> <li><a href="#nogo23" class="fly">Safety & Security</a> <ul> <li><a href="#">Safety Programs & Initiatives</a></li> </ul> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top"><a href="#nogo27" id="programs" class="top_link"><span class="down">Programs</span> <!--[if gte IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><a href="#nogo28">Childhood Nutrition</a></li> <li><a href="#nogo29">L.E.A.P. <!--[if gte IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top"><a href="#nogo53" id="multimedia" class="top_link"><span class="down">Multimedia</span> <!--[if gte IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><a href="#nogo28">Photos</a></li> <li><a href="#nogo29">Videos <!--[if gte IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top"><a href="#nogo57" id="calendar" class="top_link"><span>Calendar</span></a></li> <li class="top"><a href="#nogo2" id="contacts" class="top_link"><span class="down">Contacts</span> <!--[if gte IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><a href="#nogo54">Administrative Staff</a></li> <li><a href="#nogo55">Non-Instructional Staff</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div></body></html>



    Thanks in advance for your help.

    - Dyce

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    One of the first menus I ever used was one of Stu's, and I ended up having a class on almost every li because my words were so varied.

    The only way I know to have a horizontal menu with varying widths for menu items is

    ul is 100&#37; width (or whatever) and the height
    li is display: inline;
    a is floated left (which makes it a block-- so I get to set heights and widths on them but they still stay looking inline) and width isn't set (which means it goes to auto) and set padding on each side to something like 5px or whatever, so the edges aren't hugging the words too close. I set the height of the a to the same as the height of the ul, and then the line-height also that same height (sets the words in the middle).

    The only thing is, since I started doing this on my menus, I haven't done a dropdown. I think you can still have the dropdown part since it's positioned absolutely, but you'll have to double-check your hovering capabilities on every browser you can get your hands on-- if one browser makes a gap, then the mouse can't follow the menu down.

    PS your code is like completely unreadable : )


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
  •