Jump to content

Weird Css Border Issue On Firefox


Fireice
 Share

Recommended Posts

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 by Fireice
Link to comment
Share on other sites

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 by thescientist
Link to comment
Share on other sites

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 by Ingolme
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...