Compatibility problem

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:

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-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:

Code:

 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.

Frog! · 11-03-2007, 08:50 PM

*Bumps*

~~letisix~~ · 11-03-2007, 08:52 PM

Works for me in i.e?

F32 · 11-03-2007, 08:52 PM

Originally Posted by letisix

Works for me in i.e?

Post screenshot please.

Thread: Compatibility problem

Thread Tools

Compatibility problem

Posting Permissions