Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Image shifting in IE – help!

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #25454
    Minusfront
    Member

    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

    #60717
    joehankin
    Member

    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

    #60628
    Minusfront
    Member

    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

    #60699
    joehankin
    Member

    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

    #60690
    joehankin
    Member

    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

    #60722
    Minusfront
    Member

    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!

    #60639
    joehankin
    Member

    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

    #60650
    Minusfront
    Member

    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

    #60728
    joehankin
    Member

    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

    #60730
    apostrophe
    Participant

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

    #60733
    Minusfront
    Member

    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 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.