Centering Image Replacement

[Martin Eyles]

I have made a website that uses image replacement for the two main
headings. It works beautifully in firefox, but in internet explorer the
images appear too far to the right. Does anyone have any idea of how to
fix this?

The site is at

http://www.cafecreate.org/
Thanks,
Martin

[Gérard Talbot]

Martin Eyles wrote :

I have made a website that uses image replacement for the two main
headings. It works beautifully in firefox, but in internet explorer the
images appear too far to the right. Does anyone have any idea of how to
fix this?

The site is at

http://www.cafecreate.org/
Thanks,
Martin

HTML Tidy reports these errors:
(which can be installed as a Firefox extension)

line 12 column 9 - Warning: <div> isn't allowed in <h1> elements
line 12 column 35 - Warning: discarding unexpected </div>
line 13 column 9 - Warning: <div> isn't allowed in <h2> elements
line 13 column 35 - Warning: discarding unexpected </div>
line 15 column 17 - Warning: missing </a> before <div>
line 15 column 67 - Warning: discarding unexpected </a>
line 17 column 17 - Warning: missing </a> before <div>
line 17 column 74 - Warning: discarding unexpected </a>
line 21 column 32 - Warning: <a> escaping malformed URI reference
line 22 column 32 - Warning: <a> escaping malformed URI reference
line 23 column 17 - Warning: <img> escaping malformed URI reference
line 23 column 17 - Warning: <img> attribute "width" has invalid value
"260px"
line 23 column 17 - Warning: <img> lacks "alt" attribute
http://validator.w3.org/check?uri=ht...line&verbose=1

Why we won't help you
http://diveintomark.org/archives/200..._wont_help_you

Gérard
--
remove blah to email me

[Gérard Talbot]

Martin Eyles wrote :

I have made a website that uses image replacement for the two main
headings. It works beautifully in firefox, but in internet explorer the
images appear too far to the right. Does anyone have any idea of how to
fix this?

The site is at

http://www.cafecreate.org/
Thanks,
Martin

You also have many CSS errors
http://jigsaw.w3.org/css-validator/v...usermedium=all

and also many useless, unneeded CSS declarations.

Gérard
--
remove blah to email me

[Martin Eyles]

Gérard Talbot wrote:

Martin Eyles wrote :

I have made a website that uses image replacement for the two main
headings. It works beautifully in firefox, but in internet explorer
the images appear too far to the right. Does anyone have any idea of
how to fix this?

The site is at

http://www.cafecreate.org/
Thanks,
Martin

HTML Tidy reports these errors:
(which can be installed as a Firefox extension)

line 12 column 9 - Warning: <div> isn't allowed in <h1> elements
line 12 column 35 - Warning: discarding unexpected </div>
line 13 column 9 - Warning: <div> isn't allowed in <h2> elements
line 13 column 35 - Warning: discarding unexpected </div>
line 15 column 17 - Warning: missing </a> before <div>
line 15 column 67 - Warning: discarding unexpected </a>
line 17 column 17 - Warning: missing </a> before <div>
line 17 column 74 - Warning: discarding unexpected </a>
line 21 column 32 - Warning: <a> escaping malformed URI reference
line 22 column 32 - Warning: <a> escaping malformed URI reference
line 23 column 17 - Warning: <img> escaping malformed URI reference
line 23 column 17 - Warning: <img> attribute "width" has invalid value
"260px"
line 23 column 17 - Warning: <img> lacks "alt" attribute
http://validator.w3.org/check?uri=ht...line&verbose=1
Why we won't help you
http://diveintomark.org/archives/200..._wont_help_you

Gérard
--
remove blah to email me

Sorry - Fixed the html - It now validates. I still have the problem (in
IE7) though.

[Martin Eyles]

Gérard Talbot wrote:

Martin Eyles wrote :

I have made a website that uses image replacement for the two main
headings. It works beautifully in firefox, but in internet explorer
the images appear too far to the right. Does anyone have any idea of
how to fix this?

The site is at

http://www.cafecreate.org/
Thanks,
Martin

You also have many CSS errors
http://jigsaw.w3.org/css-validator/v...usermedium=all
and also many useless, unneeded CSS declarations.

Gérard
--
remove blah to email me

Sorry - Fixed the CSS now. Unfortunately the CSS can't be completely
fixed, as I have to use the filter hack to get transparent images to
work in IE6. However, this bit of CSS shouldn't affect the headings.
Also, I'm pretty sure the warnings are unrelated too.

Do you have any ideas now on how to fix things?

Thanks,
Martin

[Chris Sharman]

Martin Eyles wrote:

Gérard Talbot wrote:

Martin Eyles wrote :

I have made a website that uses image replacement for the two main
headings. It works beautifully in firefox, but in internet explorer
the images appear too far to the right. Does anyone have any idea of
how to fix this?

The site is at

http://www.cafecreate.org/

Sorry - Fixed the CSS now. Unfortunately the CSS can't be completely
fixed, as I have to use the filter hack to get transparent images to
work in IE6. However, this bit of CSS shouldn't affect the headings.
Also, I'm pretty sure the warnings are unrelated too.

Do you have any ideas now on how to fix things?

I see nothing on this page that requires the complexity of png alpha
channel opacity - you can get basic transparency with gif (if you even
need that), and then you can throw away all the unnecessary complexity
introduced by ie's lack of support for png.

Alternatively, if you do have a need for alpha channel opacity:
It seems slightly eccentric to use an empty span to put in a background
image for your title. I'd make it (H1 & H2) a block level element of the
right width instead.

What ie appears to be doing is calculating the width & therefore the
centred position of your titles before the image is loaded, so if your
titles were centred blocks of the right width, your problem would
probably go away.

Your rounded corners have the wrong background colour, btw (white).

Chris