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

Question

Please 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?

Answer 1

Instead of:

#accordion span {
float:right;
}

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

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

Answer 2

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/

Answer 3

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.