Hello. I've already lost a weekend to this problem, so I'm going to put it out there in the hope that someone has encountered and slain this dragon before, or failing that, can tell me why it's not a dragon, but only a rabbit.
Here goes: I've been retrofitting a site that used tables for page layout, but already used CSS for its top menu. I've got one page ( http://newhanoian.com/bars.php ) that still uses tables for layout, and another ( http://newhanoian.com/details.php ) in construction that uses CSS for both layout and for its top menu. Both pages are using the same CSS definitions for the menu system, but on the first, if you mouseover "Things to Do," you will see that "Opera House & Theatres" correctly wraps. On the second it doesn't, and stretches the bounding <li> and <ul> boxes. I think the sections in question are these: #nav ul { z-index:10; list-style: none; padding: 0px 0px; margin: 0; } #nav li { list-style: none; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:12px; padding:4px 0px; float: left; position: relative; width: 129px; /* determines width of each menu box */ text-align: center; background-color:#000000; /* main box color*/ border-right: 1px solid #fff; color:#ffffff; /* text color in main box*/ z-index:10; } /* the following governs the behavior of the 'home' link */ #nav a { font-weight: bold; color: #fff; text-decoration: none; align: center; } /* this governs the behavior of link text in the drop-downs */ #nav li li a { display: block; /* width: 100%; */ max-width:129px; font-weight: bold; padding: 0.2em 5px; align: center; } /* this governs the hover behavior of link text in drop-downs */ #nav li li a:hover { padding: 0.2em 3px; background-color:#ff0000; /* roll over color of drop down*/ border-left:4px solid #000; border-right:3px solid #000; text-align: center; } /* this is for the rightmost nav item -- doesn't seem to do anything now */ #nav li#last {/* last menu item doesn't have a right border - also eat up the remaining space to the right*/ border-right:5px; width: 202px; } #nav li ul { /* subnav */ display: none; position: absolute; align: center; top: 101%; left: 0; /* width: 100%; */ max-width: 129px; background: url(../images/thing.gif) bottom left no-repeat; padding: 0.0em 0.0 1em 0; border-right: solid 1px #000; } /* this is for the whole of the li in the subnav */ #nav li li { width: 100%; display: block; background-color: transparent; } /* this is for the link part */ #nav li ul li a { display: block; } /* END CSS */ Again the thing that baffles me is that it wraps appropriately on the tables page using the same CSS definitions. Any insights will be much appreciated. TIA, Tom ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
