Image Shifting in IE

[chilipie]

Link: http://redblizzard.astahost.com/
The image in the header seems to have moved up in IE - also, in the top right corner there is a line sticking out of the top of the background. This doesn't happen in Firefox though. Thanks in advance.

[Bobo]

<script language="Javascript">
function T()
{
if (window.navigator.appName=='Microsoft Internet Explorer')
{
imageName.style.pixelRight+=11;
//OR
imageName.style.position='absolute'; //you'll have to position the image absolutely if you don't already have it that way
imageName.style.clip="rect(auto,15px,auto,auto)"

}
}
window.onload=T
</script>

I think that's right...

[chilipie]

I thought this was more of a CSS problem?

[ronaldb66]

Yeah, throwing javascript at anything that moves isn't solving the problem; it's at best patching it.
Help me understand here: how did you construct the whole header bit? I can't find the "OL" image anywhere, however you seem to have used some sort of replacement technique. Anyway: holder.gif might be the culprit here; try no-repeat to keep it in check.

[chilipie]

holder.gif is the image that makes the columns - the faux columns method from ALA. The header has a background image (right.gif) and the logo is top.gif. right.gif is a background - top.gif is actually in the page, so you can use it as a link to go home.

[chilipie]

Still not working.
I tried applying margin: 0; and padding: 0; to the image in the header but it didn't do anything.

[chilipie]

This is really p***ing me off now. Thrown everything I can think of at it (not literally :p ) to no avail. Never had this problem before, so I'm still not sure what's wrong.

[Jalenack]

http://homepage.mac.com/hsuth/suther/screenshot.jpg

Heres how it looks in IE5/Mac...hope that doesn't depress you further :)...obviously the faux columns arent rendering..ugg

It looks fabulous in Firefox and safari and all that junk.

I have a feeling it could be this code thats messing you up:


div#holder:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;


I'm not exactly sure what thats for...its almost definite that IE is rendering that instead of your intended thing...

[chilipie]

That code is some stuff mindless did for me when the faux columns weren't working in FF and Moz before. I'll try and find the topic again, and have a go at the other methods he said would work.

[chilipie]

Please guys :( .

[chippy]

Is this how its supposed to look in IE

[Badman3k]

I think i've worked out what the problem is, and as far as my testing goes it works.

In your html code make sure you remove all whitespace between:
<a href="http://redblizzard.astahost.com/index.php" title="ol designs - home"><img src="http://redblizzard.astahost.com/images/top.gif" alt="ol designs"/></a>
and the closing </div> tag.

In other words make sure that the line of code is as follows:

<a href="http://redblizzard.astahost.com/index.php" title="ol designs - home"><img src="http://redblizzard.astahost.com/images/top.gif" alt="ol designs"/></a></div>


As I said this seems to work. Hope this solves your problem.

[Basscyst]

It appears to be fixed to me.

[chilipie]

Thanks Badman, it's working now ;) .

[Badman3k]

No problem!:thumbsup:

What can I say? It's M$ lol :D