F32
11-03-2007, 01:49 PM
Hey guys,
Some of you know a problem was recently sorted of mine but now there's a compatibility problem between FF & IE6&7.
My layout, which has been coded in xhtml/css can be found here:
http://www.xeoro.net/_skyhabv51fix/
It works fine in FireFox but messes up in Internet Explorer 6&7.
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SkyHabbo.net ยป Your #1 source for Habbo Entertainment</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div align="center">
<!-- start container -->
<div id="conttop">
</div>
<div id="container">
<div id="boxcont">
<!-- start banner -->
<div id="banner">
</div>
<!-- end banner -->
<!-- start radio stats -->
<div id="rstatstop">
</div>
<div id="rstats">
<!-- radio stats here -->
</div>
<div id="rstatsbot">
</div>
<!-- end radio stats --> <!-- start left column -->
<div id="leftcolumn">
<!-- start navigation -->
<div id="navtop">
</div>
<div class="leftboxes">
<!-- navigation here -->
</div>
<div class="leftbottom">
</div>
<!-- end navigation -->
<!-- start latest updates -->
<div id="lupdates">
</div>
<div class="leftboxes">
<!-- latest updates here -->
</div>
<div class="leftbottom">
</div>
<!-- end latest updates -->
<!-- start radio player -->
<div id="rplayer">
</div>
<div class="leftboxes">
<!-- radio player here -->
</div>
<div class="leftbottom">
</div>
<!-- end radio player -->
<!-- start site stats -->
<div id="sstats">
</div>
<div class="leftboxes">
<!-- site stats here -->
</div>
<div class="leftbottom">
</div>
<!-- end site stats --> </div>
<!-- start content column -->
<div id="contentcolumn">
<!-- start main content -->
<div id="ctop">
</div>
<div id="maincontent">
<div class="ctop">
</div>
<!-- content here -->
</div>
<div id="contentbot">
</div>
<!-- end main content -->
</div>
</div>
</div>
<div id="contbot">
</div>
<!-- end container --> </div>
</body>
</html>
CSS:
body {
background-color: #2c708f;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
margin-top: 25px;
}
#conttop {
width: 769px;
height: 7px;
background-image: url(images/conttop.gif);
overflow: hidden;
}
#container {
width: 769px;
overflow: hidden;
padding-bottom: 10px;
background-image: url(images/contbg.gif);
}
#contbot {
width: 769px;
height: 7px;
overflow: hidden;
background-image: url(images/contbot.gif);
}
#banner {
width: 513px;
height: 121px;
float: left;
background-image: url(images/banner.gif);
}
#rstatstop {
width: 205px;
height: 17px;
float: right;
background-image: url(images/rstatstop.gif);
}
#rstats {
width: 197px;
padding-left: 4px;
padding-right: 4px;
text-align: left;
background-image: url(images/rstatsbg.gif);
height: 97px;
float: right;
clear: right;
}
#rstatsbot {
width: 205px;
height: 8px;
float: right;
overflow: hidden;
clear: right;
background-image: url(images/rstatsbot.gif);
}
#navtop {
width: 205px;
height: 17px;
float: left;
clear: left;
margin-top: 10px;
background-image: url(images/navtop.gif);
}
.leftboxes {
width: 197px;
padding-left: 4px;
padding-right: 4px;
text-align: left;
background-image: url(images/rstatsbg.gif);
padding-bottom: 2px;
float: left;
clear: left;
}
.leftbottom {
width: 205px;
height: 8px;
float: left;
overflow: hidden;
clear: left;
background-image: url(images/rstatsbot.gif);
margin-bottom: 10px;
}
#ctop {
width: 513px;
height: 17px;
background-image: url(images/ctop.gif);
margin-top: 10px;
float: right;
}
#maincontent {
width: 505px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 2px;
text-align: left;
float: right;
clear: right;
background-image: url(images/contentbg.gif);
}
#contentbot {
width: 513px;
height: 9px;
overflow: hidden;
float: right;
clear: right;
background-image: url(images/cbottom.gif);
}
#lupdates {
width: 205px;
height: 17px;
float: left;
clear: left;
background-image: url(images/lupdates.gif);
}
#mccont {
width: 517px;
margin-right: 17px;
float: right;
}
#rplayer {
width: 205px;
height: 17px;
float: left;
clear: left;
background-image: url(images/rplayer.gif);
}
#sstats {
width: 205px;
height: 17px;
float: left;
clear: left;
background-image: url(images/sstats.gif);
}
#boxcont {
width: 735px;
}
#leftcolumn {
width:205px;
float:left;
}
#contentcolumn {
width:513px;
margin-left:17px;
float:left;
}
Sorry to be a pain; thanks for any help.
Some of you know a problem was recently sorted of mine but now there's a compatibility problem between FF & IE6&7.
My layout, which has been coded in xhtml/css can be found here:
http://www.xeoro.net/_skyhabv51fix/
It works fine in FireFox but messes up in Internet Explorer 6&7.
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SkyHabbo.net ยป Your #1 source for Habbo Entertainment</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div align="center">
<!-- start container -->
<div id="conttop">
</div>
<div id="container">
<div id="boxcont">
<!-- start banner -->
<div id="banner">
</div>
<!-- end banner -->
<!-- start radio stats -->
<div id="rstatstop">
</div>
<div id="rstats">
<!-- radio stats here -->
</div>
<div id="rstatsbot">
</div>
<!-- end radio stats --> <!-- start left column -->
<div id="leftcolumn">
<!-- start navigation -->
<div id="navtop">
</div>
<div class="leftboxes">
<!-- navigation here -->
</div>
<div class="leftbottom">
</div>
<!-- end navigation -->
<!-- start latest updates -->
<div id="lupdates">
</div>
<div class="leftboxes">
<!-- latest updates here -->
</div>
<div class="leftbottom">
</div>
<!-- end latest updates -->
<!-- start radio player -->
<div id="rplayer">
</div>
<div class="leftboxes">
<!-- radio player here -->
</div>
<div class="leftbottom">
</div>
<!-- end radio player -->
<!-- start site stats -->
<div id="sstats">
</div>
<div class="leftboxes">
<!-- site stats here -->
</div>
<div class="leftbottom">
</div>
<!-- end site stats --> </div>
<!-- start content column -->
<div id="contentcolumn">
<!-- start main content -->
<div id="ctop">
</div>
<div id="maincontent">
<div class="ctop">
</div>
<!-- content here -->
</div>
<div id="contentbot">
</div>
<!-- end main content -->
</div>
</div>
</div>
<div id="contbot">
</div>
<!-- end container --> </div>
</body>
</html>
CSS:
body {
background-color: #2c708f;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
margin-top: 25px;
}
#conttop {
width: 769px;
height: 7px;
background-image: url(images/conttop.gif);
overflow: hidden;
}
#container {
width: 769px;
overflow: hidden;
padding-bottom: 10px;
background-image: url(images/contbg.gif);
}
#contbot {
width: 769px;
height: 7px;
overflow: hidden;
background-image: url(images/contbot.gif);
}
#banner {
width: 513px;
height: 121px;
float: left;
background-image: url(images/banner.gif);
}
#rstatstop {
width: 205px;
height: 17px;
float: right;
background-image: url(images/rstatstop.gif);
}
#rstats {
width: 197px;
padding-left: 4px;
padding-right: 4px;
text-align: left;
background-image: url(images/rstatsbg.gif);
height: 97px;
float: right;
clear: right;
}
#rstatsbot {
width: 205px;
height: 8px;
float: right;
overflow: hidden;
clear: right;
background-image: url(images/rstatsbot.gif);
}
#navtop {
width: 205px;
height: 17px;
float: left;
clear: left;
margin-top: 10px;
background-image: url(images/navtop.gif);
}
.leftboxes {
width: 197px;
padding-left: 4px;
padding-right: 4px;
text-align: left;
background-image: url(images/rstatsbg.gif);
padding-bottom: 2px;
float: left;
clear: left;
}
.leftbottom {
width: 205px;
height: 8px;
float: left;
overflow: hidden;
clear: left;
background-image: url(images/rstatsbot.gif);
margin-bottom: 10px;
}
#ctop {
width: 513px;
height: 17px;
background-image: url(images/ctop.gif);
margin-top: 10px;
float: right;
}
#maincontent {
width: 505px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 2px;
text-align: left;
float: right;
clear: right;
background-image: url(images/contentbg.gif);
}
#contentbot {
width: 513px;
height: 9px;
overflow: hidden;
float: right;
clear: right;
background-image: url(images/cbottom.gif);
}
#lupdates {
width: 205px;
height: 17px;
float: left;
clear: left;
background-image: url(images/lupdates.gif);
}
#mccont {
width: 517px;
margin-right: 17px;
float: right;
}
#rplayer {
width: 205px;
height: 17px;
float: left;
clear: left;
background-image: url(images/rplayer.gif);
}
#sstats {
width: 205px;
height: 17px;
float: left;
clear: left;
background-image: url(images/sstats.gif);
}
#boxcont {
width: 735px;
}
#leftcolumn {
width:205px;
float:left;
}
#contentcolumn {
width:513px;
margin-left:17px;
float:left;
}
Sorry to be a pain; thanks for any help.