Hi,
The main problem is ie's three pixel jog on floats and if you look at the faq sticky thread (under floats) this is explained in detail and is a common problem. I have highlighted the changes in the code below but read the faq to understand the full solution.
You have also put the clearfix for mozilla in the cod ebut have not applied it to the relevant element.
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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-13" />
<style type="text/css">
/*
client: POKERVEGAS
author: Janis Lanka
deveoped by: e|motion <www.emotion.lt>
*/
html body {
padding: 0;
margin: 0;
font: 11px Tahoma, Helvetica, sans-serif;
color: #E9D992;
background-color: #000;
padding-top: 3%;
}
a {
text-decoration: none;
color: #A94624;
}
#frame {
width: 1030px;
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
#banner {
padding: 0;
margin-bottom: 0;
background-color: #000;
}
#content {
padding: 0;
border: 1px solid #C8AC2C;
margin-left: 115px;
margin-right: 115px;
background-color: transparent;
}
/* commented backslash mac hiding hack - ie5 fix \*/
* html #content {height:1%;}
/* end hack */
* html #content {margin-left: 112px; margin-right: 112px;}
#header {
padding: 0;
margin-bottom: 0;
background-color: red;
background-image: url(http://www.lcc.lt/people/janis/images/header_.jpg);
background-repeat: no-repeat;
}
#header_img {
height: 134px;
background-color: green;
}
#info_content {
padding: 0;
margin: 0;
margin-left: 320px;
background-image: url(http://www.lcc.lt/people/janis/images/title_line.jpg);
background-repeat: no-repeat;
background-position: top;
}
#title {
margin: 0;
padding: 0;
}
#text {
padding: 5px 80px 5px 60px;
}
#direction {
text-align: right;
padding: 10px 50px 0 0;
}
#menu {
float: left;
width: 300px;
height: 240px;
margin: 0;
margin-right: 0;
padding: 160px 0 0 20px;
background-image: url(http://www.lcc.lt/people/janis/images/main_table_.jpg);
background-repeat: no-repeat;
background-position: top left;
background-color: pink;
}
* html #menu {width: 320px; w\idth: 300px;height:400px;he\ight:240px}
/* Outside decorations */
#deco_left {
float: left;
height: 536px;
width: 115px;
margin: 0;
margin-right: 0;
padding: 0;
background-image: url(http://www.lcc.lt/people/janis/images/deco_left.gif);
background-repeat: no-repeat;
background-position: center;
}
* html #deco_left {margin-right:-3px}
#deco_right {
float: right;
height: 536px;
width: 115px;
margin: 0;
margin-left: 0;
padding: 0;
background-image: url(http://www.lcc.lt/people/janis/images/deco_right.gif);
background-repeat: no-repeat;
background-position: center;
}
* html #deco_right {margin-left:-3px}
#deco_bottom {
clear: both;
height: 50px;
padding: 0;
margin-top: 0;
background-image: url(http://www.lcc.lt/people/janis/images/deco_bottom.gif);
background-repeat: no-repeat;
background-position: center top;
}
/* HACKS */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
</style>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>Pokervegas : Casino</title>
</head>
<body>
<div id="frame">
<div id="deco_left"> </div>
<div id="deco_right"> </div>
<div id="content" class="clearfix">
<div id="container">
<div id="header">
<div id="header_img"></div>
</div>
<div id="menu"><img src="http://www.lcc.lt/people/janis/images/menu.gif" alt="" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="26,65,134,91" href="restoranas.html" alt="Restoranas" />
<area shape="rect" coords="26,177,126,203" href="kontaktai.html" alt="Kontaktai" />
<area shape="rect" coords="26,151,172,174" href="darbas.html" alt="Siulome darba" />
<area shape="rect" coords="26,124,133,146" href="kaip_zaisti.html" alt="Kaip zaisti" />
<area shape="rect" coords="26,94,114,121" href="pramogos.html" alt="Pramogos" />
<area shape="rect" coords="26,11,98,34" href="kazino.html" alt="Kazino" />
<area shape="rect" coords="50,38,153,47" href="losimu_sale.html" alt="Losimu sale" />
<area shape="rect" coords="50,50,143,59" href="kortu_sale.html" alt="Kortu sale" />
</map>
</div>
<div id="info_content">
<div id="title"><img src="http://www.lcc.lt/people/janis/image...e_pramogos.gif" alt="Pramogos" width="198" height="84" /></div>
<div id="text"> <img src="http://www.lcc.lt/people/janis/image...kortu_sale.gif" alt="" width="168" height="22" style="padding-bottom: 10px;" /><br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ea takimata sanctus est Lorem ipsum dolor sit
am et. Lorem ipsum dolor sit amet, <br />
<br />
consetetur sadipscing elitr, sed diam non umy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed d iam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. St et clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor si t amet. Lorem ipsum
dolor sit amet, <br />
<br />
consetetur <a href="#">sadipscing</a> elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, s ed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum . Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum do lor sit amet.
</div>
<!-- end of id='text' -->
<div id="direction"><a href="#"><img src="http://www.lcc.lt/people/janis/image...ction_back.gif" alt="Atgal" width="77" height="49" border="0" /></a><img src="http://www.lcc.lt/people/janis/image...ion_middle.gif" alt="" /><a href="#"><img src="http://www.lcc.lt/people/janis/image...ction_next.gif" alt="Toliau" width="67" height="49" border="0" /></a></div>
</div>
</div>
</div>
<div id="deco_bottom"> </div>
</div>
<!-- end of id='frame' -->
</body>
</html>
You also had some strange box model sizing for the broken box model.
Hope that helps.
Paul
Bookmarks