firefox loading anchor links above the div it's inside 1

[ericaalicen]

I've been working on this for hours. The layout is fine in IE but the navigation loads about 10px higher in Firefox. Any suggestions?

http://demo.netsense.net/broadreach/

 

[TheCandyman]

I'm wondeing if you have some html error, since you mentioned firefox, do a html validator

https://addons.mozilla.org/firefox/249/

or use the W3.org website.

Just want to try the basics first.

 

[Vragabond]

Let's see what we're doing. We have a div which is 32px high. In the top line of that div you have some text. This text needs to be pushed up a bit, because it has some bottom padding. So it sticks out.

When you made that div, giving it a height of 32px you anticipated that text will be in the middle of it and it will nicely fill up the space by adding padding above and below. But really it sits in the first row of that div and sticks out. To get it to be centred vertically in a div, you need to substitute height with line-height. That will make one line of the div 32px high and your links will be in the centre and because of the padding expanding to fill the container. Incidentally, IE7 renders the thing similarly to FF.

 

[ericaalicen]

Vragabond,

Thanks this helped. The links are now where they should be. But the line-height does not work in FF either. In IE it works fine, but FF is showing the boxes as the height of the letters. I have the height specified too. So I'm not sure how I'm supposed to make this work in FF. I can't use padding, it won't take the height or the line-height specified for the link.

I've tried nesting a paragraph, that made things worse. I also tried setting the height with a spacer gif but that doesn't help the height of the link area.

I'm frustrated and feel like switching back to images instead of a text-based nav, but my client is very concerned about being search engine optimized and prefers the text-based nav. Any other suggestions as to how to set the height of an anchor link in FF?

 

[TheCandyman]

It looks like in the a.nnav your have height: 30px; which i don't think works. In that same one you do have this:

   padding-top: 0px;
   padding-bottom: 0px;

which i think should be this

   padding-top:7px;
   padding-bottom:7px;

 

[Vragabond]

I don't understand. You say it works and then you say it didn't work. It works perfectly in my FF2.

Looking at your new code, I can see that you did not understand what I was saying. So, I will have to simply point it out. This actually severely irritates me, but what can I do. You should alter your css to read:

div.nav {
	width: 780px;
 	background-image: url("images/nav_end.gif"); 
	margin-top: 0px;
	padding: 0px;
	border: 0px;
	border-style: solid;
	[red][s]height: 32px;[/s][/red]
        [b][blue]line-height: 32px;[/blue][/b]
}

a.nnav {
	font-family: Arial, Geneva, Helvetica, San-Serif;
	font-size: 8pt;
	font-weight: normal;
	line-height: 24px;
	color: #EFCB54;
	text-decoration: none;
	border-style: solid;
	border-left-width: 0px;
	border-right-width: 2px;
	border-top-width: 2px;
	border-bottom-width: 2px;
	border-color: #FFFFFF;
	[b][blue]padding-top: 7px;
	padding-bottom: 5px;[/blue][/b]
	padding-right: 15px;
	padding-left: 15px;
	text-align: center;
	background-color: #3A64AC;
	[red][s]height: 30px;[/s][/red]
}
	
a.nnav:hover {
	color: #EFCB54;
	background-color: #49A3DC;
}

 

[TheCandyman]

Looks nice now ericaalicen, glad you got it working!

 

[Vragabond]

Thank you, TheCandyman.