Fri, 2004-02-06 19:53
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..)
Fri, 2004-02-06 22:38
#1
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
Sat, 2004-02-07 02:45
#2
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.
Fri, 2004-02-13 09:12
#3
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.