CSS Isue with FireFox

programming web dev
1

Hi everybody,

i am creating a website for myself, the problem i’m having is trying to keep the look consistent with other browsers i.e essentially ensure that my boxes are the same on IE. When i adjust the code the two boxes look fine on IE which is how i want them, but on FF, they are not positioned how i want them to be.

If adjust the ‘top’ and ‘left’ and ‘right’ attributes for FF, it will affect the look on IE. What exactly must i do to ensure that my 2 boxes look the same on FF to make sure that there is a visual consistency?

The code is very simple.


 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <title>Home Page V1</title>
<link rel="stylesheet" type="text/css" href="homepage_V1.css" />
</head>
<body>
    <div class="container">
    <div class="header" align="center">
        <h1> WELCOME TO THE HOME PAGE </h1>
        
    </div>
 
    <div class="nav">
        <ul>
            <li><a href="#Home"> Home </a></li>
            <li><a href="#Contact"> Contact </a></li>
            <li><a href="#News"> News </a></li>
            <li><a href="#About"> About </a></li>
        </ul>
    </div>
    
     <div class="content">
        <div class="tpleft"> <h1 align="left">TOP LEFT </h1></div>
        <div class="tpright"><h1 align="right"> TOP RIGHT </h1></div>
        
        <!--   <div class="btleftimg"> <img src="gal_car_stars1.jpg" width="557" height="259" /></div>-->
    </div>
      
</body>
</html>
  
 



/* homepage_V1.css is used to help build my homepage*/
 body
{
    margin-top: 2em;
    margin-left: 2em;
    margin-bottom: 1em;
    margin-right: 1em;
    
}
 div.container
{
    width: 80em;
    border: solid #9400D3 0.1em;
    height: 40em;
    
    padding-bottom: 1em;
}
div.header
{
    padding: 0.5em;
    background-color: #66CDAA;
    height: 5.2em;
    
}
div.nav
{
    border: 2px solid red;
    width: 10em;
    height: 28.3em;
    float:left;
}
div.content
{
    
    border: solid #FF8C00 2px;
    padding-bottom: 0;
    margin-left: 0em; /** use this to separate nav and content **/
    height: 28.4em;
}
div.tpleft 
{
    position: relative;
    padding: 0;
    border: solid #800000 2px;
    margin-left: 0em;
    background-color: blue;
    width: 557px;
    height: 228px;
}
div.tpright 
{
    position: relative;
    padding: 0;
    border: solid #800000 2px;
    margin-right: 4em;
    margin-top: 0em;
    top: -14.5em;
    right: -34.5em;
    width: 557px;
    height: 228px;
    background-color: #737CA1;
    
    
}

Please help, thanks