Multiple issues! FF/chrome padding conflict & FF/IE/Chrome div centering conflict!

[absticles]

Hey there.

Not having the best of days! Just remembered to test my CSS in Firefox and IE and have so many errors.

The first is that the main container div is centred in Chrome but then is shifted more to the left in Firefox and Internet Explorer.

This is the CSS for my container:

#container {
	text-align:center;
	width:782px;	
	margin:0 auto;
	min-height:100%;
   	position:relative;
	padding-bottom:200px;
	overflow:auto;
}

Another issue that I have is that I currently have a div for searching the site. This div is called #search-bar . Within this is a form. For the input#search-terms (where the user types their search terms) I have a background image. When I have a padding-top-3px it works perfectly in chrome but then the image sits well below the search text. When I change it to 9 pixels the opposite happens.

Here is my code:

#search-bar {
	clear:left;
	float:right;
	margin:-80px 6px 0 0;
	line-height:32px;
	width:360px;
	display:inline;
	position:relative;
	line-height:32px;
}





	input#search-terms {
		background-image:url(img/searchbar.png);
		background-repeat:no-repeat;
		background-color:#032745;
		border:none;
		width:190px;
		height:30px;
		color:#999999;
		padding-top:9px;
		padding-left:27px;
		margin-right:-18px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		line-height:32px;
		overflow:hidden;


	}

Hope someone can help!

Abi

[MidiMagic]

You can't set absolute sizes or positions and expect it to work on any computer/browser/screen resolution combinations except the one you developed it on. This means:

- NO pixels.

- NO points.

- NO heights relative to the browser window or document height (no agreement among browsers here)

- NO width or height attribute on the same tag (or style) that has a margin, border, or padding.

- If it doesn't fit, different browsers do different things to try to render it.