0

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?

5
Contributors
5
Replies
6
Views
9 Years
Discussion Span
Last Post by MidiMagic
0

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

0

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]-->>
0

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

0

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.

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.