14 replies [Last post]
bvinay_reddy
Offline
Regular
Last seen: 17 years 21 weeks ago
Timezone: GMT+5.5
Joined: 2005-07-05
Posts: 24
Points: 0

Hi,
I created a horizontal menu in CSS. It works fine on windows (firefox and IE), but doesn't work properly on firefox for linux. Here's a screenshot:

The webpage is at cs.iitm.ernet.in/~vinayb/test/site/test.html and the css file is at cs.iitm.ernet.in/~vinayb/test/test/style.css

The links seem to be covering the "ul" area. Somehow the whole concept of putting a padding for "ul" and putting a background image seems broken. What's the right way to do it? I want a horizontal menu in the lines of www.stopdesign.com, but with a small image repeated to create the background.

The code is as follows:

#navigation {
	font-family: Helvetica, Sans-serif;
}

#navigation ul li a{
	padding: .3em 1em;
	font-size: small;
}

#navigation ul {
	list-style: none;
	margin: 0em;
	/*text-align: center;
	white-space: nowrap;*/
	padding: 0 0 1.6em 2.5em;
	border-top: 1px solid #2f2e2e;
	border-bottom: 1px solid #2f2e2e;
	background-image: url("nav.gif");
}

#navigation li {
	float: left;
	display: inline;
}

#navigation a {
	color: #000;
	border-right: 1px solid #2f2e2e;
	text-decoration: none;
}


#navigation a:link, #navigation a:visited {
	background-image: url("nav.gif");
}

#firstNavElement a {
	border-left: 1px solid #2f2e2e;
}

#navigation a:hover {
	background-image: url("nav_hover.gif");
}

h1, h2 {
	font-family: Georgia,Serif;
	color: #3366CC;
	font-weight: normal
}

body {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;

	font-family: Verdana, Sans-serif;
	line-height: 1.5em;
	background-color: #2f2e2e;
}

#content {
	/*padding: 2em 2em 0 2em;*/
	background-color: #fff;
	-moz-border-radius: 25px;
}

#footer {
	margin-left: auto;
	margin-right: auto;
	color: #707070;
	text-align: center;
	font-size: 70%;
}

#footer p {
	padding: 0 2em 0 2em;
}

#header {
	padding: 1em 2em 0 2em;
}

#mainbody {
	padding: 0em 2em 0 2em;
}

Here's the html code:

<!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> Vinay's Home Page </title>
	<meta http-equiv="content-type"
	content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="./style.css" />
</head>

<body>
	<div id = "content">
		<div id = "header">
			<h1>Vinay Kumar Reddy</h1>
		</div>

		<div id = "navigation">
			<ul>
				<li id = firstNavElement><a href = "#">Home</a></li>
				<li><a href = "#">Contact</a></li>
				<li><a href = "#">Miscellaneous</a></li>
			</ul>
		</div>

		<div id = mainbody>
			<p> You have reached the homepage of Vinay Kumar Reddy.</p>
			<h2>Header</h2>
			<p> body</p>
			<br>
		</div>
	</div>
	<div id = "footer"> <p> Copyright &copy 2005 Vinay Reddy. All rights reserved.</p> </div>

</body>
</html>

Any help will be greatly appreciated.

Regards,
Vinay

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

horizontal menu problem in firefox on linux

I am surprised it works in any Firefox. All the children of the #navigation ul element are floated and therefore out of flow. The ul element won't expand to surround the out of flow (floated) elements (except in IE, which does its own thing).

My advice would be to either:

  • give the UL a height - in em units. This is ok if you know the menu item text will never run to two lines.
  • put the background on #navigation and self clear it.

You could self clear the ul element. I am uncertain whether its valid for a ul element to have any content that isn't wrapped in <li> tags. If you did that, you could scrap your div#navigation (and assign the #navigation id to the ul element) for tighter markup.

[/]
bvinay_reddy
Offline
Regular
Last seen: 17 years 21 weeks ago
Timezone: GMT+5.5
Joined: 2005-07-05
Posts: 24
Points: 0

didn't work

Hi,
I tried the second option. Adding clear to the UL. I added the #navigation id to the ul and deleted the extra div. Other than that the html remains the same. The modified part of the old css code is as follows:

#navigation {
        font-family: Helvetica, Sans-serif;
        background-image: url("nav.gif");
        border-top: 1px solid #2f2e2e;
        border-bottom: 1px solid #2f2e2e;
        margin: 0;
}

#navigation a {
        padding: .3em 1em;
        font-size: small;
}

#navigation:after {
    content: ".";
    display: block;
    height: 0em;
    clear: both;
    visibility: hidden;
}

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

#navigation li {
        display: inline;
        float:left;
}

Things are still not fine. The #navigation is not fully covering the links (The black vertical border lines come down below the edge of the image). On hovering, both the top and the bottom borders become invisible.

Regards,
Vinay

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 29 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

horizontal menu problem in firefox on linux

Your image is 34px high while your ul has no height (it is empty as all the lines are floated, you have a padding of 1.6em).
Thus the display will depend on the font size, user or zoom (try ctrl +).
On my system with the defaults fonts, only the border disappears around the images with Linux. When I zoom, your navigation bar is not on one line any more...
Try not to float your lines :

#navigation ul {
	list-style: none;
	margin: 0em;
	/*text-align: center;
	white-space: nowrap;*/
	padding: 0 0 0 2.5em; /*set padding-bottom to 0*/
	border-top: 1px solid #2f2e2e;
	border-bottom: 1px solid #2f2e2e;
	background-image: url("nav.gif");
}

#navigation li {
	/*float: left;*/
	display: inline;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 38 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

horizontal menu problem in firefox on linux

from your first posted code, do not give ul a height, add this {overflow: hidden;}. That will cause the ul to enclose the floated lis.

In li, floats may only be display: block|none No other value allowed. {display: inline;} is a specific fix for an IE bug that does not apply here.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

bvinay_reddy
Offline
Regular
Last seen: 17 years 21 weeks ago
Timezone: GMT+5.5
Joined: 2005-07-05
Posts: 24
Points: 0

thanks gary

Thanks gary,
overflow:hidden did the trick. But there is still the rounding error problem (due to the use of em), and the top border is hidden at some font sizes.
In the screenshot below, it can be seen that the link is coming out of the ul (the dotted line).

How much padding should I give to the "LI" so that it fits perfectly inside the "UL" (and is centered vertically)? Should I stop using em units?

Regards,
Vinay

PS: DanA, your solution didn't work Sad

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 29 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

horizontal menu problem in firefox on linux

With your first posted code, it worked on my system (Linux and Windows) and is still working on your test page, but it all depends on the user installed fonts.
On my system I have a rounding problem if

#navigation ul li a{ 
	padding: .3em 1em; 
	font-size: .8em; 
} 

the font size is above .8em on Windows when zooming.
The rounding problem with em is well known bug but nobody is in charge of fixing it.
Gary's solution should work if you keep the floats and remove the display:inline (which is necessary if you do not float).
Within your menu only, I'd try not to use ems or I would have one of the li not floated to set a height.

bvinay_reddy
Offline
Regular
Last seen: 17 years 21 weeks ago
Timezone: GMT+5.5
Joined: 2005-07-05
Posts: 24
Points: 0

horizontal menu problem in firefox on linux

Hi,
I have done away with the ems for the menu. The border stay alright. There are two minor problems:
1) The link doesn't fill the entire region (top to bottom) of the ul. Here's a screenshot.
. There seems to be a bit of padding on top, although the padding and magin for li and ul is 0. The margin for "a" is also 0.

2) When I increase the text size, the text for the links is not centered (vertically). Moreover, when I reduce it back again to the original size, the text is still not centered!! I have to refresh the page again.

I am having a bit too many problems using CSS Sad

Regards,
Vinay

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 29 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

horizontal menu problem in firefox on linux

Could you update your test page?
Your image will be 34px high (with padding ?) and only Opera will zoom correctly.
You may have a look at the different menus using images and staying fine whatever the recent browser and zooming here to start:
http://www.stunicholls.myby.co.uk/menus/doors.html

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 38 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

horizontal menu problem in firefox on linux

Not tested.

Make line-height equal the bg image height. It should work on ul.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

bvinay_reddy
Offline
Regular
Last seen: 17 years 21 weeks ago
Timezone: GMT+5.5
Joined: 2005-07-05
Posts: 24
Points: 0

horizontal menu problem in firefox on linux

I made the line-height of UL equal to the background image height (34px). Things are still not fine. The updated page is here:
cs.iitm.ernet.in/~vinayb/edit/test.html

I don't know why there is a gap between the topmost part of the UL and LI. There is *NO* padding anywhere in my CSS except for "A" (the links in the menu).

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 29 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

horizontal menu problem in firefox on linux

1) you must chose between display: block ; or display:none;
- in this case you can remove the line
2) "a" has a padding top and bottom of 5 px thus the line-height must be in this case 34-5-5px then the borders -1-1 => 22px

bvinay_reddy
Offline
Regular
Last seen: 17 years 21 weeks ago
Timezone: GMT+5.5
Joined: 2005-07-05
Posts: 24
Points: 0

horizontal menu problem in firefox on linux

Hi,
After some arbitrary trial and error, I finally managed to fix it to a decent shape. I just have to cut the images to the right size (it doesn't matter though).
But the whole thing is really inelegant. If I have to design another site for myself, I'll think twice before going for such a design (a menu using only two small images). Can the gurus please offer some tips?

Thanks for all the help. The new page is at http://www.cs.iitm.ernet.in/~vinayb/edit/test.html

Regards,
Vinay

bvinay_reddy
Offline
Regular
Last seen: 17 years 21 weeks ago
Timezone: GMT+5.5
Joined: 2005-07-05
Posts: 24
Points: 0

horizontal menu problem in firefox on linux

Hi,
I changed the css file. Here's the new css code:

#navigation {
	font-family: Helvetica, Sans-serif;
	float: left;
	background-repeat: no-repeat;
	width: 100%;
	border: solid 0;/*#ddd;*/
	border-width: 1px 0;

}

#navigation a {
	padding: 2px 12px;
	vertical-align: middle;
	text-align: justify;
	font-size: 80%;
}

#navigation ul {
	margin: 0;
	padding: 0 30px;
	list-style: none;
}

#navigation li {
	float: left;
	margin: 0;
	padding: 0;
	background-image: none;
	line-height: normal;
	text-indent: 0;
}

#navigation a {
	display:block;
	padding: 5px 10px 6px 10px;
	border:solid #ddd;
	border-width:0 1px 0 0;
	color:#68a;
	text-decoration:none;
	white-space:nowrap;
	background-color: #eee;
}

#navigation:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

/* Hides from IE-mac \*/
* html #navigation{height: 1%;}
/* End hide from IE-mac */

#navigation a:link, #navigation a:visited {
	/*background-image: url("nav.gif");
	background-repeat: repeat-x;*/
}

#firstNavElement a {
	border-left: 1px solid #ddd;
}

#navigation a:hover {
/*	background-image: url("nav_hover.gif");
	background-repeat: repeat-x;*/
	color:#000;
}

h1, h2 {
	font-family: Georgia,Serif;
	color: #3366CC;
	font-weight: normal;
}

body {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	background-color: #2f2e2e;
}

#content {
	background-color: #ddd;
	-moz-border-radius: 25px;
}

#footer {
	margin-left: auto;
	margin-right: auto;
	color: #707070;
	text-align: center;
	font-size: 70%;
}

#footer p {
	padding: 0 2em 0 2em;
}

#header {
	padding: 0.1em 2em 0 2em;
}

#mainbody {
	font-family: Verdana, Sans-serif;
	padding: 0em 2em 0 2em;
}

There's only one problem. Due to the {float:left} of the #navigation, the header text is hidden (it is rendered if I try to select the text) in IE/Win. Other than that, this works fine.

Cheers,
Vinay

bvinay_reddy
Offline
Regular
Last seen: 17 years 21 weeks ago
Timezone: GMT+5.5
Joined: 2005-07-05
Posts: 24
Points: 0

horizontal menu problem in firefox on linux

Since it's a different issue altogether, I've started a new thread.