Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Image displaying weird

Discussion in 'Website Coding & Programming Forum:' started by Stationery Direct, Sep 7, 2010.

  1. Stationery Direct

    Stationery Direct Administrator Staff Member

    Hopefully somebody can help.

    Take a look here > Shrewsbury Plumber

    When it loads it all displays perfectly (IE8), however, if I scroll down a little so the logo is no longer visible at all, then scroll back up the logo is no longer sized perfectly (only slightly), if I then left click on some text in the body of the page it snaps back to shape, does anybody else see this, I know IE is crap but is this my code? Any ideas?

    Many thanks

    Damon
     
  2. djb

    djb Member

    I think you may have fixed it already as I can’t see anything wrong so I won’t dirty my mac by starting windows on it to check (I did run it through Browserlab though).

    One thing I did notice was a couple of extra bits on the header div style:

    background: url("shrewsbury-shropshire-plumber.gif") no-repeat scroll left center #595A5C;

    Not sure you need that scroll, left center bit. I think this should be fine:

    background: url("shrewsbury-shropshire-plumber.gif") no-repeat #595A5C;

    I always go through my CSS after I’ve got it all working and chop out any extra bits - apologies if you’ve just not got round to this yet.
     
  3. Stationery Direct

    Stationery Direct Administrator Staff Member

    Thanks for that, it is still doing it though, can anyone else see this in IE8?

    Removing that code from the CSS doesn't position the logo as needed.

    Cheers

    D
     
  4. djb

    djb Member

    OK, for my crimes (of not being very helpful) I have had a look in IE8 and yes, it's doing the same for me. It really does all look fine though which is strange, so I'm afraid I'll continue the theme of not being helpful and ask do you need this on the header - as it doesn't seem to have a border?

    border-color:-moz-use-text-color;
    border-left:0 solid;
    border-right:0 solid;
    border-style:solid;
    border-width:0 0 1px;

    That 1px at the end could be doing it?
     
  5. Stationery Direct

    Stationery Direct Administrator Staff Member

    ok removed that code and still no different.
     
  6. djb

    djb Member

    What about making that background image the same size as the header div and losing all of that scrolling business. Short of taking your css and rebuilding it in a different way I’m not too sure of what to suggest as you’ve built it in a way I’ve not seen before - I tend to use several container divs to get stuff the right width and in the centre - and I wonder if how you’ve done it is all a bit technical for IE?

    Anyone else got any suggestions?
     
  7. Stationery Direct

    Stationery Direct Administrator Staff Member

    Sorted, thanks for that finally managed to get this right :icon_wink:
     
  8. Corrosive

    Corrosive Moderator Staff Member

    I believe that is what is referred to as a nasty case of divitis :icon_wink: It can lead to bloated and unnecessary code so watch that one.

    IE should be able to handle this if it is to call itself a browser! That said, it clearly can't but Boss Hog's fix looks like a good one. One for the 'watch out' list when considering IE and all it's wonderful 'quirks'.
     

Share This Page