• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Image displaying weird


Stationery Direct

Administrator
Staff member
#1
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
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.
 

Stationery Direct

Administrator
Staff member
#3
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
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?
 
#6
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?
 

Corrosive

Well-Known Member
#8
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?
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'.