You will notice the :hover CSS for the links in the main nav area (grey bar under logo) for the site testing.ksischool.com works fine in Firefox, but IE7 chops off the bottom few padding pixels. Why?
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
You will notice the :hover CSS for the links in the main nav area (grey bar under logo) for the site testing.ksischool.com works fine in Firefox, but IE7 chops off the bottom few padding pixels. Why?
I assume you’re talking about the top navigation; you’re padding an inline element (the
<a>tag). When placing padding on an inline element, horizontal padding will push against other elements, but vertical padding will just increase the size of the element without affecting the layout around it. Likely Firefox is rendering the boxes above the elements below them in the source, but for whatever reason IE is rendering them beneath, which is why you’re seeing parts of the box disappear.To fix the problem, float all of the links left (which essentially turns them into block elements). You’ll need to adjust your markup elsewhere to make it work (likely have some clearing problems if you just float straightaway), but that should fix that specific IE issue.
Edited for more detail:
As mentioned above, vertical padding on an inline element doesn’t behave the way you would expect (it increases the element’s height, but because the padding doesn’t interact with other page elements the inline element often overlaps things in odd ways). So to fix this, you somehow need to make the padded element (the
<a>tag) havedisplay: block. To keep everything on the same line, floating left is your best bet. Here’s the markup and styling that I would use:Some things to note: I’m using a standard clearfix (Google this if you don’t know what I’m talking about) to make sure the UL clears its floated contents. This will allow the parent nav elements to grow in size appropriately if the user sizes up their font.
Also, I removed the spacer
·and recommend using a background image and.lastclass in the CSS. This is purely personal preference. (In an ideal world, you’d use the :after pseudo-class to inject the·, but thanks to IE 6 not supporting it you can’t do that and support all browsers.) My reason for recommending a background image rather than just leaving it in the markup is that it leads to cleaner markup and is far easier to change down the road (if your client decided they wanted a pipe rather than a dot, say).The logic behind this markup/styling is that you need padding on the
<a>for the border/background color to work which means it has to havedisplay: block. Adding that would stick every link on a different line, though, so you need to float either it or its parent. Since it’s part of a list, it’s easier to float theliparent and use a clearfix to make sure theulstill has some presence on the page.Obviously if you use this code you’ll need to remove most of the
#nav_banner elementthings lower down in the stylesheet, and you’ll likely need to debug cross-browser again. Even if you don’t, hopefully it will provide you with some ideas for easily constructing top navigation in the future.