CSS: разместване на div.

[proba]

Здравейте.
С Opera , Chrome всичко е наред , но естествено с IE , div-a се размества.

Ето как трябва да излиза:

А ето как излиза с IE:

Div-a се измества в дясно..

style.css

body {
margin: 0;
padding: 0;
font-size: 14px;
font-family: Arial, Tahoma, Verdana, sans-serif;
line-height: 20px;
background: #ffffff;
color: #000000;
}

a
{
color: #666;
text-decoration: none;

}

#bg img {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
}

#container {
padding: 10px 0;
}

#logo {
position: relative;
z-index: 10;
width: 585px;
margin: 0 auto;
padding: 20px;
float: center;
}

#menu {
position: relative;
z-index: 10;
width: 226px;
padding: 0px;
margin-left: 5%;
float: left;
}

#content {
position: relative;
z-index:10;
width: 585px;
margin: 0 auto;
padding: 0px;
float: center;
}

.contenta
{
width: 582px;
height: 3px;
background: url('table2.png');
float: left;
}

.contentb
{
width: 582px;
padding-left: 2px;
background: url('table3.png');
float: left;
}

.contentc
{
width: 582px;
height: 3px;
background: url('table4.png');
float: left;
}

.contentd
{
width: 246px;
height: 6px;
background: url('menu2.png');
}

.contente
{
width: 246px;
padding-left: 2px;
background: url('menu3.png');
}

.contentf
{
width: 246px;
height: 7px;
background: url('menu4.png');
}

index.html

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Mero</title>
</head>
<body>
<div id="bg"><img src="bg.png" alt=""/></div>
<div id="container">
<div id="logo">
<img src="logo.png" alt="" />
</div>

<div id="menu">
<table class="contentd"><tr><td></td></tr></table>
<table class="contente">
<tr><td>
<a href="#">>> Link1</a><br>
<a href="#">>> Link2</a><br>
<a href="#">>> Link3</a><br>
<a href="#">>> Link4</a><br>
<a href="#">>> Link4</a><br>
<a href="#">>> Link4</a><br>
</td></tr></table>
<table class="contentf"><tr><td></td></tr></table>
</div>

<div id="content">
<table class="contenta"><tr><td></td></tr></table>
<table class="contentb">
<tr><td>
Някакво съдържание.<br>
Някакво съдържание.<br>
Някакво съдържание.<br>
Някакво съдържание.<br>
Някакво съдържание.<br>
Някакво съдържание.<br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
</td></tr></table>
<table class="contentc"><tr><td></td></tr></table>
</div>

</div>
</body>
</html>

Някаква идея кое да променя в css-a ?

 

[Anonymous]

Когато ползваш float: left; слагай display: inline; за да не се получава двоен маргин
П.П. float: center не съществува, поне доколкото аз знам :?:

 

[proba]

Да , получи се с display: inline; само добавих padding-left: 50px; и си додйе на мястото.
Сега и при трите браузъра е наред , но дали е одачен този вариянт с padding-a ?

 

[Anonymous]

Ми щом е добре под всички браузъри, значи е добре.
Като цяло за 3 таба, имаш страшно ненужно хтмл и цсс, но не ми се задълбава в момента