Weird Css Border Issue On Firefox

[Fireice]

Editing div's border seems to move the background image, here is the css

	body {		padding: 0;		margin: 0;		background-color: #fff2f2;		font:normal 11px Verdana,Arial,sans-serif;	}		div#logo {		position: relative;		padding: 0;		margin: 0px auto 0px auto; 		width: 1004px;		/* border: 1px solid #fff2f2; */		background-image: url('logo.gif');		background-position: top center;		background-repeat: no-repeat;	}		div#main {		background-color: #ffe9e5;		position: relative;		width: 970px;		border: 2px solid #731010;		margin: 50px auto 0px auto; 		}

The background image is in a centred div (it stops it from moving around when the window is resized).Inside there is a main div containing the whole site.This is the correct rendering, works in IE (for a change), and in FF with 1px border.Render 1But when I remove the border on the logo div I get this in FF:Render 2An invisible border is a work-around, but I would like to solve the issue if this isn't a browser bug.

Edited September 29, 2009 by Fireice

[thescientist]

i don't think you need div#main in your CSS....i think it should just be #main, and then <div id="main"> in your HTML. could change things maybe.

Edited September 29, 2009 by thescientist

[Ingolme]

i don't think you need div#main in your CSS....i think it should just be #main, and then <div id="main"> in your HTML. could change things maybe.

div#main is correct. It refers to any <div> element with an id of "main". It would not be the cause of any CSS problems.The solution to the problem is to assign overflow: auto or overflow: hidden to the #logo div. Edited September 29, 2009 by Ingolme

[Fireice]

@thescientist, I misunderstood your post.

Edited September 29, 2009 by Fireice

[thescientist]

@thescientist, I misunderstood your post.

no worries, I didn't get a chance to read it and Ingolme shot me down, so....lol....