Margin / Padding Issues from a CSS newbie 3

[rexolio2008]

I'm still learning CSS and I've ran into some margin/padding issues that I can't figure out for the following page:

http://www.rexolio.com/sites/sunshineartist/

In IE7, everything looks fine. In FF3 and Safari, it does not.

Specifically, there is too much space between div.slogan and div.content. In IE, the white background of #content begins just underneath the sun, which is how I want it. In FF and Safari, it's further down. Here's the CSS:

body { 
	background-color:#040300;
	background-image:url('../images/bg-page.jpg');
	background-repeat:repeat-x;	
	background-position:top center; 
	font-family:Trebuchet MS, Verdana, Helvetica, sans-serif;	
	font-size:14px;
	color:#000;
	text-align:center;
}

p {
	font-family:Trebuchet MS, Verdana, Helvetica, sans-serif;	
	font-size:14px;
	color:#000;
	text-align:left;
}

#wrapper {
	width:930px;
	margin: 0 auto;
	padding:0px;
	text-align:left;
	overflow: hidden;
}

#wrapper #logo {
	float:left;
	width:330px;
	height:110px;
}

#wrapper #topad {
	width:600px;
	height:110px;
	float:right;
	padding-top:25px;
	text-align:center;
}

#wrapper #slogan {
	clear:left;
	float:left;
	width:930px;
	height:54px;
}

#wrapper #content {
	clear:left;
	float:left;
	width:930px;
	margin:0px;
	padding:15px;
	background-color:#fff;
}



<div id="wrapper">
	<div id="logo"><a href="index.asp"><img src="images/space.gif" width="315" height="110" alt="Sunshine Artist" /></a></div>
	<div id="topad"><a href="#"><img src="ads/temp468x60.gif" width="468" height="60" alt="" /></a></div>
	<div id="slogan"></div>
	<div id="content">..... abbreviated

Additionally, at the bottom there are 3 div's side by side separated by a dotted divider. In IE, it looks fine - there is a 15px border around #bottom. But in FF and S, the right side is too thin - something isn't right. Here's the code for that:

#bottom {
	clear:both;
	float:left;
	width:900px;
	height:82px;
	background-color:#716914;
	padding:5px;
	overflow:hidden;

}
	
	#bottom img {
		margin:5px 10px 5px 5px;
	}
	

	#bottom #section1 {
		clear:both;
		float:left;
		width:315px;
		height:82px;
		padding-left:5px;
		background-image:url('../images/icon_divider.png');
		background-repeat:repeat-y;	
		background-position:right center; 
		display:block;
	}
	
		#section1 #section1content {
			float:left;
			width:290px;
		}
			
	
	#bottom #section3 {
		float:right;
		width:285px;
		height:82px;
		padding:0px 5px;
		display:block;
	}
	
	#bottom #section2 {
		float:left;
		width:auto;
		height:82px;
		padding-left:5px;
		background-image:url('../images/icon_divider.png');
		background-repeat:repeat-y;	
		background-position:right center; 
		display:block;
	}
	
		#section2 #section2content {
			float:left;
			width:280px;
		}



<div id="bottom">
	<div id="section1">
		<div id="section1content"><a href="#"><img src="images/icon_fastaudit.png" alt="Art &amp; Craft Show Audits" align="left" /></a><h3>FastAudit</h3><br/>
			<p><a href="#">Rate a show or festival. Let our readers know about your experience with an event.</a></p>
		</div>
	</div>
	<div id="section3"><a href="#"><img src="images/icon_subscribers-only.png" alt="Subscribers Only" align="left"></a><h3>Subscribers Only</h3>
		<p><a href="#">Access article archives, forums and show promoter information, including applications.</a></p>
	</div>
	<div id="section2">
		<div id="section2content"><a href="#"><img src="images/icon_subscribe.png" alt="Subscribe to Sunshine Artist today" align="left" /></a><h3>Subscribe</h3>
			<p><a href="#">Receive monthly issues of America's premier art festival &amp; show magazine.</a></p>
		</div>
	</div>
</div>

Appreciate any input!

 

[BillyRayPreachersSon]

For your first problem, you can get a level playing field by removing the float from #slogan. Given those top 3 containers only hold images, why not absolutely position them, as they've no real need to scale. That would avoid any need for floating.

Your second problem is that #wrapper (930px) isn't wide enough to fit #content and its padding (930px + 30px == 960px - a shortfall of 30px).

Hope this helps,
Dan




Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[rexolio2008]

Thanks, Dan. I guess I was misinterpreting what padding actually does. I thought Margins pushed space AROUND the object and Padding added padding between the object and it's contents. So in my thinking, #content at 930 pixels with a 15px padding would mean that all of the content within #content would have 900px worth of space.

 

[vacunita]

Thanks, Dan. I guess I was misinterpreting what padding actually does. I thought Margins pushed space AROUND the object and Padding added padding between the object and it's contents. So in my thinking, #content at 930 pixels with a 15px padding would mean that all of the content within #content would have 900px worth of space.

Unfortunately no. IE mistakenly does that by including the padding in the overall dimensions of the element.

However the rest of the browsers which interpret it correctly add 15 pix around the element.

So a div that is 930 pix wide and has a padding of 15px on each side ends up being 960px in width.
The content is still only 930px wide.

In other words padding, margin and border all add to the dimensions of the element. so a div that is 900px wide and has a 2px border plus 15px padding plus 15px margin ends up being 964px wide. However its contents will only be 900 pix wide.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[rexolio2008]

In other words padding, margin and border all add to the dimensions of the element. so a div that is 900px wide and has a 2px border plus 15px padding plus 15px margin ends up being 964px wide. However its contents will only be 900 pix wide.

Boy, do I feel like a doofus, but that makes SO much since now when I thing about other issues I have.

So if IE misinterprets it, then what happens in IE when I correct everything so it appears correctly in FF and S?

I know sometimes you have a separate IE style sheet to fix some IE issues, but this seems like a pretty big issue if it's going to incorrectly size everything.

 

[rexolio2008]

So it's starting to make a little more sense now. I've edited all of the width's and it's looking correct in ALL browsers now. However, it seems that adding the padding and margins to the total dimensions doesn't really apply to height. I have a div that is 250 pixels high with a 15px bottom margin. I changed the height to 265 and made too much space below the object in all browsers. When I put it back the way it was, the margin was correct! Why is that?

And actually, everything looks correct in all browsers now except for those bottom 3 elements in IE... the 3rd element (subscribers only) has too much white space to the right, and too much padding after the divider:

http://www.rexolio.com/sites/sunshineartist/

 

[Kirsle]

On the topic of padding, a little trick I do sometimes when I want to have padding on the inside of a div without it increasing the width of the div (and making it look the same in all browsers), is to embed another div inside and don't give that div an explicit width. Divs normally stretch to as wide as their parent container will allow, and if you only add padding then it will shrink a lil bit but not push the parent container any bigger.

Something like

<div style="width: 900px; border: 1px solid red">
<div style="padding: 10px">
content goes right here
</div>
</div>

-------------
Cuvou.com | My personal homepage

perl -e '$|=$i=1;print" oo\n<|>\n_|_";x:sleep$|;print"\b",$i++%2?"/":"_";goto x;'

 

[Vragabond]

The first thing you should do is add a complete and valid doctype to the page. That will make all clients render in (near) standards mode and change IE's box model to the standards one.

Do something about world cancer today: Comprehensive cancer control information at PACT

 

[rexolio2008]

You guys all rock!!! Between making the changes to the padding and div width's and adding the DOCTYPE (totally forgot) it looks perfect in all browsers!!!

 

[vacunita]

Sorry i did not come back tot his sooner, but yes, Vrag nailed it a complete and valid Doctype should be the first thing to have in a website.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.