Member Avatar for mikeandike22

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
  • 133 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Recommended Answers

All 5 Replies

Member Avatar for Suomedia

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

Member Avatar for lio04

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]-->>
Member Avatar for Suomedia

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

Member Avatar for buddylee17

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.

Member Avatar for MidiMagic

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.