Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jan 2006
    Posts
    377
    Thanks
    8
    Thanked 1 Time in 1 Post

    Menu behaves strangely with Firefox

    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>
    Last edited by guvenck; 01-16-2008 at 07:22 PM. Reason: Selected correct CODE button.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Jan 2006
    Posts
    377
    Thanks
    8
    Thanked 1 Time in 1 Post
    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.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Jan 2006
    Posts
    377
    Thanks
    8
    Thanked 1 Time in 1 Post
    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>

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This may be of some help.

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

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •