Jump to content

[solved]negative Margins Woes


glopal
 Share

Recommended Posts

Solution: Apparently IE will sometimes render whitespace where it shouldnt based on how the tags are organized.This gave me the problem:

<div id="banner"><img src = "images/banner.jpg" alt = "Golden Links Lodge" /><div id = "topmenu">History | Volunteers | Employment | Donations | Contact Us</div></div>

And this fixed it:

<div id="banner"><img src = "images/banner.jpg" alt = "Golden Links Lodge" /><div id = "topmenu">History | Volunteers | Employment | Donations | Contact Us</div></div>

IE is just messed.Here is my div layout for the top of the page:

<body><div id="container"><div id="banner">	<img src = "images/banner.jpg"/>	<div id = "topmenu">	History | Volunteers | Employment | Donations | Contact Us	</div></div>

And here is my banner css:

#banner{	background-image:url('../images/cornerLogo.gif');	background-repeat:no-repeat;	margin:0;	padding:0 0 0 275px;}

So I have the corner logo as the background image, which is 275px wide. As you can see the left padding is also 275px, so the banner.jpg ends up sitting right beside the corner logo. This works fine, in both ff and ie7.Here is my topmenu css:

#topmenu{	height:20px;	position: relative;	padding:0 0.5em 0 0.5em;	margin-top:-22px;	float:right;	background-color:#000097;	vertical-align:middle;	color:#fff;	font-family: Tahoma,Arial,sans-serif; }

So as you might have already noticed, I'm trying to put the topmenu div over the banner image using a negative margin (the extra -2px is for a 2px border in the banner). It sits perfectly in firefox, but in IE it seems to go where ever it wants. With this particular configuration in ie7, it seems to be short by -4px, in other words the negative margin doesn't push it up enough.If I take away the negative margin:In firefox, the div sits perfectly under the image, no gap.In ie7, it has what appears to be about a 4px gap between the image and the div.So where is this gap coming from? I'll give you the rest of my css below.

body{	background-image:url('../images/bgLines.jpg');	background-repeat:repeat-x;	margin: 0;	padding: 0;	background-color:#E8E8E8;	text-align:center;}#fontchanger{	font:100% Arial,san serif;	text-align: center;	float: right;}#fontchanger a{	text-decoration:none;	font:150% Arial,san serif;	color:#000000;}#container{	background-color:#FFF;	background-image:url('../images/navBG.gif');	background-repeat:repeat-y;	margin-left: auto;	margin-right: auto;	margin-top:0.75em;	width:900px;	text-align: left;	border: 2px solid #333;}#banner{	background-image:url('../images/cornerLogo.gif');	background-repeat:no-repeat;	margin:0;	padding:0 0 0 275px;}#topmenu{	height:20px;	position: relative;	padding:0 0.5em 0 0.5em;	margin-top:-22px;	float:right;	background-color:#000097;	vertical-align:middle;	color:#fff;	font-family: Tahoma,Arial,sans-serif; }#content{	padding-top: 1em;	margin: 0 2em 0 200px;}#content p,ul{	margin-top:0.5em;	font-family: Tahoma,Arial,sans-serif; }#content h1,h2,h3,h4{	font-family: Tahoma,Arial,sans-serif; 	color:#FFF;	background-color:#000097;	text-align:left;	margin-bottom:0px;	padding-left:0.3em;}#nav{	background-image:url('navBG.jpg');background-repeat:repeat-y;	float: left;	width: 180px;	margin: 10px;	padding-top: 1em;}#footer {	clear:both;	background:#cc9;	padding: 0.5em;	text-align:right;	border-top: 2px solid #333;}#footer p{	font-family:Tahoma,Geneva,Kalimati,sans-serif;	font-size:0.6em;	color:#202020;}

Edited by glopal
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...