I should note out front that I am a long way from being done with the styling. I’m trying to get the basic stuff set and then I’ll add in the pretty. This is a website for my wife as she is starting as a brand new teacher soon.
My area of concern is with the red-ish/orange-ish and yellow links located at the top of the page btwn the main logo and the contact info. They look essentially how I want them to look in FF, but in IE6+ they seem to cut off in the middle just above the text. I’m not sure how else to describe it, but the issue should be immediately evident if you compare the page in the two browsers.
The links and the contact info are in a table (gasp! :o ). I know, I know… that’s cheating. But floats inside of floats, inside of floats still confuses me and this worked positioning-wise so I went with it.
I welcome any thoughts on what this IE issue is as well as any advice on better page structure. The idea is to have the left column (logo and main nav) be fixed with the right column flexible. Thanks!
Right now, the background image is applied to the <a>. <a> is an inline element, so by default the background would only show up directly behind the "Newsletter" text. You counteracted that by adding a bunch of padding, but I’m guessing that IE doesn’t like that and that’s why it looks like half of it is missing.
Instead, try applying the background image to the containing <td>. I haven’t tested it, but I’ll bet that will work in both Firefox and IE.
Many thanks. I considered this as an option, but then I can’t have a hover state on those links. However, I’ve finally figured out what to do. In my IE stylesheet, I simply added "display:block;" to both "a" and "a:hover" in both the links. This solved my cutting off issue. Then I just had to tweak the width to get things looking just right.
I appreciate the help though. Thanks for checking it out…
Oh, right…IE6 doesn’t support :hover on anything other than links. Your solution works fine though.