I have a fixed width div with an unordered list for a menu, and on every browser but Opera, the list wraps to the div. Opera just lets the list continue across the page outside of the div.. Ack!
http://66.98.194.69/~joebiel/ is the temporary developing URL..
CSS is at http://66.98.194.69/~joebiel/inc/all.css
I've googled everything I can think of, searched forums, messed with the CSS for hours and hours.. Of course, I'm sure it's something very simple, but I can't seem to track this one down.
Thanks!
Nate.
(I can post code or links to screenshots if need be..)
Opera not wrapping floated list in div
Hi
A bit too complicated for me to look at as it is, but I have seen it before, if you make a simple page with all irrelevant style and code stripped out (no images etc) and post that, with the style inline rather than a file, I will fix it.
As to Opera, I have 7.23 and the menu bits do NOT overflow. They DO sit all on top of each other! Navigator and IE look fine.
Trevor
Opera not wrapping floated list in div
Trevor,
Thanks for the response. I'm glad to hear the new Opera works w/ this design. I tried to simplify my example code as much as possible & keep things that might be causing the problem -- I'm still in the process of trial & error w/ my CSS so it's a little ugly right now (for some reason, the text in the buttons stopped centering on MacIE now.. ugh!)
Anyway! I put this up at http://66.98.194.69/~joebiel/test.html
And here it is:
<!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>argh</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body { background:#999; } #navbar { background:#ccc; position:absolute; overflow:auto; top:0; left:0; width:196px; height:100%; margin-right:4px; padding:4px; text-align:center; font-size:.9em; } html>body div#navbar { position:fixed; } /* for compliant, happy browsers */ #wrapper { margin:0 0 0 202px; padding:0; } #main { margin:4px; background:#666; } /* UL MENU NAV */ #navbar ul { border:0; margin:0; padding:0; list-style-type:none; text-align:center; } #navbar ul li { display:block; float:left; text-align:center; padding:1px 0 0 0; margin:-1px 0 0 -1px; } #navbar ul li a { float:left; width:94px; height:22px; border:1px dotted #000; padding:0; margin-top:-1px; color:#fff; display:block; text-align:center; text-decoration:none; letter-spacing: 1px; font-weight:normal; line-height:24px; font-size:.8em; } #navbar ul li a:hover { color:#fff; background:#000; } #navbar li.activ { background:#069; } #navbar li.activ a:hover { background:#069; } </style> </head> <body> <div id="navbar"> <ul> <li class="activ"><a href="#" title="foo">Homepage</a></li> <li ><a href="#" title="foo">Interviews</a></li> <li ><a href="#" title="foo">FAQ</a></li> <li ><a href="#" title="foo">Contact</a></li> <li ><a href="#" title="foo">Manifesto</a></li> <li ><a href="#" title="foo">Msgboard</a></li> <li ><a href="#" title="foo">Links</a></li> <li ><a href="#" title="foo">Orderform</a></li> </ul> </div> <div id="wrapper"> <div id="main"> yada yada </div> </div> </body> </html>
Thanks again,
Nate.
Opera not wrapping floated list in div
so, nobody's heard of this problem in opera? i ended up splitting the list into two div's w/ width's of 49% and removing the float:left property, which works, but makes no semantic sense, of course.
nate.