Works on FF, Chrome, Opera, but IE...

I've done a page on our church website about our baptism policy. I've used image map links to allow selection of the different sections. These sections are initially 'hidden' and the click 'shows' the section, 'hiding' any others.

See this link

However... On IE8, alternate clicks, whether from the image links or the 'next' links at the end of each section, result in IE rendering the page slightly wider resulting in a horizontal scroll bar. The same section can be rendered with or without a horizontal scroll bar depending on the sequence of clicks to display it.

Thoughts on what is going on and how to fix would be appreciated.

Please.

Hi Tony

Interesting idea which looks fine in terms of the image itself, not convinced on usability regarding the resulting text placement, also an outside chance search engines could find this odd. Basically the equivalent of old fashioned paging to which they recently have been reacting not ideally.

That's just an opinion. Not absolutely sure of the IE8 issue, a case of reading round and experimentation. May be the use of link="topic1" instead of href="topic1" in the image map.

If not able to sort this quickly, you can add:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

into the head section. Not a long term, ideal solution but may work.

Also, good idea to change:

title="Baptism Policy"

in the image tag to:

title=""

Stops "Baptism Policy" showing in various places on the image, otherwise people are going to be confused.

On 1280 x 1024 I get:

http://www.camieabz.co.uk/bap.jpg

On 1024 x 768 I get a horizontal scrollbar. Is it the resolution of a given screen that's the thing?

Edit: Using IE8 here.

Edited by camieabz (Sat 07-Aug-10 23:42:43)

Reply to both.

In reply to a post by Ansolan:

Interesting idea which looks fine in terms of the image itself, not convinced on usability regarding the resulting text placement, also an outside chance search engines could find this odd. Basically the equivalent of old fashioned paging to which they recently have been reacting not ideally.

Not too worried by search engine reaction.

In reply to a post by Ansolan:

May be the use of link="topic1" instead of href="topic1" in the image map.

Changed to href="#topic1" - no difference.

In reply to a post by Ansolan:

If not able to sort this quickly, you can add:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

into the head section. Not a long term, ideal solution but may work.

Tried that, no difference.

In reply to a post by Ansolan:

Also, good idea to change:

title="Baptism Policy"

in the image tag to:

title=""

Stops "Baptism Policy" showing in various places on the image, otherwise people are going to be confused.

Good idea, done.

In reply to a post by camieabz:

On 1280 x 1024 I get:

http://www.camieabz.co.uk/bap.jpg

On 1024 x 768 I get a horizontal scrollbar. Is it the resolution of a given screen that's the thing?

Get your point but why would IE8 be different to the other three browsers. And why would the scroll bar only appear on alternately clicked sub-pages? Such that the same text can appear with or without the scroll bar depending on the mouse sequence to get it visible.

If it was a resolution issue I could change widths or whatever accordingly. But I've tried various margin-right settings, no difference. Tried putting it all in a table with 90% width, no difference.

Something very odd going on.

Assuming this isn't something jammed in your browser, the read as IE7 failing is unusual. Maybe a javascript issue rather than CSS. Passing thought though, may be worth trying:

overflow: auto;

In the topic divs.

Post deleted by jonathanHodd

If you re-select the step from itself (eg Baptism Service from the Baptism Service page) you alternately get a blank lower part and the correct lower part. Don't know if this heps at all?

Edited by deleted (Mon 09-Aug-10 09:37:05)

Not sure if it helps, but I put the link in your OP through the validator here and got:

Validation Output: 2 Errors

Line 187, Column 66: there is no attribute "LINK"
<area shape="rect" coords="20,237,151,272" class="topic" link="topic1"

&#9993;

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

Line 223, Column 48: there is no attribute "LINK"
�s="topic" style="cursor:pointer" link="topic2" title="Service of Thanksgiving"�

&#9993;

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

Edited by billford (Mon 09-Aug-10 09:52:23)

That's the web standards trying to stop people coding their sites to open new pages on click. It shouldn't actually cause that problem in itself.

The DTD is now 4.01 Transitional anyway, and validates.

Looking at it all again, the image hops to the right on the click of a second option (regardless of the sequence).

You can achieve what you're after with pure css, and drop that js file.