4 replies [Last post]
Nimby
Offline
newbie
Michigan
Last seen: 12 years 12 weeks ago
Michigan
Joined: 2009-03-30
Posts: 6
Points: 0

Hi I have been following this tutorial http://veerle.duoh.com/index.php/blog/comments/designing_a_css_based_template_part_i/

I'm stuck at on part 6 http://veerle.duoh.com/index.php/blog/comments/designing_a_css_based_template_part_vi/

When I add the text to the main content div in

tags it breaks in firefox and safari.

Here is my code the css is internal for the sake of the tutorial. Also I know the design sucks I wasn't trying to make it look pretty.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html>
<head>
	<title>Blog</title>
 
	<style type="text/css">
 
		body {
			background: #F7F7F6 url("images/background.jpg") repeat-y 50% 0;
		   	background-attachment: fixed;
		   	margin: 0;
		   	padding: 0;
		   	text-align: center;
			}
 
		#container {
		   	margin: 0px auto;
		   	text-align: left;
		   	width: 700px;
			}
 
		h1 {
		   	width: 700px;
		   	height: 150px;
		   	text-indent: -9999px;
		   	background: url(images/header.jpg);
		   	margin: 0;
		   	padding: 0;
			}
 
		#navcontainer ul {
			margin: 0;
			padding: 0;
			list-style-type: none;
			font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;
			text-indent: 20px;
			letter-spacing: 1px;
			border-bottom: 1px solid #fff;
			}
 
		#navcontainer a {
			display: block;
			width: 178px;
			height: 22px;
						}
 
		#navcontainer a:link, #navcontainer a:visited {
			background: url(images/button.jpg);
			color: #5C604D;
			text-decoration: none;
			}
 
		#navcontainer a:hover {
			background: url(images/rollover.jpg);
			color: #A5003B;
			text-decoration: none;
			}
 
		#navcontainer li a#current {
			background: url(images/rollover.jpg);
 			color: #A5003B;
   			text-decoration: none;
   			}
 
		#content {
			width: 487x;
			float: left;
			padding-top: 15px;
			padding-right: 0;
			padding-bottom: 10px;
			padding-left: 20px;
   			}
 
   		#left {
   			width: 178px;
   			float: left;
   			}
 
		#content h2 {
   			font: normal 18px Georgia, Times New Roman, Times, serif;
   			color: #80866A;
   			background: transparent url(images/bullet_title.gif) no-repeat;
   			width: 454px;
  			padding: 0 0 0 30px;
   			margin: 0;
   			}
 
		.text {
   			font: 11px/18px Verdana, Arial, Helvetica, sans-serif;
			color: #5B604C;
			margin-bottom: 10px;
   			}
 
		</style>
 
</head>
 
<body>
<div id="container">
 
	<h1 id="header">Blog Title Image</h1>
 
<div id="left">
 
	<div id="navcontainer">
 
		<ul>
    	<li><a href="#" id="current">Home</a></li>
    	<li><a href="#">About me</a></li>
    	<li><a href="#">Bags</a></li>
    	<li><a href="#">Order</a></li>
    	<li><a href="#">Contact</a></li>
    	</ul>
 
	</div>
 
</div>	
 
	<div id="content">
 
		<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id tortor dictum nunc semper auctor. Donec tristique laoreet lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse faucibus, mi et blandit faucibus, magna diam fermentum eros, ut hendrerit ipsum ligula rhoncus dui. Aenean mi quam, viverra nec, gravida sit amet, pulvinar id, felis. Morbi ut neque. Suspendisse nec arcu. Aliquam dapibus. Nunc sagittis, eros nec ultricies congue, purus purus rutrum ante, cursus semper odio odio id enim. Proin imperdiet eros quis velit semper tempus. In sodales eros vitae ipsum. Donec nisl. </p>
 
	</div>
 
</div>
 
</body>
</html>

Nimby
Offline
newbie
Michigan
Last seen: 12 years 12 weeks ago
Michigan
Joined: 2009-03-30
Posts: 6
Points: 0

oh

It was a padding issue I forgot that padding is the space outside the container

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 31 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Nimby wrote:It was a padding

Nimby wrote:

It was a padding issue I forgot that padding is the space outside the container

No it isn't. Padding is the space between the border and the text. Margins are outside.

However both margins and padding increase the total size of an element, unless you are looking in IE5.5 or below, or IE6 in "quirks" mode, where it pretends to be IE5.

These latter Microsoft designed browsers violate the standard and instead of expanding the total size, reduce the available content area without increasing the size of the element. That is wrong and against the standard. This is the main reason why you must use the proper standards mode triggering doctype declaration for IE6.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Nimby
Offline
newbie
Michigan
Last seen: 12 years 12 weeks ago
Michigan
Joined: 2009-03-30
Posts: 6
Points: 0

ahhh

I see so then the content doesn't wrap differently to maintain the

tag's stated size.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 31 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Nimby wrote:I see so then

Nimby wrote:

I see so then the content doesn't wrap differently to maintain the

tag's stated size.

Well, if I understand what you are saying, (and I'm not entirely sure I do) the answer will be no it doesn't unless you are allowing IE6 to go into it's default "quirks" mode (well actually they call it "compatability" mode if I recall rightly) by using the proper standards triggering doctype declaration. If IE6 is doing this then the first thing you have to do is get the proper doctype declaration in your document.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.