Image Screwed Up In Firefox

I just re-launched my indie music blog at www.IndieFiles.com. If you look at it in IE, it looks ok (at least when I checked yesterday). In Firefox however, the search box and button (and rss icon) are all pushed down too far. I'm assuming I screwed something up when playing with the css. Any thoughts on what I might be able to do to get it moved up a bit more in FF w/o screwing it up in IE?

Thanks!

Jenn

 

IE is more chilled out, were as with FF, you have to specify everything, much more of a scricter browser, to fix it, its probably a case of adjusing em's or absolute posting it, depending on how its currently coded.

Could you tell me were <div class="search_field"> is defined as in which stye sheet, and ill take a look.

 

Here's the css for that (hope it's what you meant):

.search_field { 
	text-align: right;
	float: right;
	width: 540px;
	height: 38px;
	background: #464548 url(images/searchbg.gif) no-repeat top right; 
	color: #000;
	clear: both;
	padding: 10px 10px 0 0;
}

Code (markup):

 

IE, wallowing again in ignorance of the specs, collapses the margins of a float element. Firefox, does know the rules, and does collapse the <p>'s margin through the form element, but not on through the floated div's boundary. That puts the form down from the top by the margin of p.

Make

form p {
    margin: 0;
    }

Code (markup):

I leave it as an exercise for the class to determine the offending margin on the icon side.

cheers,

gary

 

Yay! It looks like both areas are all good in both browsers now. Thanks so much for the help.