Basically I coded this site and it looks exactly how I want it too in Firefox but it looks like shit in IE more specifically IE 6, 7 isnt bad. The font is rendering odd and items are not in the same location.

here is my html file

<!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=utf-8" />
   <title>Caffeinated Customs</title>
   <style type="text/css">
    <!--
	 @import url(print.css) print;
	-->
   </style>
   <link rel="stylesheet" href="main.css" type="text/css" />
   <!--[if IE]>
    <style type="text/css">
     h1{margin-left:0;}
     #header{margin-top:10px;margin-left:50px;width:550px;}
     .title{top:15px;)
     .nav{margin-top:35px;}
    </style>
   <![endif]-->
  </head>
  <body>
   <!--Wrap-->
   <div id="wrapper">
    
    <div id="header"><!--head-->
     <div class="title">
      <h1>Caffeinated Customs</h1>
      <h2>Custom Affordable Web Design</h2>
     </div>
     
     <div class="nav">
      <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Services</a></li>
       <li><a href="#">Porfolio</a></li>
       <li><a href="#">Contact Us</a></li>
      </ul>
     </div>
    </div><!--/head-->
     
    <div id="contentw"><!--contentw-->
     <h3>ABOUT</h3>
     <div id="content">
      <h4>About <span style="font-family:'Times New Roman', Times, serif;font-style:italic;font-weight:600;">Caffeinated Customs</span></h4>
      <p>Content</p>
     </div>
    </div><!--/contentw-->
     
   </div><!--/Wrap-->
  </body>
 </html>

and My CSS file

/* CSS Document */
	 body{
	  background:#f0c690 url(cc_bg.jpg) repeat-x;
	 }
	 h1{
	  font-family:"Times New Roman", Times, serif;
	  font-style:italic;
	  color:#452401;
	  font-size:37.41px;
	  font-weight:300;
	  letter-spacing:-3px;
	  margin-left:-10px;
	 }
	 h2{
	  font-family:"Times New Roman", Times, serif;
	  font-style:italic;
	  color:#000;
	  font-size:18.71px;
	  letter-spacing:0px;
	  font-weight:600;
	  margin-top:-25px;
	 }
	 h3{
	  font-family:Arial, Helvetica, sans-serif;
	  font-size:24px;
	  font-weight:400;
	  color:#452401;
	  }
	 #header{
	  width:500px;
	  background:url(cc_nav.gif) left top no-repeat;
	  position:fixed;
	  left:50px;
	  top:50px;
	 }
	 .title{
	  position:relative;
	  left:-20px;
	  top:-15px;
	 }
	 .nav{
	  width:214px;
	  height:200px;
	  background-color:#dfb782;
	  margin-left:32px;
	  border:1px solid #e5bf8c;
	  border-top:0;
	 }
	 .nav li{
	  list-style-type:none;
	  padding: 2px 0 2px 0;
	  margin-left:-41px;
	 }
	 .nav li:hover{
	  display:block;
	  width:214px;
	  height:28px;
	  border:1px solid #f2c390;
	  background-color:#c89660;
	 }
	 .nav li a{
	  color:#452401;
	  font-family:Arial, Helvetica, sans-serif;
	  font-style:italic;
	  font-size:24px;
	  text-decoration:none;
	  padding-left:41px;
	 }
	 #contentw{
	  width:800px;
	  height:auto;
	  position:absolute;
	  left:450px;
	  top:75px;
	 }
	 #content{
	  font-family:Arial, Helvetica, sans-serif;
	  border-top:#c89660 4px solid;
	  margin-top:-10px;
	  margin-left:10px;
	 }
	 #content h4{
	  font-size:24px;
	  color:#bf9867;
	  margin-top:3px;
	 }
	 #content p{
	  width:650px;
	  background-color:#dfb782;
	  padding:15px;
	  border:1px solid #e5bf8c;
	  margin-top:-10px;
	  font-size:14px;
	  font-weight:600;
	  line-height:20px;
	  font-family:Arial, Helvetica, sans-serif;
	  }

the dimensions of cc_nav.gif is 325x117
any insight?

The fonts look ok to me in IE6 (look in Safari!!! ekk!). You can add a little margin (or anything else you want) where needed for IE6 like this:

.nav{
	  width:214px;
	  height:200px;
	  background-color:#dfb782;
	  margin-left:32px;
	  border:1px solid #e5bf8c;
	  border-top:0;
	  _margin-top:40px;
	 }

Matti Ressler
Suomedia

But tags "_anything:" for IE are not valid. I would solve this problem with two css files, if is with one really impossible.

<!--[if IE6]>
<style type="text/css">
@import "styleie6.css";
</style>
<![endif]-->>

But tags "_anything:" for IE are not valid.

So? They are completely ignored by other browsers and do not cause one little problem. While valid page structure is a grail worth pursuing, valid style sheets are not, not one little bit.


Matti Ressler
Suomedia

Have a look at this. It explains exactly why things look different depending on the browser and what you can do to make things look more cross browser consistent.

I see you have size styles (width, height) and surrounding styles (margin, border, padding) in the same classes and tags.

If you want cross-browser compatibility, do not do this. Make separate nested tags for each kind.

FF puts the surrounding styles OUTSIDE the defined sizes. IE crams them INSIDE.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.