css layout problems

Associate
Joined
5 Feb 2006
Posts
129
Location
Birmingham
Hi i am designing a layout in css, the divs i float across to the right are not the same in ie and firefox. The spaceing between them is not right:

PHP:
<!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>
<title>Untitled Document</title>
<meta name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" />
<style type="text/css" >
#container {
    width: 730px;
    border: 1px solid #000000;
    margin: 10px;
}
#container2 {
    width: 930px;
    margin: 10px;
    margin-left:auto;
    margin-right:auto;
}
#containerad {
    float:right;
    width: 165px;
    border: 1px solid #000000;
    margin: 10px;
    
}
#banner {
    padding: 5px;
    background-COLOR: #DD558C;
}
#content {
    padding: 5px;
    background-color: #F083AF;
}
#contentadban {
    padding: 5px;
    background-color: #DD558C;
}
#contentad {
    padding: 5px;
    background-color: #F083AF;
}
#footer {
    clear: both;
    padding: 5px;
    background-color: rgb(252, 170, 191);
}
.bor {
    border: 1px solid #000000;
}
body {
    background-color: #241A1E;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="container2">
  <div id="containerad" style="clear:both">
    <div id="contentadban">Top</div>
    <div id="contentad">
      <p>test</p>
      <p>test</p>
    </div>
  </div>
  <div id="containerad" style="clear:both">
    <div id="contentadban">Top</div>
    <div id="contentad">
      <p>test</p>
      <p>test</p>
    </div>
  </div>
  <div id="containerad" style="clear:both">
    <div id="contentadban">Top</div>
    <div id="contentad">
      <p>Test</p>
      <p>test</p>
    </div>
  </div>
  <div id="container" >
    <div id="banner">Top</div>
    <div id="content"> test </div>
  </div>
  <div id="container">
    <div id="banner">Top</div>
    <div id="content">test
    </div>
  </div>
  <div id="container">
    <div id="banner">Top</div>
    <div id="content">
      <p>test    </p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test  </p>
    </div>
  </div>
</div>
</body>
</html>

Any ideas?
 
Sorry!

Code:
[COLOR=#000000][COLOR=#007700]

<![/COLOR][COLOR=#0000bb]DOCTYPE html PUBLIC [/COLOR][COLOR=#dd0000]"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"[/COLOR][COLOR=#007700]>
<[/COLOR][COLOR=#0000bb]html xmlns[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"http://www.w3.org/1999/xhtml"[/COLOR][COLOR=#007700]>
<[/COLOR][COLOR=#0000bb]head[/COLOR][COLOR=#007700]>
<[/COLOR][COLOR=#0000bb]title[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]Untitled Document[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]title[/COLOR][COLOR=#007700]>
<[/COLOR][COLOR=#0000bb]meta name[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"generator" [/COLOR][COLOR=#0000bb]content[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"http://www.inknoise.com/experimental/layoutomatic.php" [/COLOR][COLOR=#007700]/>
<[/COLOR][COLOR=#0000bb]style type[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"text/css" [/COLOR][COLOR=#007700]>
[/COLOR][COLOR=#ff8000]#container {
    [/COLOR][COLOR=#0000bb]width[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]730px[/COLOR][COLOR=#007700];
    [/COLOR][COLOR=#0000bb]border[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]1px solid [/COLOR][COLOR=#ff8000]#000000;
    [/COLOR][COLOR=#0000bb]margin[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]10px[/COLOR][COLOR=#007700];
}
[/COLOR][COLOR=#ff8000]#container2 {
    [/COLOR][COLOR=#0000bb]width[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]930px[/COLOR][COLOR=#007700];
    [/COLOR][COLOR=#0000bb]margin[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]10px[/COLOR][COLOR=#007700];
    [/COLOR][COLOR=#0000bb]margin[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000bb]left[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000bb]auto[/COLOR][COLOR=#007700];
    [/COLOR][COLOR=#0000bb]margin[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000bb]right[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000bb]auto[/COLOR][COLOR=#007700];
}
[/COLOR][COLOR=#ff8000]#containerad {
    [/COLOR][COLOR=#0000bb]float[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000bb]right[/COLOR][COLOR=#007700];
    [/COLOR][COLOR=#0000bb]width[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]165px[/COLOR][COLOR=#007700];
    [/COLOR][COLOR=#0000bb]border[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]1px solid [/COLOR][COLOR=#ff8000]#000000;
    [/COLOR][COLOR=#0000bb]margin[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]10px[/COLOR][COLOR=#007700];
    
}
[/COLOR][COLOR=#ff8000]#banner {
    [/COLOR][COLOR=#0000bb]padding[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]5px[/COLOR][COLOR=#007700];
    [/COLOR][COLOR=#0000bb]background[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000bb]COLOR[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#ff8000]#DD558C;
[/COLOR][COLOR=#007700]}
[/COLOR][COLOR=#ff8000]#content {
    [/COLOR][COLOR=#0000bb]padding[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]5px[/COLOR][COLOR=#007700];
    [/COLOR][COLOR=#0000bb]background[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000bb]color[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#ff8000]#F083AF;
[/COLOR][COLOR=#007700]}
[/COLOR][COLOR=#ff8000]#contentadban {
    [/COLOR][COLOR=#0000bb]padding[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]5px[/COLOR][COLOR=#007700];
    [/COLOR][COLOR=#0000bb]background[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000bb]color[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#ff8000]#DD558C;
[/COLOR][COLOR=#007700]}
[/COLOR][COLOR=#ff8000]#contentad {
    [/COLOR][COLOR=#0000bb]padding[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]5px[/COLOR][COLOR=#007700];
    [/COLOR][COLOR=#0000bb]background[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000bb]color[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#ff8000]#F083AF;
[/COLOR][COLOR=#007700]}
[/COLOR][COLOR=#ff8000]#footer {
    [/COLOR][COLOR=#0000bb]clear[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]both[/COLOR][COLOR=#007700];
    [/COLOR][COLOR=#0000bb]padding[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]5px[/COLOR][COLOR=#007700];
    [/COLOR][COLOR=#0000bb]background[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000bb]color[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]rgb[/COLOR][COLOR=#007700]([/COLOR][COLOR=#0000bb]252[/COLOR][COLOR=#007700], [/COLOR][COLOR=#0000bb]170[/COLOR][COLOR=#007700], [/COLOR][COLOR=#0000bb]191[/COLOR][COLOR=#007700]);
}
.[/COLOR][COLOR=#0000bb]bor [/COLOR][COLOR=#007700]{
    [/COLOR][COLOR=#0000bb]border[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]1px solid [/COLOR][COLOR=#ff8000]#000000;
[/COLOR][COLOR=#007700]}
[/COLOR][COLOR=#0000bb]body [/COLOR][COLOR=#007700]{
    [/COLOR][COLOR=#0000bb]background[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000bb]color[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#ff8000]#241A1E;
[/COLOR][COLOR=#007700]}
</[/COLOR][COLOR=#0000bb]style[/COLOR][COLOR=#007700]>
<[/COLOR][COLOR=#0000bb]meta http[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000bb]equiv[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"Content-Type" [/COLOR][COLOR=#0000bb]content[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"text/html; charset=iso-8859-1" [/COLOR][COLOR=#007700]/>
</[/COLOR][COLOR=#0000bb]head[/COLOR][COLOR=#007700]>
<[/COLOR][COLOR=#0000bb]body[/COLOR][COLOR=#007700]>
<[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"container2"[/COLOR][COLOR=#007700]>
  <[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"containerad" [/COLOR][COLOR=#0000bb]style[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"clear:both"[/COLOR][COLOR=#007700]>
    <[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"contentadban"[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]Top[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>
    <[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"contentad"[/COLOR][COLOR=#007700]>
      <[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]test[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>
      <[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]test[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>
    </[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>
  </[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>
  <[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"containerad" [/COLOR][COLOR=#0000bb]style[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"clear:both"[/COLOR][COLOR=#007700]>
    <[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"contentadban"[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]Top[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>
    <[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"contentad"[/COLOR][COLOR=#007700]>
      <[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]test[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>
      <[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]test[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>
    </[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>
  </[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>
  <[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"containerad" [/COLOR][COLOR=#0000bb]style[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"clear:both"[/COLOR][COLOR=#007700]>
    <[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"contentadban"[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]Top[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>
    <[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"contentad"[/COLOR][COLOR=#007700]>
      <[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]Test[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>
      <[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]test[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>
    </[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>
  </[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>
  <[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"container" [/COLOR][COLOR=#007700]>
    <[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"banner"[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]Top[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>
    <[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"content"[/COLOR][COLOR=#007700]> [/COLOR][COLOR=#0000bb]test [/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>
  </[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>
  <[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"container"[/COLOR][COLOR=#007700]>
    <[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"banner"[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]Top[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>
    <[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"content"[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]test
    [/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>
  </[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>
  <[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"container"[/COLOR][COLOR=#007700]>
    <[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"banner"[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]Top[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>
    <[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"content"[/COLOR][COLOR=#007700]>
      <[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]test    [/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>
      <[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]test[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>
      <[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]test[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>
      <[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]test[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>
      <[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]test[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>
      <[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]test[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>
      <[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]test[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>
      <[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]test  [/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]p[/COLOR][COLOR=#007700]>
    </[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>
  </[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>
</[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>
</[/COLOR][COLOR=#0000bb]body[/COLOR][COLOR=#007700]>
</[/COLOR][COLOR=#0000bb]html[/COLOR][COLOR=#007700]>  [/COLOR][/COLOR]
 
Here you go. You'll have to reset some global properties (such as p elements for instance) if you want it to look pixel perfect identical in IE and FF. I fixed it enough for you that other than some very minor spacing (mainly caused by your p elements), it looks the same in both.

Code:
<!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>
<title>Untitled Document</title>
<meta name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" />
<style type="text/css" >
#container {
    width: 730px;
    border: 1px solid #000000;
    margin: 0 10px 10px;
}    
#container2 {
    width: 930px;
    margin: 10px auto 0;
}
#containerad {
    float:right;
    width: 165px;
    border: 1px solid #000000;
    margin: 0 0 10px;
    
}
#banner {
    padding: 5px;
    background-COLOR: #DD558C;
}
#content {
    padding: 5px;
    background-color: #F083AF;
}
#contentadban {
    padding: 5px;
    background-color: #DD558C;
}
#contentad {
    padding: 5px;
    background-color: #F083AF;
}
#footer {
    clear: both;
    padding: 5px;
    background-color: rgb(252, 170, 191);
}
.bor {
    border: 1px solid #000000;
}
body {
    background-color: #241A1E; margin: 0; padding: 0;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="container2">
  <div id="containerad" style="clear:both">
    <div id="contentadban">Top</div>
    <div id="contentad">
      <p>test</p>
      <p>test</p>
    </div>
  </div>
  <div id="containerad" style="clear:both">
    <div id="contentadban">Top</div>
    <div id="contentad">
      <p>test</p>
      <p>test</p>
    </div>
  </div>
  <div id="containerad" style="clear:both">
    <div id="contentadban">Top</div>
    <div id="contentad">
      <p>Test</p>
      <p>test</p>
    </div>
  </div>
  <div id="container" >
    <div id="banner">Top</div>
    <div id="content"> test </div>
  </div>
  <div id="container">
    <div id="banner">Top</div>
    <div id="content">test
    </div>
  </div>
  <div id="container">
    <div id="banner">Top</div>
    <div id="content">
      <p>test    </p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test  </p>
    </div>
  </div>
</div>
</body>
</html>
 
Back
Top Bottom