Menu
Hello
I have a layout in the works that shows up perfectly in FF but is giving me headaches in IE.
Other than the non-existing “alt” tags, both css and html have been checked in W3C validator.
Take a gander at the code and show me some code that will be consistant in most browsers.
BIG humble thanks in advance!
~frankie
CSS:
[CODE]
* {
border : 0;
margin : 0;
padding : 0;
}
body {
margin-top : 20px;
padding : 0;
background-color : #ccc;
font-family : Arial, Helvetica, sans-serif;
font-size : 11px;
color : #000000;
background-image : url(images/BG.gif);
background-repeat : repeat-x;
}
#container {
width : 800px;
margin : 0 auto;
}
#top {
background : url(images/top.gif) no-repeat;
height : 37px;
width : 800px;
margin : 0;
}
#banner img {
margin-top : -10px;
margin-left : 20px;
border : none;
}
#content {
background-image : url(images/middle1.gif);
background-repeat : repeat-y;
width : 800px;
margin : 0;
float : left;
}
#nav {
height : 150px;
width : 150px;
text-align : left;
list-style : none;
padding : 0;
}
#nav li {
margin-bottom : 10px;
}
#nav a {
height : 50px;
line-height : 10px;
text-decoration : none;
font-weight : bold;
color : #669900;
margin-left : 50px;
margin-top : 50px;
}
#nav a:hover {
color : #cccccc;
}
#leftcontent {
width : 150px;
font-size : 15px;
margin-top : 150px;
margin-right : 0;
margin-bottom : 0;
margin-left : 0;
float : left;
}
#centercontent {
float : left;
voice-family : “”;}””;
voice-family : inherit;
margin-top : 60px;
margin-left : 0;
width : 400px;
overflow : auto;
}
#centercontent img {
height : 72px;
margin-top : 0;
margin-right : 5px;
margin-bottom : 5px;
margin-left : 0;
border : none;
float : left;
}
#rightcontent {
width : 162px;
background-image : url(images/bgImage.gif);
background-repeat : no-repeat;
background-position : right 0%;
height : 325px;
float : right;
margin-top : 60px;
margin-right : 0;
margin-bottom : 0;
margin-left : 0;
}
#banner {
background : url(images/mantra.gif) no-repeat right 0%;
voice-family : “”;}””;
margin-top : 0;
margin-right : 20px;
margin-bottom : 0;
margin-left : 0;
voice-family : inherit;
}
html > body #banner {
height : 39px;
}
h1 {
font-size : 14px;
margin : 0;
}
#banner h1 {
font-size : 1px;
padding : 10px 10px 0;
margin : 0;
color : #ffffff;
}
#rightcontent p {
font-size : 10px;
}
.imgText {
text-align : left;
}
input {
border : 1px solid #66cc00;
background-color : #ffffff;
}
textarea {
height : 85px;
width : 330px;
border : 1px solid #66cc00;
}
.submit {
height : 30px;
width : 30px;
background-image : url(images/goButton.gif);
border : none;
float : left;
margin : 10px 0 0;
font-size : 0;
}
.phone {
margin-top : 0;
margin-right : 0;
margin-bottom : 0;
margin-left : 3px;
}
.post {
text-align : center;
vertical-align : middle;
}
.footer {
font-size : 1em;
color : #999999;
text-align : center;
margin : 10px 0 0;
}
#footer {
background-image : url(images/bottom.gif);
height : 35px;
width : 800px;
margin : 0;
float : left;
}
.client {
margin : 10px 0 0;
float : left;
}
.client a {
font-size : 18px;
font-weight : bold;
color : #669900;
margin-top : 10px;
text-decoration : none;
}
.client a:hover {
color : #cccccc;
text-decoration : none;
}
HTML:
[CODE]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>A Graphic Design Service by Green Eye Creations – Quality Graphic Design
and Web Design</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
<link rel=”shortcut icon” href=”images/favicon.ico” />
</head>
<body>
<div id=”container”>
<div id=”top”></div>
<div id=”content”>
<div id=”banner”>
<h1><img src=”images/logo.gif” width=”224″ height=”142 ” border=”0″ usemap=”#Map” />
<map name=”Map” id=”Map”>
<area shape=”circle” coords=”45,46,45″ href=”index.php” />
<area shape=”rect” coords=”94,40,223,55″ href=”index.php” />
</map>
green eye creations – quality graphic design</h1>
</div>
<div id=”leftcontent”>
<ul id=”nav”>
<li><a href=”index.php”>home</a></li>
<li><a href=”services.php”>services</a></li>
<li><a href=”clients.php”>clients</a></li>
<li><a href=”contact.php”>contact</a></li>
</ul>
</div>
<div id=”centercontent”>
<h1>Our Focus</h1>
All projects of our most recent clients are listed below.
<div class=”client”><a href=”#”><img src=”images/LMStn.gif” /></a> <a href=”#” class=”imgText”>Laura
Marie Studios</a><br/>
<b>Project:</b><br/>
Web Design and Development<br/>
Online Art Gallery<br/>
Mesa, Arizona<br/>
</div>
<div class=”client”><a href=”#”><img src=”images/TRIPHONICtn.gif” /></a> <a href=”#” class=”imgText”>Triphonic
Productions</a><br/>
<b>Project:</b><br/>
Web/Multimedia Design and Development<br/>
Music Production Studio<br/>
San Francisco, California<br/>
</div>
<div class=”client”><a href=”#”><img src=”images/FFPCtn.gif” /></a> <a href=”#” class=”imgText”>Fur
and Feather Pet Care</a><br/>
<b>Project:</b><br/>
Logo, Web Design and Development, Business Card, Stationary<br/>
Pet Sitters<br/>
Alajuella, Costa Rica<br/>
</div>
<div class=”client”><a href=”#”><img src=”images/DLRtn.gif” /></a> <a href=”#” class=”imgText”>DLR
Studios</a><br/>
<b>Project:</b><br/>
Print Design, Web Design and Development<br/>
Wedding Photo Journalism<br/>
San Francisco, California<br/>
</div>
<div class=”client”><a href=”#”><img src=”images/SCLtn.gif” width=”72″ height=”72″ /></a>
<a href=”#” class=”imgText”>Skin Care by Lilia</a><br/>
<b>Project:</b><br/>
Business Card<br/>
Licensed Aesthetician<br/>
Phoenix, Arizona<br/>
</div>
<div class=”client”><a href=”#”><img src=”images/REFLEXtn.gif” /></a> <a href=”#” class=”imgText”>Reflex</a><br/>
<b>Project:</b><br/>
Print Design, Logo Develpoment, CD Cover Art<br/>
Music and Event Production<br/>
San Francisco, California<br/>
</div>
<div class=”client”><a href=”#”><img src=”images/CYPH3Rtn.gif” /></a> <a href=”#” class=”imgText”>CYPH3R
Collective</a><br/>
<b>Project:</b><br/>
Print Design, CD Cover Art<br/>
Event Production<br/>
San Francisco, California<br/>
</div>
</div>
<div id=”rightcontent”></div>
<div id=”footer”></div>
</div>
<p class=”footer”> Copyright © 2006 – 2007 Green Eye Creations </p>
</div>
</body>
</html>