Contractible Headers Script - Postitioning

[Josella]

1) Script Title:
Contractible Headers

2) Script URL (on DD):
Contractible Headers Script

3) Describe problem:
My sister wants to use this script on her blog, with an image for the header. I changed the script and gave her this:

<h3 onClick="expandcontent('sc1')" style="cursor: pointer; margin-top: 0; margin-bottom: 0"><img border="0" src="http://magicjelly.typepad.com/cat-test.gif" width="190" height="73"></h3>
<div id="sc1" class="switchcontent" 
<p style="margin-top: 0; margin-bottom: 0"><font color="#551212" face="Arial" size="2"><b><a href="http://www.magicjelly.com.au/" target="_blank">Magic
Jelly - Blog</a></b></font></p>
</div>

It works fine....except in IE, the graphic moves to the right. I realise I've not used the script as it was written, but if anyone has any clues, it'd be greatly appreciated.

Unfortunately I'm not with her at her computer to fiddle with it, but I've asked her to reduce the image size (it's in the right sidebar which is 200px wide, so she reduced the image size to 190px) and that didn't make any difference.

Her blog is with Typepad, who - apparently - have a WYSIWYG set up but I don't know what it looks like because I've never used it - obviously you can manipulate the code. If you follow the link to her blog above, the script is on the right under a graphic that says "Categories". (There is another categories list under that which you can ignore.)

Thanking you in anticipation of your help.

Jo

[ddadmin]

The problem from what I can tell is due to the fact that you're nesting the above block of code inside a <LI> element, which IE technically doesn't allow. That is to say, you shouldn't have elements like <h3> nor <p> inside a <li>. I'm not sure how much leeway Typepad gives you to move code blocks around, but are you looking to add expand/contract ability to just one single image that toggles additional content (instead of many)? If so using this script may be overkill anyhow, and depending on what you're trying to do, there are simplier ways to do it.

[Josella]

Yeah, I'm not sure how much leeway it gives either. I know it keeps presuming things and inserting them, but it does let you remove some of them. My sister wants just one expandable content on her blog, and she's working on the aesthetics, and I'm working on trying to get it to work, although like I said, I've had little experience with blogs, and the experience I have had was quite frustrating!

Thanks so much for the information - it gives me something to work with, 'cos I was out of ideas!

If I'm not asking too much, could you point me in the direction of the simpler ways of getting this effect?