PDA

View Full Version : Need to display my UL without BR inside the code



moss2076
Aug 26th, 2007, 01:16 PM
Hello!

I have a unordered list styled with css to create a horizontal block style menu. I am using it as an SSI file linked to my template -

Html :-

<ul id="lowermenu">
<li><a href="#">Home1</a></li>
<li><a href="#">Home2</a></li>
<li><a href="#">Home3</a></li>
<li><a href="#">Home4</a></li>
<br style="clear: both;"/>
</ul>

Css :-

ul#lowermenu {
margin: 0px 0px 0px 0px;
padding: 6px 0px 5px 5px;
list-style-type: none;
background-color: #B38E0A;
text-decoration:none;
font-size: 11px;
width: 465px;
}

ul#lowermenu li{
float:left;
margin:0px 1px 0px 0px;
}

ul#lowermenu li a{
border: 1px solid #778;
color: #666666;
padding: 1px 32px;
margin-right: 1px;
text-decoration: none;
background-color: #CCCCCC;
font-weight: bold;
}

ul#lowermenu li a:hover{
background-color: #FFFFFF;
color: blue;
}

I had to use the <br.. inside the ul to enable the background to display properly, but I understand that I shouldnt have <br.. inside a ul as it wont validate properly.

Im looking for a way to enable the background to display properly without the <br.. inside the ul.

Any suggestions?

NancyJ
Aug 26th, 2007, 01:29 PM
give your ul a height... and possibly a width. The reason it doesnt display the background is because it has no content(floated elements don't count) and therefore no height.

moss2076
Aug 26th, 2007, 01:42 PM
Thanks! I will set it a fixed height, it has a set width already.

Thanks again :)