cant use display:block for image replacement

[mark | r]

im using an image replacement technique which would normally be:

h1{display:block;width:100px;height:200px;overflow:hidden}
h1
span{display:inline;width:100px;height:200px;top:0;left:0;background:url(ima
ge.gif)}

only im using display inline for my H1 see www.iosilver.co.uk/test/ the logo
image wants to be replaced.

anyone know a work around?

Mark

 

[Els]

im using an image replacement technique which would normally be:

h1{display:block;width:100px;height:200px;overflow:hidden}
h1
span{display:inline;width:100px;height:200px;top:0;left:0;background:url(ima
ge.gif)}

only im using display inline for my H1 see www.iosilver.co.uk/test/ the logo
image wants to be replaced.

anyone know a work around?

Only if I'd understand the question.
In that test page I see an <h1><img src=....></h1>.
No span. What is the effect you are after?

What do you mean by 'the logo image wants to be replaced'?

 

[mark | r]

Only if I'd understand the question.
In that test page I see an <h1><img src=....></h1>.
No span. What is the effect you are after?

What do you mean by 'the logo image wants to be replaced'?

Ive dropped the image into the H1 for now so i can see the site how its
intended to be displayed - the img src is to be replacd with "Io Silver
Jewellery <span></span>"

mark

 

[Els]

Ive dropped the image into the H1 for now so i can see the site how its
intended to be displayed - the img src is to be replacd with "Io Silver
Jewellery <span></span>"

So.. guessing what you want:
the <h1> element to have no content, and show the image by using it as
a background image for <h1>? So.. what do you want the span for?

Or, from your last comment:
the html to read <h1>Io Silver Jewellery <span></span></h1>, where the
span is to show an image as background?
Do you want the 'Io Silver Jewellery' to show as text to the left of
the image?

Assuming that is what you want to accomplish, this could be your code:

<h1>Io Silver Jewellery</h1>

CSS:
h1{
width:[required width including image];
padding-right:[width of image];
background-image:url([url of image]);
background-position:right center;
background-repeat:no-repeat;
min-height:[height of image];
}
/* IE only, except IE-Mac \*/
* html h1{height:[height of image];}
/* end of Mac-IE hide */

 

[mark | r]

span{display:inline;width:100px;height:200px;top:0;left:0;background:url(ima the
logo
Ive dropped the image into the H1 for now so i can see the site how its
intended to be displayed - the img src is to be replacd with "Io Silver
Jewellery <span></span>"

So.. guessing what you want:
the <h1> element to have no content, and show the image by using it as
a background image for <h1>? So.. what do you want the span for?

Or, from your last comment:
the html to read <h1>Io Silver Jewellery <span></span></h1>, where the
span is to show an image as background?
Do you want the 'Io Silver Jewellery' to show as text to the left of
the image?

Assuming that is what you want to accomplish, this could be your code:

<h1>Io Silver Jewellery</h1>

CSS:
h1{
width:[required width including image];
padding-right:[width of image];
background-image:url([url of image]);
background-position:right center;
background-repeat:no-repeat;
min-height:[height of image];
}
/* IE only, except IE-Mac \*/
* html h1{height:[height of image];}
/* end of Mac-IE hide */

i want the h1 to have content that is underneath an expanded spanwhich
covers the text and displays an image as a background graphic.so if you turn
graphics on and off you either get the logo graphic, or some h1 text.

its a commonly used technique in CSS design.

Mark

 

[Els]

i want the h1 to have content that is underneath an expanded spanwhich
covers the text and displays an image as a background graphic.so if you turn
graphics on and off you either get the logo graphic, or some h1 text.

its a commonly used technique in CSS design.

I think you misunderstood this technique.

It's actually done like this:

<h1><img src="image.jpg" alt="Io Silver Jewellery"></h1>

And when anyone turns off images, the alt text does get displayed as
if it were directly in the <h1>.

 

[mark | r]

I think you misunderstood this technique.

It's actually done like this:

<h1><img src="image.jpg" alt="Io Silver Jewellery"></h1>

And when anyone turns off images, the alt text does get displayed as
if it were directly in the <h1>.

http://www.mezzoblue.com/tests/revised-image-replacement/

shows loads of example of these techniques, the only one i know to be
completeley accessible is the one using spans!

mark

 

[kchayka]

im using an image replacement technique which would normally be:

h1{display:block;width:100px;height:200px;overflow:hidden}
h1
span{display:inline;width:100px;height:200px;top:0;left:0;background:url(ima
ge.gif)}

The width and height properties do not apply to inline elements, so your
span rules don't give the desired results, except in broken browsers.

<URL:http://www.mezzoblue.com/tests/revised-image-replacement/>

The Gilder/Levin method is less bad than most, as it can still be usable
when image loading is disabled, providing the image doesn't use
transparency.

 

[Steve Pugh]

<URL:http://www.mezzoblue.com/tests/revised-image-replacement/>

The Gilder/Levin method is less bad than most, as it can still be usable
when image loading is disabled, providing the image doesn't use
transparency.

.... and provided that the user's font size is small enough to keep the
text version smaller than the image version, otherwise it spills out
from underneath.

Steve

 

[Els]

http://www.mezzoblue.com/tests/revised-image-replacement/

Must say I never saw that technique before, actually...

shows loads of example of these techniques, the only one i know to be
completeley accessible is the one using spans!

In which situation wouldn't the regular alt text be displayed when the
image is absent?

Also, what Steve says seems a valid reason for me not to use that
technique.

 

[mark | r]

Must say I never saw that technique before, actually...


In which situation wouldn't the regular alt text be displayed when the
image is absent?

Also, what Steve says seems a valid reason for me not to use that
technique.

Because search engines dont categorise Alt text in a h1 as H1 text

mark

 

[Els]

Because search engines dont categorise Alt text in a h1 as H1 text

Which shows I'm better at CSS than at SEO :S

Oh well, it's one more reason to not apply <h1> to what I usually code
as <div id="logo">. I use <h1> for the page title, which never is an
image in my book.

 

[Adrienne]

Which shows I'm better at CSS than at SEO :S

Oh well, it's one more reason to not apply <h1> to what I usually code
as <div id="logo">. I use <h1> for the page title, which never is an
image in my book.

Google _might_ look at it if it were a link. You could try:
<a href="#heading"><img src="logo.png" alt="" title="Heading Text"
id="heading"></a>

Then style it to not appear as a link.

But, as Els says, headings should be text, not images. There are probably
other SEO issues with H1 images, like should a SE shows H1s in the SERPS,
how would it display an image?