Firefox rendering problem. IE perfect

Discussion in 'CSS' started by quicksilver101, Mar 16, 2008.

  1. #1
    Hi all, thought iwould play around with css tonight to see if i could make the load times on my site less. It works perfectly in IE but in firefox the divs are all over the place!

    <html>
    <head>
    <title></title>
    <style type="text/css">
    body, html {margin:0px 0px 0px 0px;text-align:center;}
    #mainContainer {
    width:900px;
    padding:0px;
    
    		margin-right:auto;
    		margin-left:auto;
    		margin-top:0px;
    		text-align:left;
    }
    #image {
    width:900px;
    border:0px solid red;
    }
    
    #header {
    width:113px;
    float:left;
    border:0px solid red;
    
    }
    #center {width:674px;height:20;float:left;background-image: 
    url('Images/bg1.png');
    background-repeat: repeat;
    }
    #right {width:113px;float:left;}
    #content {
    border:0px solid blue;width:900px;text-align:center;background-image: 
    url('Images/back11.png');
    background-repeat: repeat;
    
    
    }
    #content #content1 {
    border:0px solid blue;width:880px;
    
    }
    #content1 #contentleft {
    border:0px solid blue;width:200px;float:left;background-color:#FFFFFF;
    
    }
    #contentleft #topleft {
    border:0px solid blue;width:21px;float:left;background-color:#FFFFFF;
    
    }
    #contentleft #toptop {
    border:0px solid blue;width:158px;height:18;float:left;background-color:#FFFFFF;
    
    }
    #contentleft #topright {
    border:0px solid blue;width:21px;float:left;background-color:#FFFFFF;
    
    }
    #contentleft #botleft {
    border:0px solid blue;width:21px;float:left;background-color:#FFFFFF;
    
    }
    #contentleft #botbot {
    border:0px solid blue;width:158px;height:18;float:left;background-color:#FFFFFF;
    
    }
    #contentleft #botright {
    border:0px solid blue;width:21px;float:left;background-color:#FFFFFF;
    
    }
    #content1 #contentmid {
    border:0px solid blue;width:21px;float:left;
    
    }
    #content1 #contentright {
    border:0px solid blue;width:659px;float:right;background-color:#FFFFFF;
    
    }
    
    #contentright #contentrightbot2 {
    border:0px solid blue;width:21px;height:18px;float:right;background-color:#FFFFFF;
    
    }
    #contentright #contentrightbot1 {
    border:0px solid blue;width:617px;height:18px;float:right;background-color:#FFFFFF;
    
    }
    #contentright #contentrightbot {
    border:0px solid blue;width:21px;height:18px;float:right;background-color:#FFFFFF;
    
    }
    #contentright #contenttop {
    border:0px solid blue;width:21px;float:right;background-color:#FFFFFF;
    
    }
    #contentright #contenttop1 {
    border:0px solid blue;width:617px;height:18;float:right;background-color:#FFFFFF;
    
    }
    #contentright #contenttop2 {
    border:0px solid blue;width:21px;float:right;background-color:#FFFFFF;
    
    }
    
    #footer {
    width:14px;float:left;
    border:0px solid green;
    }
    #footer1 {
    width:872px;float:left;
    border:0px solid green;background-image: 
    url('Images/botback.png');
    background-repeat: repeat;
    
    }
    #footer2 {
    width:14px;float:left;
    border:0px solid green;
    }
    p, h1, pre {
    		margin:0px 0px 0px 0px;
    		}
    </style>
    </head>
    <body><div id="image"><center><img src="Images/Banner6.jpg" width="682" height="152"></center></div>
    <div id="mainContainer">
    <div id="header"><img src="Images/topleft1111.png" width="113" height="20"></div>
     <div id="center">&nbsp;</div>
     <div id="right"><img src="Images/topright1111.png" width="113" height="20"></div>
      <div id="content"><div id="content1">
    	<div id="contentleft">
    		<div id="topleft">
              <img border="0" src="Images/navleft.png" width="21" height="18"></div>
    		<div id="toptop"><font size="2">f</font></div>
    		<div id="topright">
              <img border="0" src="Images/navright.png" width="21" height="18"></div>
          <p style="text-align: left">
    <br>&nbsp;<p>
        <div id="botleft">
              <img border="0" src="Images/navbotleft1.png" width="21" height="18"></div><div id="botbot">
              <font size="2">k</font></div><div id="botright">
              <img border="0" src="Images/navbotright.png" width="21" height="18"></div></div>
          	<div id="contentmid">
          <p style="text-align: left">
          <img src="Images/midmid1.png" width="21" height="35"></div>
    	<div id="contentright"> 
    		<div id="contenttop">
              <img border="0" src="Images/navright.png" width="21" height="18"></div>
    		<div id="contenttop1"><font size="2">f</font></div>
    		<div id="contenttop2">
              <img border="0" src="Images/navleft.png" width="21" height="18"></div>
            <p style="text-align: left"><br> &nbsp;</p>
        
    	<div id="contentrightbot2">
          <img border="0" src="Images/navbotright.png" width="21" height="18"></div>
            <div id="contentrightbot1"><font size="1">f</font></div><div id="contentrightbot">
            <img border="0" src="Images/navbotleft1.png" width="21" height="18"></div></div></div>&nbsp;</div>
    <div id="footer">
      <p style="text-align: center">
      <img border="0" src="Images/cornerleftbottom111.png" width="14" height="20"></div>
    <div id="footer1">&nbsp;</div>
    <div id="footer2">
      <img border="0" src="Images/cornerrightbottom1111.png" width="14" height="20"></div>
    </div>
    </body>
    </html>
    Code (markup):

     
    quicksilver101, Mar 16, 2008 IP
  2. quicksilver101

    quicksilver101 Peon

    Messages:
    123
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Ignore this thread sorry problem sorted stupid errors.
     
    quicksilver101, Mar 16, 2008 IP