Span placing off - using Float (only in some browsers)

Ple开发者_运维知识库ase see www.racedayworld.com

The plus sign (which is floated on the right of an accordian div panel) is being pushed down in certain browsers, but shows up fine is others...

I know it's happening in these browsers... Firefox 3.0.5 IE 7 others?

Any ideas?

Instead of:

#accordion span {
float:right;
}

Get rid of the span. Float the image itself. Use:

#accordion img {
float:right;
display:block
}

Float only floats items above those which follow after in the document order. Try delivering something like this:

<h2><span><img src="plus.gif"/></span> text here </h2>

As others have also mentioned, the SPAN is possibly redundant.

id just make the img part of the background

#accordion h2 img{

    position:absolute;
    top:0;   /* you might need to play with #    */
    right:0;    /* you might need to play with #    */
}

#accordion h2{

    position:relative;
}

i would also just use JqueryUI's no-theme accordion instead, as it has support for open/active/inactive states/classes.

http://jqueryui.com/demos/accordion/