CSS Positioning Problems

1

Howdy guys, i’ve got some problems with browser compatability and I was wondering if you could tell me where I’m going wrong?

Firefox displays everything just as I want it to, as does Safari.
IE and Opera however have their own little quirks.

IE seems to be ignoring the margin-top:; for certain elements and Opera has over guessed margin-left:; so everything is slightly off to the right in Opera and all grouped up top on IE.

Here’s a Link to an image of the site in the 4 different browsers.

  1. Firefox
  2. IE
  3. Safari
  4. Opera

The white box in Safari is something i sorted out shortly after taking that screenshot. So if you’ll just ignore that.

Here’s the HTML and CSS, hope you can point me in the right direction.
I’ve not done anything web for some time now :confused:


<!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>The Nuclear Plague</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="Grunge" align="center">
         <div id="Container">
             <div id="Header">
          <a href="index.htm"><img src="Graphics/BTN_Home.jpg" alt="Home" width="198" height="46" /></a><a href="videos.htm"><img src="Graphics/BTN_Videos.jpg" alt="Videos" width="198" height="46" /></a><a href="transcripts.htm"><img src="Graphics/BTN_Transcript.jpg" alt="Transcripts" width="198" height="46" /></a><a href="links.htm"><img src="Graphics/BTN_Links.jpg" alt="Links" width="198" height="46" /></a><a href="contact.htm"><img src="Graphics/BTN_Contact.jpg" alt="Contact Us" width="198" height="46" /></a>
          </div>
          
          <div id="Ribbon">Some Text Goes Here</div>
          
        <div id="Breadcrumb"><a href="index.htm">Index</a> &gt; <a href="Video.htm">Video Information</a> &gt; Video Part 3</div>
            
          <div id="Content">
              <div id="RightFloat"><img src="Graphics/PhotoExample.jpg" alt="Photo Example" />
            <br />
            <span id="PhotoText">Text about Photo</span>              </div>
            
            <p>Here is some Content Text</p>
            <p>More</p>
            <p>More</p>
            <p>More</p>
            <p>More</p>
            <p>g</p>
            <p>g</p>
            <p>g</p>
            <p>g</p>
            <p>g</p>
            <p>g</p>
            <p>&nbsp;</p>
            <p>g</p>
            <p>g</p>
            <p>g</p>
            <p>g</p>
            <p>g</p>
            <p>&nbsp;</p>
            <p>g</p>
            <p>g</p>
            <p>g</p>
            <p>g</p>
            <p>g</p>
            <p>&nbsp;</p>
            <p>g</p>
          </div>
            
          <div id="Footer">Here is some Footer Text</div>
      </div>
  </div>
</body>

</html>



@charset "utf-8";
/* CSS Document */

* { margin:0; padding:0; }

body{
    background-image: url(Graphics/BG_Stripes.jpg);
    background-repeat: repeat;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
}

a:link{
    color: #ECEC02;
}

a:visited{
    color: #52960C;
}

img{  
    border-style: none;
}

#Ribbon{
    height: 120px;
    position: absolute;
    top: 50px;
    left: 0px;
    width: 100%;
    background-image: url(Graphics/Title-Bar-Repeater4.png);
    font-size: 36px;
    color: #252525;
    padding-top: 80px;
}

#Grunge{
    background-image:url(Graphics/Content-Border-Repeater2.png);
    background-repeat: repeat-y;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

#Container{
    width: 1000px;
    margin-left: 120px;
    margin-right: auto;
}

#Header{
    background-image: url();
    background-color: #252525;
    background-repeat: repeat-x;
    height: 46px;
    padding: 2px;
}

#Breadcrumb{
    background-color: #666666;
    border-width: 2px;
    height: 20px;
    margin-top: 180px;
    text-align: left;
    padding: 2px;
    background-image: url();
    background-repeat: repeat-x;
}

#Content{
    background-color: #252525;
    background-image: url();
    background-repeat: repeat-x;
    border-width: 2px;
    margin-top: 10px;
    text-align: left;
    padding: 2px;
}

#RightFloat{
    width: 270px;
    height: 265px;
    background-color: #FFFFFF;
    float: right;
    margin-right: 10px;
    margin-top: 10px;
    padding-top: 10px;
    text-align: center;
    color: #252525;
}

#PhotoText{
    position: relative;
    top: 5px;
}

#Footer{
    background-color: #252525;
    background-image: url();
    border-width: 2px;
    margin-top: 10px;
    height: 50px;
}

Edit: Fixed all but my IE compatability problems now.
There’s a surprise… :confused: