3 replies [Last post]
natron46
Offline
newbie
Last seen: 16 years 38 weeks ago
Joined: 2004-02-06
Posts: 3
Points: 0

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..)

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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

natron46
Offline
newbie
Last seen: 16 years 38 weeks ago
Joined: 2004-02-06
Posts: 3
Points: 0

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.

natron46
Offline
newbie
Last seen: 16 years 38 weeks ago
Joined: 2004-02-06
Posts: 3
Points: 0

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.