2

How to get width of <li> stretched to available space in parent <ul> in IE7?

In IE 8 and FF

Drop-down coming like this which is OK

alt text http://shup.com/Shup/376449/11064114012-My-Desktop.png

but in IE 7 it's coming like this

Edit: 5 july

I added live example here see this in IE7

alt text http://shup.com/Shup/376450/11064114133-My-Desktop.png

How to get same result like IE8 and FF in IE 7.

I don't want to give fixed width to <ul> and <li>

This is CSS

#topnavcontainer {
    float: left;
    overflow: visible;
    width: 80%;
    margin-left: 17px }

ul#nav {
    position: relative;
    z-index: 597;
    float: left;
    margin-top: 6px; }

    ul#nav li {
        float: left;
        line-height: 1.3em;
        vertical-align: middle;
        zoom: 1; }

        ul#nav li a:active { color: #fff }

        ul#nav li.hover,
ul#nav li:hover {
            position: relative;
            z-index: 599;
            cursor: default; }

    ul#nav ul {
        visibility: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 598;
        width: 100%;
        width: auto;
        margin-top: 0px;
        white-space: nowrap;
        background -moz-opacity: .80;
        filter: alpha(opacity=80);
        opacity: .80;
        background: #fff }

    ul#nav li.last ul { left: -47px }

    ul#nav li li {
        float: none;
        font-weight: normal;
        padding: 7px 10px;
        border: solid #99b2d8;
        border-width: 0 1px 0 1px;
        background-color: #f6f6f6;
        color: #1f5fa9;
        background: #fff;
        display: block;
        width: auto;
        padding-bottom: 0; }

    ul#nav ul ul {
        top: 1px;
        left: 99%; }

    ul#nav li:hover > ul { visibility: visible;background: transparent }

ul#nav { font-weight: bold; }

    ul#nav li {
        padding: 5px 10px;
        border-style: solid;
        border-width: 0px 1px 0px 0;
        border-color: #fff;
        background-color: #f6f6f6;
        color: #fff;
        background: transparent url(images/css-bg/navaigation-off-hover-bg.jpg) repeat-x left top }

    ul#nav > li.first { background: transparent url(images/css-bg/li-first-bg.jpg) no-repeat left top }

    ul#nav li.first.current { background:url(images/css-bg/navaigation-hover-first-bg.jpg) left top;color: #ed8813 }

    ul#nav > li.first:hover { background: transparent url(images/css-bg/li-first-bg.jpg) no-repeat left -27px }

    ul#nav > li.last { background: transparent url(imagescss-bg/li-last-bg.jpg) no-repeat right top }

    ul#nav li li.last {
        border: 0 solid #99b2d8;
        border-width: 0 1px 1px 1px;
        -webkit-border-bottom-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -moz-border-radius-bottomright: 10px;
        -moz-border-radius-bottomleft: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px; }

    ul#nav li.last.current { background:url(images/css-bg/navaigation-hover-last-bg.jpg) right top;color: #ed8813 }

    ul#nav > li.last:hover { background: transparent url(imagescss-bg/li-last-bg.jpg) no-repeat right -27px }

    ul#nav li a { color: #fff; }

    ul#nav ul li.last { padding-bottom: 6px; }

    ul#nav ul li a:hover { text-decoration: underline }

    ul#nav li.hover,
    ul#nav li:hover { color: #fff;background: url(imagescss-bg/navaigation-off-hover-bg.jpg) repeat-x left -27px }

    ul#nav ul li.hover,
    ul#nav ul li:hover { background: #fff }

    ul#nav li:hover a { color: #fff }

    ul#nav li:hover li a { color: #1f5fa9 }

    ul#nav ul li.hover a,
    ul#nav ul li:hover a { color: #1f5fa9 }

    ul#nav ul li.hover a, ul#nav ul li:hover a { color: #1f5fa9 }

    ul#nav > li.current { background:url(images/css-bg/navaigation-active-bg.jpg) repeat-x left top;color: #ed8813 }

    ul#nav li.current a { color: #ed8813 }

    ul#nav a:link,
    ul#nav a:visited {
        color: #fff;
        text-decoration: none; }

    ul#nav a:hover { color: #000; }

    ul#nav a:active { color: #ffa500; }
3
  • Can you post a Jsbin example? Commented Jul 5, 2010 at 2:59
  • @Pablo Fernandez - Jsbin example added Commented Jul 5, 2010 at 3:53
  • 1
    Why was this downvoted? There is absolutely nothing wrong with this question.
    – defines
    Commented Jul 8, 2010 at 11:48

2 Answers 2

5
+50

Here is a solution if you want to use Jquery

(function () {
    $("ul#nav > li").each(function () {
    var width = 0;
    $("ul > li", $(this)).each(function () {
      var w = $(this).width();
      if (width < w) {
        width = w;
      }
    });
    if (width != 0) {
      $("ul > li", $(this)).width(width);
    }
  });
})();
5
  • You just saved me the effort of writing the same thing. Its how I'd do it if a JS solution is allowed.
    – Chris
    Commented Jul 6, 2010 at 13:57
  • So there is no CSS only way to get this? Commented Jul 7, 2010 at 2:13
  • I tried to do css first, but i couldnt find a solution so I did jquery instead.
    – Codler
    Commented Jul 7, 2010 at 7:36
  • @Dustin Fineout, @Codler - Is this a IE7 bug? Commented Jul 8, 2010 at 16:10
  • Yes, it is a layout bug in IE7.
    – defines
    Commented Jul 9, 2010 at 16:28
0

Try applying the border to ul instead of li. This way you are creating one border for the whole list instead of a border per list. Let me know if this doesn't work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.