Skip to main content

Forums

This topic contains 10 replies, has 0 voices, and was last updated by  rubikwizard 9 years, 10 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #25797

    rubikwizard
    Member

    Hi

    I hope someone can help me. I am setting up a WordPress installation for work, modifying a theme that they have chosen. However there are display problems in IE8. You can view the site live here http://www.blogfoot.org/beckfoot/

    So far the site works fine in FireFox3.5
    [img]http://blogfoot.org/ff3.5.png[/img]

    However in IE8 I get this
    [img]http://blogfoot.org/IE8.png[/img]
    Notice that the image in the top bar and the text in the second bar have been pushed down.

    In IE8 compatibility mode I get
    [img]http://blogfoot.org/IE8_compat.png[/img]
    Notice the text is now working but the image is still pushed down.

    The CSS being used is

    Code:
    /* ================================================================
    TOP BAR
    =================================================================== */

    #topbar {
    background: #404040 url(images/topfade.jpg) repeat-x;
    width: 980px;
    height: 70px;
    color: #999999;
    font-size: 10px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }

    #topbar p {
    font-size: 10px;
    font-family: Verdana;
    font-weight: bolder;
    padding: 0px;
    margin: 0px 0px 5px 0px;
    }

    .topbar_left {
    background: transparent url(images/logo.jpg) no-repeat;
    width: 700px;
    height: 70px;
    float: left;
    margin: 0px 0px 0px 15px;
    padding: 0px;
    }

    .topbar_right {
    width: 240px;
    float: right;
    text-align: right;
    margin: 0px;
    padding: 22px 15px 0px 0px;
    font-weight: bolder;
    }

    /* ================================================================
    HEADER
    =================================================================== */

    #header {
    background: #9C0001 url(images/masthead.jpg) no-repeat;
    width: 980px;
    height: 68px;
    color: #FFFFFF;
    font-size: 10px;
    margin: 1px 0px 0px 0px;
    padding: 0px;
    overflow: hidden;
    }

    #header p {
    color: #ffffff;
    font-size: 28px;
    font-family: Times;
    text-decoration: none;
    font-weight: bolder;
    font-style: italic;
    line-height: 8px;
    text-align: left;
    padding: 0px 0px 0px 15px
    }

    There are some CSS conditional statements being used

    Quote:
    <style type="text/css" media="screen"><!– @import url( http://www.blogfoot.org/beckfoot/wp-con … /style.css ); –></style>

    <!–[if gte IE 7.]>

    <link href="http://www.blogfoot.org/beckfoot/wp-content/themes/thebeeb/ie7.css&quot; rel="stylesheet" type="text/css" />

    <![endif]–>

    <!–[if lte IE 6]>

    <link href="http://www.blogfoot.org/beckfoot/wp-content/themes/thebeeb/ie6.css&quot; rel="stylesheet" type="text/css" />

    <![endif]–>

    <!–[if lt IE 7.]>

    <script defer type="text/javascript" src="http://www.blogfoot.org/beckfoot/wp-content/themes/thebeeb/scripts/pngfix.js"></script&gt;

    <![endif]–>

    The html/divs look like

    Code:


    I have some basic css knowledge but this beats me. I have tried reading up and searching the internet and the only thing I can come up with is that it is probably something to do with margins and/or padding settings. I have not tried the site in IE7 as I don’t have that available at the moment.

    Thankyou very much to anyone who has any ideas :)

    #62374

    Rob MacKay
    Keymaster

    after a quick glance, your picking up some margin in IE8 and not in FF on the .top_left navbar – that’s what’s causing it to come out. I have not looked through all your stylesheets though – sorry – bit short on time right now :(

    #62392

    rubikwizard
    Member

    Thanks for your help. I guessed it might be something to do with margins but I can’t seem to figure out what.

    I suppose if it can be fixed then I will need another conditional IF to a separate stle sheet just for IE8?

    #62396

    Rob MacKay
    Keymaster

    tbh – you shouldn’t have separate style sheets for browsers. If you code to web standards most issues are picked up, you should really only need sep sheets for IE6. You rarely need one for IE7/IE8.

    If you are finding yourself having this issues it might be better to go back and look at how you are coding the site as you are probably not doing it as well as it should be done.

    You do have 36 errors and 26 warnings on your HTML for example :)

    #62399

    rubikwizard
    Member

    Yes I realised there were those errors and warnings as I passed it through a validator :cry:

    I mainly work in ASP and PHP and rarely get involved with the CSS, however I was asked to set up a quick WordPress installation based on a template I was given. All was going fine until I had a look at it in IE8 and saw the margin problems in the top bars.

    I have been trying to read up on margins and padding and IE8/FF problems but am really struggling. I have fiddled with the margin settings and get the elements to display correctly in IE8 (compat mode) but then they break in FF. I am going around in circles. Maybe it is time to purchase a good CSS book and have a good read.

    In the meantime if anyone elso has a suggestion I would be very greatful :D

    #62423

    Meander365
    Member

    Not that I’m a fan of this method, but you can always try applying the ie7 compatibility mode for ie8. Might be worth a try:

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    #62412

    EpicEyes
    Member

    Maybe add some simple resets to your body?

    body { margin: 0; padding: 0; }

    #62425

    rubikwizard
    Member
    "Meander365" wrote:
    Not that I’m a fan of this method, but you can always try applying the ie7 compatibility mode for ie8. Might be worth a try:

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    Thanks, but the picture is still shifted in compatability mode.

    #62426

    rubikwizard
    Member
    "EpicEyes" wrote:
    Maybe add some simple resets to your body?

    body { margin: 0; padding: 0; }

    Thanks for the suggestion but the body already had padding: 0; and when I put the margin to 0 the items were still in the wrong place as well as the whole page now being left aligned (instead of center). The margin is currently set to 0px auto 0px

    #63048

    Je$ter
    Member

    IE8 is supposed :lol: to be more standards based…..so, just remove the special IE7 css file by removing the "gte" from the if statement. Works great on a copy I saved locally. ;)

    Enjoy!
    Je$ter

    #63053

    rubikwizard
    Member
    "Je$ter" wrote:
    IE8 is supposed :lol: to be more standards based…..so, just remove the special IE7 css file by removing the "gte" from the if statement. Works great on a copy I saved locally. ;)

    Enjoy!
    Je$ter

    JeSter, you are a genious! That works great! I was about to give up.

    It doesn’t like IE7 now :( but I am not too bothered about that.

    Thanks again!

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

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star