Support » Themes and Templates » The usual culprit – IE

  • Hi all,

    I am a little stumped when it comes to the quirks of IE and css.

    If you look at my site in FF and IE, you will notice that in IE the #mainwrap background image is showing up on the right side.

    What’s the issue here? Is it the border of #mainwrap or the alignment?

    Muchos thank you in advance.

Viewing 6 replies - 1 through 6 (of 6 total)
  • It might help to add: background-repeat: no-repeat; to your #mainwrap

    That would cause me to lose the drop shadow effect. #mainwrap has the background image.

    Sorry my bad I meant: background-repeat: repeat-y;

    Thanks so much, this solved 90% of the problems.

    Now one remaining issue is that at the top of #mainwrap I get an 8px gap between the top-border image and the header.

    And on post pages I get a background image display above the credits.

    I have been looked at the code every day, but I just can’t explain these two issues.

    IE tends to behave differently when it comes to margins. Especially IE6. I personally use a separate stylesheet for IE. You only need to put the styles in your IE stylesheet that create a problem for you. To avoid other browsers picking up the IE styles, add the IE stylesheet with IE conditional comments like this:

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <!--[if lte IE 6]>
    <link href="<?php bloginfo('template_url'); ?>/style_ie6.css" rel="stylesheet" type="text/css" />

    For more info about conditional comments see:

    Thanks for the tip, I was going to leave this to a last resort. I guess there is now way around adding separate CSS tags in a separate stylesheet for IE.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘The usual culprit – IE’ is closed to new replies.