WordPress.org

Ready to get started?Download WordPress

Forums

How to make this look better in IE8? (10 posts)

  1. mixmastermichael
    Member
    Posted 1 year ago #

    The background image of the trucks on this page looks mad wonky. If you look at it in any other new browser, it looks fine though. Can someone please take a look and let me know what I can do so that the trucks are moved up in ie?

    http://www.barr-nunn.com/careers/

    Thanks

  2. Tara
    Member
    Posted 1 year ago #

    Looks Ok in Ie9 and FF.
    I don't have ie8. If it does not ok in IE8, then consider using conditional comment css: http://codex.wordpress.org/Conditional_Comment_CSS

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I don't have IE8 either, but you could start by fixing some Validation errors that might be causing IE problems -- the unclosed divs in particular:

    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.barr-nunn.com%2Fcareers%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

  4. mixmastermichael
    Member
    Posted 1 year ago #

    thanks for the replies, I've fixed a few things in ie8, but I can't get the background image to appear correct, or get the IE8 conditional statements to work... In my header.php file, I tried a few things to link to a css specific for IE8, but none of them appear to be working. This is the way my header file is set up... Just need the #page css element to behave differently on ie8.

    Lil help? Code below:

    <!--[if IE 8]-->
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/ie.css" media="screen" type="text/css" />
    <link rel="stylesheet" href="<http://barr-nunn.com/careers/wp-content/themes/twentyeleven/ie.css>" media="screen" type="text/css" />
    <style type="text/css">
    #page {
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    max-width: 950px;
    position: absolute;
    }
    </style>
    <![endif]-->

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

  6. mixmastermichael
    Member
    Posted 1 year ago #

    Thanks for the replies guys, fixed this by using the same style sheet, but some conditional statement stuff in them. Such as:

    #page {
    max-width: 950px;
    margin-right: auto;
    margin-left: auto;
    background-image: url("http://www.barr-nunn.com/careers/wp-content/images/background.jpg");
    background-repeat: no-repeat;
    background-position: bottom;
    background-color: #fff;
    background-color: #fff\9; /* IE 8 and below */
    background-position: center\9;
    }

    the \9 stuff makes a condition for stuff before IE 9. Just thought to post in case some sorry soul runs across this thread looking for the same thing.

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Just thought to post in case some sorry soul runs across this thread looking for the same thing.

    Good thought!

    It's really pretty mind-boggling (not to mention annoying) to think about all the time (and money) web designers and developers have wasted and continue to waste simply trying to deal with IE. Especially considering that it is all totally preventable (on MS's part).

  8. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    OMG, esmi, that is priceless!! Thank you.

  10. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    :-)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.