3 replies [Last post]
Cipes
Cipes's picture
Offline
Regular
Montreal
Last seen: 13 years 44 weeks ago
Montreal
Joined: 2008-10-01
Posts: 18
Points: 0

Hi Guys, I've got a simple layout for a client (all validated, except the copyright symbol in the footer, whats the XHTML proper way to create a copyright Symbol?)
But apparently there's some browsers that might be having a problem with it. I've tested it in FF, IE7 and Safari. If anyone see anything funny happening, if you could let me know which browser that'd be great. Also and tips on making it cleaner, more efficient etc.. would be welcome too.

Thanks! Have a good one.

www.carpediemagendas.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Carpe Diem Agendas</title>
<link href="carpe.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#wrapper {
	margin:0;
	padding:0;
	width:932px;
	height:800px;
	margin-left:auto;
	margin-right:auto;
	background-color:#A6A5A0;
}
.style1 {font-size: 18px}
-->
</style>
</head>
 
<body>
<div id="wrapper">
<h1>Carpe Diem Agendas, Educational Planners</h1>
<div id="content">
<ul id="navigation">
	<li><a href="mission.html">Mission</a></li>
	<li><a href="products.html">Products</a></li>
	<li><a href="quote.html">Request a Quote</a></li>
	<li><a href="contact.html">Contact Us</a></li>
	<li><a href="index.html">Home</a></li>
</ul>
<div id="shadow"></div>
</div>
 
<div id="leftContent">
<div class="image">
	<img src="imgs/sundial.jpg" alt="" />
</div>
<div class="leftHeading"> W<span class="style1">ELCOME</span> P<span class="style1">RODUCTS</span> </div>
<ul id="products">
	<li><a href="apprentice.html">- The Apprentice</a></li>
	<li><a href="visionary.html">- The Visionary</a></li>
</ul>
</div>
 
<div id="rightContent">
	<span class="rightHeading">W<span class="style1">ELCOME</span></span>
	<p><em>Carpe Diem Agendas</em> is a full service publishing company producing  time management 
	tools for students to help them navigate the most critical and transitional years of 
	college and university through to career and work. 
Our products are designed exclusively for this purpose.  Our agendas assist 
students succeed with planning, organizing and scheduling the busiest most intensive period in 
their lives from youth to adulthood.<br/> 
Our products are fully customizable, beautifully crafted, unique momentos   which 
reflects the culture, vision and goals of your academic institution.</p>
<center>
<blockquote>
  <p>There is no time like the present to &quot;seize the moment&quot; 
every moment. CARPE DIEM!</p>
<p>The best students know that organization is more than        
half the battle in academic success.</p>
 
<p class="source">- Carpe Diem Agendas</p></blockquote></center>
</div>
 
<div id="footer"><p>
© Carpe Diem Agendas 2008<br />
All Rights Reserved.</p>
</div>
</div>
</body>
</html>

CSS

/* CSS Document */
body {
	margin:0;
	padding:0;
	background-color:#003333;
}
 
 
h1{
	margin:0;
	padding:0;
	width:932px;
	height:162px;
	background-image:url(imgsheader.jpg);
	text-indent:-9999px;
	margin-top:20px;
	}
p {
	text-indent:10px;
	padding:0px 25px 25px 25px;
	font-family: Arial, Helvetica, sans-serif;
 
}
#content {
	margin:0;
	padding:0;
	position:relative;
	width:932px;
}
 
#leftContent {
	float:left;
	width:300px;
	margin:20px;
}
#rightContent {
	float:right;
	width:590px;
	margin-top:30px;
	padding-top:20px;
}
 
ul#navigation{
	margin-left:0;
	padding-left:0;
	list-style-type:none;
	position:absolute;
	margin-top:0;
	background:#5F493B;
	width:100%;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	}
 
ul#navigation li{
	display:inline;
}
 
ul#navigation a{
	display:block;
	float:left;
	padding: .2em 2em;
	color:#FFF;
	background:#5F493B;
	text-decoration:none;
	font-size:14px;
	font-family: Arial, Helvetica, sans-serif;
 
}
 
ul#navigation a:hover{
	background:#5D7183;
 
}
 
#shadow{
	margin:0;
	padding:0;
	width:100%;
	height:10px;
	background-image:url(imgs/shadow.jpg);
	background-repeat:repeat-x;
	position:absolute;
	margin-top:22px;
}
#footer {
	clear:both;
    margin-top:20px;
	font-size:10px;
	width:100%;
	text-align:center;
}
 
 
div.image {
	float:left;
	width:245px;
	margin: 25px 20px 20px 10px;
	display:inline;
	padding:10px;
	border: 1px #FFF solid;
}
 
div.image img {
 
}
.leftHeading {
	margin-left:12px;
	font:Georgia, "Times New Roman", Times, serif;
	font-size:24px;
	font-weight:300;
	color:black;
	text-indent:15px;
	display:block;
	width:240px;
	background-color:#A6A5A0;
	border-bottom: 1px white solid;
}
.rightHeading {
	padding-top:20px;
	margin-left:12px;
	font:Georgia, "Times New Roman", Times, serif;
	font-size:24px;
	font-weight:300;
	color:black;
	text-indent:15px;
}
 
ul#products {
	margin-left:25px;
	padding-left:0;
	margin-left:25px;
	color:#666;
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	list-style-type:none;
}
ul#products li {
	padding:5px;
}
ul#products a {
	text-decoration:none;
	color:#666;
}
ul#products a:hover {
	color:#333;
}
blockquote {
	margin: 1em 0;
	border: 1px #FFF solid;
	padding-top:30px;
	width:450px;
	background:url(imgs/quotes.png) 20px 20px no-repeat;
}
blockquote p {
	padding: 0 70px;
	font-style:italic;
}
blockquote p.source {
	background:url(imgs/quotes2.png) no-repeat 100% 100%;
	padding-bottom:30px;
	margin: 0 20px 20px 0;
	text-align:right;
	font-style:italic;
}	
 

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 7 years 45 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

For the copyright

For the copyright symbol:
&copy;

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 3 years 39 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

<div class="image"> <img

<div class="image">
	<img src="imgs/sundial.jpg" alt="" />
</div>

You probably don't need this in a div just add a class or id to img..Also suggest making the box with the quote a slightly lighter background color than the rest of the page.

Cipes
Cipes's picture
Offline
Regular
Montreal
Last seen: 13 years 44 weeks ago
Montreal
Joined: 2008-10-01
Posts: 18
Points: 0

Thanks for the suggestions

Thanks for the suggestions fella's. The cleaner the better.
Will do..