Grow your CSS skills. Land your dream job.

Image shifting in IE – help!

  • # July 14, 2009 at 10:54 am

    Hi guys, I’ve been working on a portfolio/freelancing site and have run into a few hiccups with IE. I’m working on a Mac so have tested locally on Firefox and Safari during the build with no issues. I’ve now run them through browsershots.com to see how they appear in other browsers and wouldn’t you know, IE has thrown up some issues I can’t figure out. I’m quite new to CSS – this is my first proper website – so if anyone can help me out I would be very grateful.

    Basically, I have a PNG image that sits underneath my header/navigation and on top of a coloured background. It’s absolutely positioned to sit below the nav but above the main content area. IE 6 & 7 don’t seem to render this properly and shift the image (and main content area) downwards which is really messing up the design.

    Here’s a link to a simple contact page on my site:
    http://www.minusfront.com/contact.php

    And here is a screenshot of how the same page looks in IE7:
    http://api.browsershots.org/png/origina … de63cd.png

    Like I said, I’m fairly new to web design and don’t have much experience debugging problems in lots of browsers. If anyone out there could help me out that would be great!

    Thanks,

    Dean

    # July 14, 2009 at 11:20 am

    i think that you are having a problem possibly because using the -moz-border-radius stuff does not really work in ie.

    Also try using an alternate css script for ie as well :

    <!–[if IE 7]>
    <link rel="stylesheet" type="text/css" href="-your ie css location-" media="screen, projection" />
    <![endif]–>

    This will iron out small positioning problems that always occur in ie.

    But, If you insist on using rounded corners then use background images in new div at the top and bottom of the content div.

    Hope this helps…
    Joe

    # July 14, 2009 at 11:26 am

    Thanks for your response Joe – I’ll try setting up an alternative IE style sheet and see if that works.

    On a side note, IE8 doesn’t seem to have any problems with the moz border radius though. It just squares them off which isn’t a problem – I would be happy to have my site work like that in previous versions of IE.

    IE8 Screenshot:
    http://api.browsershots.org/png/origina … 2b706a.png

    # July 14, 2009 at 12:54 pm

    It’s true ie8 is far better than ie7…

    To make the rounded borders work across all browsers though you may be best using multiple divs with background images:

    Code:

    Your stuff

    Any way, this is a good site for for first try, so keep it up…

    hope this is helpful

    Joe

    # July 14, 2009 at 1:10 pm
    "joehankin" wrote:
    It’s true ie8 is far better than ie7…

    To make the rounded borders work across all browsers though you may be best using multiple divs with background images:

    Code:

    Your stuff

    Any way, this is a good site for for first try, so keep it up…

    hope this is helpful

    Joe

    the rounded border is not thte problem…. it is shifting down, time to break out the firebug i think

    where have you positioned the introContent? i.e. top:0px? left50px?

    # July 14, 2009 at 2:22 pm

    Ok, with regards to the positioning, you should have a separate style sheet for ie 6 and 7, and replace the padding-top: 70px; for padding-top: 0;, and that seems to work for me…

    Code:
    #intro, #introAbout, #introContact, #introLogos, #introWeb, #introPrint, #introProcess {
    height:245px;
    width:960px;
    padding-top: 0;
    left: 0;
    }

    hope this helps

    Joe

    # July 14, 2009 at 5:23 pm

    Thanks Joe! That sorted out the text image but the main content div is still being pushed down…and there is something weird going on with the sub-nav buttons. It looks like the background image sprite has been scaled down so that the whole image is visible rather than just cropping into it. Anyone got any ideas?

    Here’s a link to a new screenshot:
    http://s3.amazonaws.com/resultcaptures/ … llpage.png

    Thanks!

    # July 15, 2009 at 5:33 am

    Ok, well for some reason you changed the background image code so the menu isn’t displaying in firefox now.

    OLD:

    Code:
    ul#menu li {
    width: 120px;
    height: 70px;
    float:left;
    display:block;
    text-indent: -999px;
    background-image: url(http://www.minusfront.com/images/menu.png) no-repeat;
    overflow: hidden;
    cursor: pointer;
    }

    NEW:

    Code:
    ul#menu li {
    width: 120px;
    height: 70px;
    float:left;
    display:block;
    text-indent: -999px;
    background-image: url(http://www.minusfront.com/images/menu.png);
    overflow: hidden;
    cursor: pointer;
    }
    }

    This now works in FF, and ie…

    The problems you are having are also with the way you call ie scripts…

    OLD (does not differentiate between 6, or 7 etc.):

    Code:

    NEW:

    Code:

    ie6 and 7 will need to have the padding-top: 70px; turned to padding-top: 0px; to sort the positioning, and all css will need to have the no-repeat removed in the background image of the menu.

    With regards to the new problem of the weird looking menu, i think the problem is in the unitpnfix file, because when i tried displaying without it it had the grey background but positioned and appeared correct other than that.
    If you can’t get this working try using different (perhaps jpg, or gif) images in ie6.

    PS.
    When posting this the aforementioned changes mean it is working in FF, ie6, ie7, and ie8.

    Hope this helps
    Joe

    # July 15, 2009 at 6:57 am

    Thanks Joe – you’ve been a big help!

    Yeah, I was mucking around with that "no-repeat" to try to stop the nav going berserk in IE6 but didn’t work :( I tried swapping in GIF images for the nav instead but it didn’t seem to make a difference…I think I am just going to drop support for IE6 at this stage and just content myself with IE7 and above.

    On the plus side, I did manage to get the main body of the portfolio page to sit flush underneath the tabs – I just added a "display:inline" to the absolutely positioned tabs in the IE css file and that fixed the problem.

    New screenshot for IE7:
    http://s3.amazonaws.com/resultcaptures/ … llpage.png

    New screenshot for IE6:
    http://s3.amazonaws.com/resultcaptures/ … llpage.png

    # July 15, 2009 at 10:31 am

    Well done so far…

    The positioning in ie6 hasn’t been fixed though because you haven’t included a padding-top: 0; in the ie6_style.css script.

    With regards to fixing the ie6 bug, i believe that removing the unitpngfix would help.
    It is making the background of the .png transparent, but causing the weird layout unfortunately.

    It may be best to have it work with grey backgrounds than look the way it does at the moment without grey backgrounds…

    Also, you should remove the value="Submit" in your contact page send form button, because in IE it is showing on top of your button image!

    Joe

    # July 15, 2009 at 10:50 am

    http://www.twinhelix.com/test/ is the only ie6 png fix that supports background position that I am aware of.

    # July 15, 2009 at 11:29 am

    Wow, thanks guys!!

    Yeah I had been linking the IE6 stylesheet to an older version without the "padding-top:0". Once I changed this it all slotted back into place :) Also, good spot withe the Submit value – I had been so busy concentrating on the navigation that I hadn’t noticed it. Thanks Joe.

    Apostrophe, I tried using that PNG script that you posted – the PNGs were still appearing on a grey background but it did fix the repeating background. I used this script and then just swapped in GIFs and JPEGs for IE6 and it works fine now.

    Thanks again for your help guys, this has been great. Here’s a link to a new IE6 screenshot:

    http://s3.amazonaws.com/resultcaptures/ … llpage.png

    I still need to create GIFs of all the other images to call into my IE6 stylesheet but at least I know what I’m doing now :)

    There is one other thing though, in the footer my social network links are running one after another in IE6. They are supposed to be 2 rows of 3 items floated next to each other. Any ideas what is going on here?

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

You must be logged in to reply to this topic.

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