Hi,
I have a div named footerWrap, which contains 3 unordered lists. I floated left, all the unordered lists.
My intention was to make the footerWrap grow in height according to the height of the unordered lists. However... in all browsers (exept IE6) the unordered lists pass over the div... like they had z-index atribute!
I tried to place a div at the end, with the clear:all, and i also tried to make float:none on the div#footerWrap
This is my Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This is my Full CSS code:
div#footerWrap
{
height:180px;
background-color:#5c5c5c;
background-image:url('../../img/bgFooter.png');
background-repeat:repeat-x;
background-position:top;
padding-top:20px;
padding-left:15px;
margin-top:20px;
}
/* menus footer */
div#footerWrap ul#mainMenu,
div#footerWrap ul#myMenu,
div#footerWrap ul#othersMenu
{width:180px; float:left;}
div#footerWrap ul#mainMenu li a,
div#footerWrap ul#myMenu li a,
div#footerWrap ul#othersMenu li a
{
color:#dadada;
text-decoration:none;
padding:5px;
}
div#footerWrap ul#mainMenu li a,
div#footerWrap ul#othersMenu li a
{padding:5px 10px;}
/* hover */
div#footerWrap ul#mainMenu li a:hover,
div#footerWrap ul#othersMenu li a:hover
{color:#fff; background-color:#666;}
/* menu principal */
div#footerWrap ul#mainMenu {margin-top:-10px;}
div#footerWrap ul#mainMenu li{line-height:24px;}
/* /menu principal */
/* o meu menu*/
div#footerWrap ul#myMenu {margin-left:15px;}
div#footerWrap ul#myMenu li {color:#fff; line-height:22px;}
div#footerWrap ul#myMenu li.myMenuItem a
{
background-image:url('../../img/smallArrow.gif');
background-repeat:no-repeat;
background-position:left 7px;
padding-left:15px;
padding-right:20px;
}
div#footerWrap ul#myMenu li.myMenuItem a:hover
{color:#fff; background-color:#666;}
/* /o meu menu */
/* outros menu */
div#footerWrap ul#othersMenu {margin-left:300px; width:340px;}
div#footerWrap ul#othersMenu li
{
color:#fff;
line-height:22px;
}
div#footerWrap ul#othersMenu li a{margin-left:5px;}
div#footerWrap ul#othersMenu li a span {margin-left:-5px;}
/* /outros menu */
And this is my XHTML code:
<div id="footerWrap">
<!-- menu principal -->
<ul id="mainMenu">
<li><a href="#">item</a></li>
</ul>
<!-- o meu menu -->
<ul id="myMenu">
<li>meu menu</li>
<li class="myMenuItem slideMenuItem"><a href="#">item</a></li>
</ul>
<!-- outros menu -->
<ul id="othersMenu">
<li><span>outros</span></li>
<li><a href="#">item</a></li>
</ul>
</div>