block containing unordered list has problem in IE

[Paul O'B]

Hi,

To clear the gap in IE you need to use overflow:hidden here.

.sublink_top {
    background-image: url(http://r-interactive.net/clients/avenues/images/inside_submenu_top.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    height: 11px;
    width: 242px;
     overflow:hidden
}

IE will always stretch the height of an element to accommodate the content which in this case is the current fontsize/lineheight which is greater than 11px. Just add overflow:hidden to any elements that are smaller than the current font-size to stop IE stretching them.

[Paul O'B]

For your second question then something like this should work.

/* the sub menu start here*/
ul#submenu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    padding: 0;
    vertical-align: middle;
    font-weight: bold;
}
ul#submenu li {
    list-style: none;
    width: 242px;
    float:left;
    clear:left;
    height: 35px;
    line-height:35px;
}
ul#submenu a {
    color: #FFFFFF;
    background-image: url(http://r-interactive.net/clients/avenues/images/inside_submenu_img.jpg);
    background-repeat: no-repeat;
    background-position: left;
    width:242px;
  float:left;
    height: 35px;
}
ul#submenu a:hover {
    background-image: url(http://r-interactive.net/clients/avenues/images/inside_submenu_img_mo.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    color: #9F370C;
}
ul#submenu li.last span {
    border-bottom:none
}
ul#submenu a span{
    width:199px;
    margin:0 0 0 15px;
    text-indent:10px;
    float:left;
    height:34px;
    overflow:hidden;
    border-bottom:1px dotted #fff;
}

/* the sub menu ends here*/

<div id="sublink">
                <div class="sublink_top"></div>
                <div class="sublink_main">
                    <ul id="submenu">
                        <li><a href="#1"><span>Recent Jobs</span></a></li>
                        <li><a href="#2"><span>Training</span></a></li>
                        <li class="last"><a href="#3"><span>Your Page</span></a></li>
                    </ul>
                </div>
                <div class="sublink_bottom"></div>
            </div>

[Paul O'B]

Hi Nisha,

You can add multiple classes as long as you separate them by a space.

e.g.

 <li class="last active">

You can read more about multi class elements here.

(Note that you can't do the same thing with IDs as ID's must be unique to the element.)

[Paul O'B]

Hi,

I have replied in the other thread with something that may help