Line Height Problem

[Dr.pter]

Still plugging away at improving my css with everyone's help. I took to heart much of the feedback you provided and made some changes. The changes look good in Firefox, and 'okay' in IE6 and Safari, I think (I trust someone will give me a needed kick in the pants if I'm wrong . I have't tested in IE5.5 or Mac yet, not really a concern at the moment. I do have one concern that I'd like some input on, though.

In IE 6 the line spacing on the nav div is too tall when the page loads, as soon as you hover over any of the links, it snaps into place and look as it does in FF, and the way I'd like it.

I don't know if I'm seeing an IE bug that needs a work-around, or if I'm just missing something in my own code. I Would greatly appreciate another set of eyes on it.

Thanks

[Expertz]

A menu, when you think about it, is a list. You are setting the menu items with p, and over coding it.
You might try this:

[html]
div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
[css]
#nav{.../*line-height:100%;*/...}
ul {font-size: 90%; font-weight: 600; list-style-type: square; line-height: 1.4;}
a, a:link, a:visited, a:hover {text-decoration:none;color:#28C}
a:hover{color:#FB6; background-color:#28C}
[you can live without these]
/*#nav p{margin: 1% 2% 1% 2%;}
#nav p a:link{display:block; font-size:90%;text-decoration:none;font-weight:bold;color:#28C}
#nav p a:visited{display:block; font-size:90%;text-decoration:none;
font-family:arial,sans;font-weight:bold;color:#28C}
#nav p a:hover{display:block; font-size:90%;text-decoration:none;
font-family:arial,sans;font-weight:bold;color:#FB6; background-color:#28C}
#nav p a:active{display:block; font-size:90%;text-decoration:none;
font-family:arial,sans;font-weight:bold;color:#FB6;}*/
#header a:link{color:#28C;font-weight:bold;text-decoration:none}
#header a:visited{color:#28C;font-weight:bold;text-decoration:none}
#header a:hover{color:#FA6}
#header a:active{color:#FA6}*/

BTW, font is not spelled correctly on one of your selectors(can't remember which one); all the inline markup styling needs to be moved to the CSS; your page needs a background-color(I default to fuchsia in Opera) and FF is having a hard time loading your image. Personally, I'd ditch both w3c buttons.

[Expertz]

I forgot to send this link to capture when I wrote a few minutes
ago. Looks pretty good, except you'll need a pro to help fix win/2000:
5.0 and 5.5.
http://www.browsercam.com/public.aspx?proj_id=245842

[Dr.pter]

Thanks. The changes to the nav you suggested do work fine, and the page didn't miss all of the extra rules I had one bit. I still would like to know what was causing the problem, but I suppose it's sometimes better to scrap what you have that doesn't work and start over with something that does

I haven't seen it, but I'm sure it look awful in IE5.5. When I went from the fixed design to liquid, I didn't spend any time putting hacks back in place to resolve the box model bug. I'm looking forward to trying the links Jan Brasna provided yesterday to get 6 and 5.5 running on the same box so I can see what I'm doing locally. I will try the hacks again then.
The pic of my ugly mug is definatly going before the page is 'done', so I never bothered to change the name. I'm not married to the idea of using the W3C tags, but figured what the heck for now.

Thanks much for the browsercam captures, btw. Save for IE they look much better, on the whole, than before.

Regards