Grow your CSS skills. Land your dream job.

header tag overlaps aligned image in IE7

  • # February 23, 2009 at 4:43 pm

    Hi All, and thanks for reading,

    My issue is with an <h2> that runs over my image which has a class of .alignright or .alignleft. The behavior is correct in FF but IE7 makes the problem behavior.

    The web page can be see here:
    http://horizon-solar.com/how-solar-power-works.html

    When viewing the page in IE7, you ‘ll see that the <h2> tag runs on top of the image.

    Any guesses?

    Thanks!

    Rob
    # February 23, 2009 at 5:42 pm

    if you are using z-indexing make sure you have set a position:relative to the object you are trying to z-index.

    you can use any position setting, absolute, fixed or relative – its just realtive is the passive one…

    basically I added

    position:relative;
    z-index:10;

    to the <a href> with the images tags inside them… give it a go… you might want to set a class for those specific <a> tags… :)

    # February 23, 2009 at 6:07 pm

    Thanks Rob!

    That did it. I added a class for those images and it’s good as gold. I wasn’t using z-index, except in a separate style sheet that handles the top nav bar. I don’t grasp why these elements needed to be z-indexed for one browser and not the other. Is this a hack, or was IE showing the correct behavior?

    Thanks again.

    Rob
    # February 24, 2009 at 3:12 am

    I wouldnt say it was really a hack, its just FF can be more forgiving that IE most of the time. Because your image links appeared first in the tree, they are obviously going to go underneath anything else that comes after them.

    # February 25, 2009 at 1:39 pm

    That makes good sense. And now I’ll know to use z-index to control how the page is layering it’s objects.

    Thanks again.

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

You must be logged in to reply to this topic.

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