-----Original Message----- From: Els [mailto:[email protected]] Sent: Wednesday, February 11, 2009 12:37 PM To: taestrada Subject: Re: [css-d] Centering Navigation Bar Div
taestrada wrote: This worked PERFECTLY in Firefox, but IE 7 is still off a little. Any suggestions? Thank you so much for suggesting this. (I don't suppose you know how to make it center vertically too???) I just noticed I replied to you without replying to the group. Wasn't my intention, but oh well, too late now :-) IE7 is probably just padding/margin issue. Set #topnav ul to have margin:0 and padding:0, and also set margin:0 for the li elements. Every browser uses different default margins and paddings on UL and LI. Then, I've noticed your :hover effect, is making the text bold. The problem is, that that makes the whole row 'dance' when hovering, as bold letters are wider than normal weight letters. I suggest using a different hover effect, such as a colour difference or a background colour, or an underlining. Anything that doesn't change the size of the letters. You set a width of 125px on the <li> elements. This has zero effect, since they are inline elements, you can just take it out. Last but not least, vertical centering. This can't really be done the same way as horizontal centering, but there are of course tricks, especially in the case of your navigation. One such trick is to simply set the line-height to 1, and then have the same top and bottom padding on the <a> elements, and let the box around it be sized by the ul and its contents. Another one is to set the line-height at exactly the height of the box, and make sure the text is set to 'vertical-align:middle;'. This gives slightly varying results in different browsers though, depending on how they place the letters in their line-height. -- Els Thanks so much; I will try all this. (I copied the group so your answer would show up in case anyone else needs help with this.) Alix ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
