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

Martin Eyles wrote :[color=blue]
> 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[/color]

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

Martin Eyles wrote :[color=blue]
> 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[/color]


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

Gérard Talbot wrote:[color=blue]
> Martin Eyles wrote :[color=green]
>> 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[/color]
>
> 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[/color]

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

Gérard Talbot wrote:[color=blue]
> Martin Eyles wrote :[color=green]
>> 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[/color]
>
>
> 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[/color]

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

Martin Eyles wrote:[color=blue]
> Gérard Talbot wrote:[color=green]
>> Martin Eyles wrote :[color=darkred]
>>> 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/[/color][/color]
>
> 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?[/color]

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