Grow your CSS skills. Land your dream job.

Help with IE issue…

  • # June 29, 2008 at 11:40 am

    Greetings. So I’m experiencing an IE issue that I’m hoping someone can provide some advice on. First, here is the site:
    http://www.brayville.com/index2.html

    and the CSS:
    http://www.brayville.com/_css/screen.css

    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!

    # June 30, 2008 at 3:25 pm

    I see the problem – it looks like the top half of the buttons is "cut off" in IE. I took a look at your code:

    Code:

    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.

    # June 30, 2008 at 4:35 pm

    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…

    # July 1, 2008 at 2:45 pm

    Oh, right…IE6 doesn’t support :hover on anything other than links. Your solution works fine though.

    Probably not worth the trouble now, but in the future, I highly highly recommend making use of IE7.js. It’s a free JavaScript that brings IE’s standards support up to the level of Firefox/Safari. It fixes a ton of issues – one of which happens to be the :hover issue. Using that JS, you could do stuff like td:hover in your stylesheet and it would work in IE.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".