Accessible Logo swapping and centering issue

[zackattack]

Hi all

I have successfully implemented a logo swap on a site I am building, so that those with CSS switched off can see a simpler logo on the page. I have taken my lead from a Dan Cederholm book, which shows a logo swapping technique, and used the following:

HTML:
<div id="header">
<div id="logo"><span><a href="index.html"><img src="images-design/logo-lofi.jpg" alt="site name" width="312" height="97"></a></span>
</div>
</div>

CSS:

#header {
height: 97px;
background: #9c9 url(images-design/banner-back.jpg) 50% center no-repeat;
}
#logo {
position: relative;
top: 0;
height: 97px;
padding: 0;
margin: 0;
}
#logo a {
border-style: none;
display: block;
width: 100%;
}
#logo img {
display: block;
width: 0;
}
#logo span {
position: absolute;
top: 0;
width: 100%;
height: 97px;
background: url(images-design/logo-hifi.jpg) 50% 0% no-repeat;
}

Why might you ask have I made the 'logo span' and the 'logo a' 100% - herein lies my problem (ok one of my problems)
The header has a background banner image the hi-fi logo has been sliced to fit exactly center to this
the only way I can do this is to stretch the span to 100% and also 'logo a' this means the whole banner is clickable and not just the logo.
To add to this MSIE 5 and 5.5 are knocking the logo down about 3px and the logo is generally not lining up all the time - you have to manually expand the browser to get this to sit right...urrhgg

I have been staring at this for some time, thought perhaps soemone else's keen eye might have a solution

any ideas?

ZA

[Sathallrin]

I'm not sure what would be the problem exactly as I cant see the images you are using.
But shouldn't you have the image CSS
#logo img {
display: none;
{
instead of block. It sounds like you only want that to show if they have CSS disabled, which it would if you used this, and it wouldn't show if CSS is enabled. Hiding the image might fix your layout irregularities.

[zackattack]

Thanks Sath

but I dont think this is the issue, besides I am hiding the img with width: 0;

thanks for your time anyway..

ZA

[Sathallrin]

When I tried it on IE with the image width 0, it would push the span down a few pixels, but it would be flat if it was not displayed, so that is why I suggested it.

[zackattack]

Ok I will have a look at using this, and see how I get on, thank you

ZA

[zackattack]

Hi Sath

I figured this out in the end, thank you for your idea, I actually used a combination of your idea and tried removing the span altogether and put the background image into the logo DIV, like so...

<div id="header">
<div id="logo"><a href="index.html"><img src="images-design/logo-lofi.jpg" alt="main logo" width="312" height="97" border="0"></a></div>
</div>

#header {
height: 86px;
background: #9c9 url(images-design/banner-back.jpg) 50% center no-repeat;
}

#logo {
display: block;
height: 86px;
width: 353px;
padding: 0;
margin: 0 auto;
background: url(images-design/logo-hifi.jpg) left top no-repeat;
}
#logo a {
border-style: none;
display: block;
width: 353px;
height: 86px;
}
#logo img {
display: none;
}

This centres really well... and swaps the logos out just how I needed it to.

ZA