IE CSS problem. >.< HLEP!!!

hey guys.

i've got a problem with IE (i so hate IE). i've got a div with some text and a drop down menu. the text is floated to left and drop down menu to the right. the drop down menu is not in place. works fine on firefox, but not in IE!

heres the code.

CSS
.listings_header {
margin-top: 4px ;
margin-bottom: 4px ;
background: transparent url(../images/black_bar1.png) no-repeat;
padding: 4px ;
padding-left: 5px ;
padding-top: 5px ;
border: none ;
color: white ;
text-align: left ;
height: 25px ;
margin-left: 1px ;
font-size: 11pt ;
width: 512px ;
}

HTML
<div class='listings_header'>
<span style='font-weight: bold display:inline;'>&raquo;
Monday hot spots in All
<select class="sel" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</span>
</div>


check the image attached to see wat the problem is on IE. it displays fine on firefox.

PLZ HELP CSS GURUS!!

srizzel

 

<span style='font-weight: bold display:inline;'>

Code (markup):

Could it be the error in there? You never know with browsers, so always run your code through a validator to catch typos.

Further, when having spacing issues like this, just Give Absolutely Everyone Ugly Background Colours. Then you usually can see who's pushing who around.

A select dropdown isn't a menu btw, you're confuzling me.

 

Well...

1) If that's a heading, why aren't you using a heading tag.

2) is that a label for the select, or is that select going without a label.

3) where's the CSS you are using to position the SELECT.

4) you've got 3 code elements for two actual content elements. Lose the Span.

5) you're use of transparent with the text being white means your text won't be visible for users who have CSS turned off.

I'm taking a wild guess, but I have the suspicion your code SHOULD read something like:

<h3>
	<select class="sel" name="cars">
		<option value="volvo">Volvo</option>
		<option value="saab">Saab</option>
		<option value="fiat">Fiat</option>
		<option value="audi">Audi</option>
	</select>
	&raquo; Monday hot spots in All 
</h3>

Code (markup):

With css thus:

.listingForm h3 {
	overflow:hidden; /* wrap floats */
	/* 
		remember to subtract padding from width - this also
		trips haslayout wrapping floats in legacy IE
	*/
	width:504px; 
	/* 
		we will NOT declare height since that is prone to breakage
		with the padding and positioning, instead we will just add
		up our padding of 4px top, 4px bottom, and 17px line-height
		to get our desired 25px height. This also means the layout
		will still work should font metrics or design changes wrap
		lines.
	*/
	margin:4px 1px;
	padding:4px 5px;
	/* 
		do NOT use PT for your font size with a fixed height background
		inside a fixed height container, that will	break the layout on
		large font/120dpi systems (who are the target audience for using
		PT in the first place!). 
		
		Also redeclare the ENTIRE property just to be sure, 
		NEVER trust the default line-height!
	*/
	font:bold 15px/17px arial,helvetica,sans-serif;
	/* provi
	background:#000 url(images/blackBar1.png) 0 0 no-repeat;
}

.listingForm h3 select {
	float:right;
}

Code (markup):

That assumes your wrapping form is called .listingForm - you'll want to change that to match your page.

Really though, I'd have to see the whole page to tell you for certain - or at least see the code you are using for the rest of your positioning...

Wait, I might see the cause in something I didn't do on that rewrite - you are declaring height:25px with top and bottom padding - that makes the entire element 35px tall, your background-image is only 25px tall.