CSS box calculations when a float is involved

I am trying to do menus with lists instead of tables ;-] ;-] 
The first level requires a horizontal listing so i applied 
float:left to these items --- display lines up items ok 
but when i applied a background and/or a border on the
containing ul, i found that the width of the ul ran to right margin!
Shouldn't the ul box be the width of the containing elements
unless otherwise defined ???

i have included a small demo example for your consideration! 

perhaps there is a better way to get horizontal alignment then
using float but i tried display:inline and that does not allow 
nested lists to position correctly !!   
--
john russell ve3ll@rac.ca [those are L's as in LLAMA]
http://home.cogeco.ca/~ve3ll
http://home.cogeco.ca/~trains
http://home.cogeco.ca/~cipher

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>MenuBar Test: VE3LL@RAC.CA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {background:#deadff;margin:20px}
ul {background:#ffdead;
    margin:0px; border:1px solid black; padding:0px}
li {list-style:none; float:left; font-weight:bold; width:120px;
    margin:0px; border:1px solid black; padding:10px}
em {font-weight:bold}
</style>
</head><body>
<h1>MenuBar Test: VE3LL@RAC.CA</h1>
<ul>
   <li>HTML Stuff</li>
   <li>JavaScript</li>
   <li>Java Brews</li>
</ul>
<p>There are some styling problems with these few simple rules
in <em>every</em> browser tested. The only unusual rule was
float to line up the list items horizontally!</p>
<p><em>Amaya</em> does not compute the size of the containing ul
correctly! Its border continues too far to the right!</p>
<p><em>FoxFire, mozilla, NetScape, Opera and Slimbrowser</em> do not
respect ul background and continue the floats outside of the li and
ul boxes! Placing a clear rule on the following element helps.</p>
</body></html>

Received on Sunday, 16 January 2005 17:17:26 UTC