Menu behaves strangely with Firefox

guvenck · 01-16-2008, 05:00 PM

Hello,

I made a tableless CSS based design with 3-columns. Below is the code. The problem is, when mouse hovered over Menu Item 6, the column divs drop down or slide (whatever).

This only happens with Firefox and is fine with IE6.

Can someone help me out of this?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Lorem Ipsum</title>
<style type="text/css">
body {
	margin: 20px 0;
	padding: 0;
	background: #000000;
	font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
}

h1, h2, h3 {
	color: #B13413;
}

h2 {
	font-size: 1.6em;
}

p, ul, ol, blockquote {
	margin-top: 0;
}

a:link, a:visited {
	border-bottom: 1px dotted #CCCCCC;
	text-decoration: none;
	color: #3284B5;
}

a:hover {
	border: none;
}

img {
	border: none;
}

/* Header */

#header {
	width: 760px;
	height: 200px;
	margin: 0 auto;
	background-color: teal;
}

#header * {
	margin: 0;
	border: none;
	text-decoration: none;
	text-transform: lowercase;
	font-weight: normal;
	color: #FFFFFF;
}

#header h1 {
	float: left;
	padding: 140px 0 0 20px;
	font-size: 3em;
}

#header h2 {
	float: left;
	padding: 165px 0 0 3px;
	font-size: 1em;
}

/* Menu */

#menu {
	width: 760px;
	height: 41px;
	margin: 0 auto;
	background-color: navy;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	height: 32px;
	padding: 9px 20px 0 20px;
	text-decoration: none;
	color: #FFFFFF;
}

#menu a:hover, #menu .active a {
	color: red;
}


/* Content */

#content {
	width: 760px;
	margin: 0 auto;
	background-color: #fff;
}

#content h2 {
	margin-top: 0;
}

#left {
	float: left;
	width: 160px;
	padding: 10px 15px 0 15px;
	background-color: #ddd;
}

#center {
	float: left;
	width: 350px;
	padding: 10px 15px 0 15px;
}

#right {
	float: left;
	width: 160px;
	padding: 10px 15px 0 15px;
	background-color: #eee;
}

/* Footer */

#footer {
	width: 760px;
	margin: 0 auto;
	padding: 10px 0;
	background: url(images/img6.gif) repeat-x;
	font-size: smaller;
	text-align: center;
}

#footer * {
	color: #666666;
}
</style>

</head>
<body>

<div id="header">
<a href="index.php"><h1>Lorem Ipsum</h1><h2>Dolor Sit Amet</h2></a>
</div>

<div id="menu">
	<ul>
	<li><a href="#">Menu Item 1</a></li>
	<li><a href="#">Menu Item 2</a></li>
	<li><a href="#">Menu Item 3</a></li>
	<li><a href="#">Menu Item 4</a></li>
	<li><a href="#">Menu Item 5</a></li>
	<li><a href="#">Menu Item 6</a></li>
	</ul>
</div>

<div id="content">

	<div id="left">
	This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. 
	</div>

	<div id="center">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
	</div>

	<div id="right">
	This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. 
	</div>

	<div style="clear: both;">&nbsp;</div>

</div>

<div id="footer">
<p>Feel free to insert your footer message here.</p>
</div>

</body>
</html>

Excavator · 01-16-2008, 05:50 PM

Hello guvenck,
In your #menu you give each a 9px top padding and a dotted bottom border. That makes the button too big to fit in the 41px height of #menu. Check your box model.

Here's one way to fix it:

Code:

/* Menu */

* {
	margin: 0;
	padding: 0;
}
#menu {
	width: 760px;
	margin: 0 auto;
	overflow: auto;
	text-align:center;
	background-color: navy;
}

#menu ul {
	list-style: none;
	padding: 0 0 0 20px;
}

#menu li {
	display: inline;
	text-decoration: none;
}

#menu a {
	display: block;
	float: left;
	height: 32px;
	padding: 9px 20px 0 20px;
	color: #FFFFFF;
}

#menu a:hover, #menu .active a {
	color: red;
}

I would also do something with that dotted border... put it on the li instead of the a: maybe...

Code Tags will wrap your code in a little scroll box like the one I've used above. In the reply/new message window, click on the # for code tags.

guvenck · 01-16-2008, 06:53 PM

Excavator, many thanks! I did not recognize the dotted border... I guess I don't need it that badly in the menu itself, so I just added a border:none; to #menu a, and it seems to work fine for now.

Code:

#menu a {
	display: block;
	float: left;
	height: 32px;
	padding: 9px 20px 0 20px;
	text-decoration: none;
	color: #FFFFFF;
	border: none;
}

What do you think about the pros and cons of setting all the margins and paddings to 0 at CSS start, as in your suggestion?

about [!--CODE--] tag: I did not recognize that there is a [!--ICODE--], I pressed the wrong button. Fixed it now.

Excavator · 01-16-2008, 07:00 PM

Quote:

What do you think about the pros and cons of setting all the margins and paddings to 0 at CSS start, as in your suggestion?

I much prefer to set all to zero then specify my own when needed. That's a lot more predictable than depending on defaults which may differ from browser to browser.

guvenck · 01-20-2008, 06:35 AM

I am willing to convert this 3-column fixed-fixed-fixed layout into a fixed-fluid-fixed layout. It is working in general, but the #center div slides down when I set it's width to 100% or auto. Can you please advice?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Lorem Ipsum</title>
<style type="text/css">
body {
	margin: 20px 0;
	padding: 0;
	background: #000000;
	font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
}

h1, h2, h3 {
	color: #B13413;
}

h2 {
	font-size: 1.6em;
}

p, ul, ol, blockquote {
	margin-top: 0;
}

a:link, a:visited {
	border-bottom: 1px dotted #CCCCCC;
	text-decoration: none;
	color: #3284B5;
}

a:hover {
	border: none;
}

img {
	border: none;
}

/* Header */

#header {
	width: 95%;
	height: 200px;
	margin: 0 auto;
	background-color: teal;
}

#header * {
	margin: 0;
	border: none;
	text-decoration: none;
	text-transform: lowercase;
	font-weight: normal;
	color: #FFFFFF;
}

#header h1 {
	float: left;
	padding: 140px 0 0 20px;
	font-size: 3em;
}

#header h2 {
	float: left;
	padding: 165px 0 0 3px;
	font-size: 1em;
}

/* Menu */

#menu {
	width: 95%;
	height: 41px;
	margin: 0 auto;
	background-color: navy;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	height: 32px;
	padding: 9px 20px 0 20px;
	text-decoration: none;
	color: #FFFFFF;
	border: none;
}

#menu a:hover, #menu .active a {
	color: red;
}


/* Content */

#content {
	width: 95%;
	margin: 0 auto;
	background-color: #fff;
}

#content h2 {
	margin-top: 0;
}

#left {
	float: left;
	width: 160px;
	padding: 10px 15px 0 15px;
	background-color: #ddd;
}

#center {
	float: left;
	width: 100%; /* here*/
	padding: 10px 15px 0 15px;
}

#right {
	float: left;
	width: 160px;
	padding: 10px 15px 0 15px;
	background-color: #eee;
}

/* Footer */

#footer {
	width: 760px;
	margin: 0 auto;
	padding: 10px 0;
	background: url(images/img6.gif) repeat-x;
	font-size: smaller;
	text-align: center;
}

#footer * {
	color: #666666;
}
</style>

</head>
<body>

<div id="header">
<a href="index.php"><h1>Lorem Ipsum</h1><h2>Dolor Sit Amet</h2></a>
</div>

<div id="menu">
	<ul>
	<li><a href="#">Menu Item 1</a></li>
	<li><a href="#">Menu Item 2</a></li>
	<li><a href="#">Menu Item 3</a></li>
	<li><a href="#">Menu Item 4</a></li>
	<li><a href="#">Menu Item 5</a></li>
	<li><a href="#">Menu Item 6</a></li>
	</ul>
</div>

<div id="content">

	<div id="left">
	This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. This is the content for left column. 
	</div>

	<div id="center">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
	</div>

	<div id="right">
	This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. This is the content for right column. 
	</div>

	<div style="clear: both;">&nbsp;</div>

</div>

<div id="footer">
<p>Feel free to insert your footer message here.</p>
</div>

</body>
</html>

abduraooft · 01-20-2008, 07:00 AM

Have a look at http://bonrouge.com/3c-hf-fluid-lc.php

effpeetee · 01-20-2008, 09:26 AM

This may be of some help

.

http://pmob.co.uk/temp/3colfixedtest_explained.htm

Frank