float works in IE, FF, Opera 7 but not Opera 8 or 9.

**iTechno** · Jun 20, 2006 08:04

Hey,

www.nintendopoint.com/new/ works in Opera 7, IE6 and FF but it won't work in Opera 8 and 9. Anyone got any ideas why?

**Locker** · Jun 20, 2006 08:05

I don't know why, but it doesn't work in IE7 either.

Regards,
Mark

**iTechno** · Jun 20, 2006 08:42

HTML Code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>NintendoPoint.com - #1 for Wii, DS, GBA, Gamecube, Retro.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="NintendoPoint.com is the top Nintendo Site on the net, specialising in ALL Nintendo products." />
<meta name="keywords" content="ninty, wii, nintendo wii, nintendo, rev, revolution, gba, gameboy, gameboy advance, gba sp, reviews, previews, cheats, revolution forums, wii information, wii pictures, gba pictures, gaming, games" />
<meta name="robots" content="index,follow" />
<meta name="copyright" content="Coding Copyright © 2006 Matt Hall" />
<meta name="author" content="Matt Hall" />
<meta name="language" content="English" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="pagebg">
  <div id="wrapper">

		<div class="topnav">Game Profiles  |  Reviews  |  Previews  |  Features  |  Revolution News  |  Editors' Choice  |  Release Dates  | Hardware  |  Guides  |  Cheats		</div> 
		<div class="header">
		<img src="images/header.gif" alt="header" />		</div>
		<div class="login"></div>
                <div class="searchbox">
					<div id="headerleft"><p class="sqm" style="margin-bottom:4px;">Search Nintendo Point or Google:</p>
					<form method="get" action="http://www.google.com/custom">  <div>  <input type="text" name="q" size="31" maxlength="255" value=""/>  <input class="gosearch" type="submit" name="sa" value=""/>  <input type="hidden" name="domains" value="nintendopoint.com"/>  <br/><input type="radio" name="sitesearch" value="nintendopoint.com" checked="checked"/><label class="search">Nintendo Point</label>  <input type="radio" name="sitesearch" value=""/><label class="search">Google</label>  <input type="hidden" name="cof" value="AH:left;LH:0;LW:0;AWFID:3104257cffe8d8b9;"/>  </div> </form>

					</div>
					<div class="clear">
					</div>
					<div id="headerright">
					<img src="images/ad.gif" alt="Please Click and support us " />
					</div>
  		</div>
		<div id="left">
 <ul id="navcontainer">

 <li style="list-style-type: none;">
 <h3 class="navheader">The Main Station</h3>
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About Nintendo Point</a></li>
 <li><a href="#">Advertising Rates</a></li>
 <li><a href="#">Forums</a></li>

 </ul>
 </li>
 <li style="list-style-type: none;">
 <h3 class="navheader">Nintendo Wii</h3>
 <ul>
 <li><a href="#">Wii News</a></li>
 <li><a href="#">Games</a></li> 
 <li><a href="#">Review</a></li>

 <li><a href="#">Previews</a></li>
 <li><a href="#">Featured Games</a></li>
 <li><a href="#">Cheats</a></li>
 </ul>
 </li>
 <li style="list-style-type: none;">
 <h3 class="navheader">Nintendo DS</h3>

 <ul>
 <li><a href="#">DS News</a></li>
 <li><a href="#">Games</a></li> 
 <li><a href="#">Review</a></li>
 <li><a href="#">Previews</a></li>
 <li><a href="#">Featured Games</a></li>
 <li><a href="#">Cheats</a></li>

 </ul>
 </li>
 <li style="list-style-type: none;">
 <h3 class="navheader">Nintendo GBA</h3>
 <ul>
 <li><a href="#">GBA News</a></li>
 <li><a href="#">Games</a></li> 
 <li><a href="#">Review</a></li>

 <li><a href="#">Previews</a></li>
 <li><a href="#">Featured Games</a></li>
 <li><a href="#">Cheats</a></li>
 </ul>
 </li>
 <li style="list-style-type: none;">
 <h3 class="navheader">Nintendo Gamecube</h3>

 <ul>
 <li><a href="#">Gamecube News</a></li>
 <li><a href="#">Games</a></li> 
 <li><a href="#">Review</a></li>
 <li><a href="#">Previews</a></li>
 <li><a href="#">Featured Games</a></li>
 <li><a href="#">Cheats</a></li>

 </ul>
 </li>
 <li style="list-style-type: none;">
 <h3 class="navheader">Misc</h3>
 <ul>
 <li><a href="#">Misc News</a></li>
 <li><a href="#">Games</a></li> 
 <li><a href="#">Review</a></li>

 <li><a href="#">Previews</a></li>
 <li><a href="#">Featured Games</a></li>
 <li><a href="#">Cheats</a></li>
 </ul>
 </li>
  </ul>
		</div>

		<div id="content">
			<div class="content1">
                        <div class="contentheader">Nintendo Point Weekly Featured                        Last Update: Jan.11, 2006</div>
			<img src="images/mainpagebanner.gif" alt="Whats New at Nintendo Point.com" />
			<div class="contentheader">Nintendo Point Announcements</div>
			<div class="box"><div class="leftbox"><img src="images/leftimage.gif" alt="Left Side Image" /></div><div class="clear"></div><div class="rightbox"><h2>Revolution Controllers Released!</h2><p class="verdana">Xbox 360 packages have now been announced Microsoft 
and it has been the #1 topic of discussion over the past week and a half<br /><a href="readmore.php">Read More</a></p></div></div>

                        <div class="clear"></div>                      	
			<div class="box"><div class="leftbox"><img src="images/leftimage.gif" alt="Left Side Image" /></div><div class="clear"></div><div class="rightbox"><h2>Revolution Controllers Released!</h2><p class="verdana">Xbox 360 packages have now been announced Microsoft 
and it has been the #1 topic of discussion over the past 
week and a half<br /><a href="readmore.php">Read More</a></p></div></div>
                        <div class="clear"></div>                      	
			<div class="box"><div class="leftbox"><img src="images/leftimage.gif" alt="Left Side Image" /></div><div class="clear"></div><div class="rightbox"><h2>Revolution Controllers Released!</h2><p class="verdana">Xbox 360 packages have now been announced Microsoft 
and it has been the #1 topic of discussion over the past 
week and a half<br /><a href="readmore.php">Read More</a></p></div></div>		
			<div class="clear"></div>
			<div class="contentheader">Nintendo Point Top 10 Games</div>
                        <div class="contenttop10"><a href="#">Unreal Championship 2: The Liandri Conflict</a></div>

                        <div class="contenttop10"><a href="#">Psychonauts</a></div>
                        <div class="contenttop10"><a href="#">Jade Empire</a></div>
                        <div class="contenttop10"><a href="#">TimeSplitters: Future Perfect</a></div>
                        <div class="contenttop10"><a href="#">Star Wars: Episode III - Revenge of the Sith</a></div>
                        <div class="contenttop10"><a href="#">Advent Rising</a></div>
                        <div class="contenttop10"><a href="#">Spy vs. Spy</a></div>

                        <div class="contenttop10"><a href="#">Doom 3</a></div>
                        <div class="contenttop10"><a href="#">Obscure</a></div>
                        <div class="contenttop10"><a href="#">Still Life : The Unkown</a></div>
                        <a href="#"><img src="images/joinnow.gif" alt="Join Us Now" /></a>
			</div>
		</div>
		<div id="right">

	        <h2 class="rightheader">Nintendo Point Poll Of the Week</h2>
  	        <p class="right1">Are you going to buy the Nintendo Revolution atleast one month after it is launched?</p>
                <p class="right2">Yes, of course! <br />Probably.<br />Errr, Not sure.<br />What is the Revolution?</p>
                <h3 class="rightheader">Sponser Advertisment</h3>
                <div class="right1"><img src="images/advertisment.gif" alt="Advertisment" /></div>

	        <div class="right3"></div>
               	</div>
		<div id="clearfooter"></div>
		<div id="footer">
	  	<div class="footertop">					
					<div id="footerleft"><a href="#"><img src="images/footerad.gif" alt="Click and Sponsor us" /></a>
					</div>
					<div class="clear">
					</div>

					<div id="footerright">
			                <p class="sqmalt">NintendoPoint.com Quick User Login:</p>
					</div>
		</div>
		<div class="footerbottom">
		<div id="footerbottomleft"><p class="ft">Interested in advertising on NP? <a href="#">It is simple! Just click here and you will recieve information, our rates, and advertising prices</a></p></div><div class="clear"></div><div id="footerbottomright"><p class="ftl"><a href="#">Privacy Policy</a>   |   <a href="#">Terms of Service</a></p></div>

		<div class="fbbdiv"><p class="fbb"><a href="#">Home</a> | <a href="#">Editorials</a> | <a href="#">Reviews</a> | <a href="#">Previews</a> | <a href="#">Account</a> | <a href="#">News</a> | <a href="#">Forums</a> | <a href="#">Contact</a><br /><br />

© 2005 RevolutionSpot.com. All rights reserved. All trademarks, logos and names are properties of their respective owners.</p>
</div>		
</div>
  	</div>
</div>
</div>	
</body>
</html>

Code:

body {
background-color: #484386;
margin: 0;
padding: 0;
}

.clearfix:after {
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
}
.clearfix {
	display:inline-block;
}
 /* mac hide \*/
	* html .clearfix {height: 1%;}
	  .clearfix {display: block;}
 /* End hide */

#headerright { 
float:right;
width: 468px;
}

p.fbb {
margin: 0;
padding: 0;
padding-top: 10px;
}

.fbbdiv {
text-align: center;
height: 70px;
}

.fbb {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #d5d8df;
font-size: 10px;
padding-top: 16px;
}

.fbb a:link, .fbb a:hover, .fbb a:visited, .fbb a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #d5d8df;
font-size: 10px;
}

#header {
	background:#ffffcc;
	border-top:5px solid #fff;
	border-bottom:5px solid #fff;
	text-align:center;
}

#footer{
        position:relative;
	bottom:0;
	left:0;	
	width:800px;
	height:169px;
}

* html #footer {
	height:169px;
	he\ight:159px;
	bottom:-1px;
}
#clearfooter {
	clear:both;
	height:0px;
}


#content {
float:left;
background: #ffffff;
margin: 0;
padding: 0;
width:141px;
}

#left {
float:left;
margin: 0;
padding: 0;
width:141px;
background-color: #58539a;
}


#navcontainer { 
width: 141px;
padding: 0;
margin: 0;
}

.navheader {
background: url(images/navheaderbg.gif) no-repeat;
font-family: Verdana; 
font-size: 10px;
color: #ffffff;
font-weight: bold;
height: 25px;
width: 130px;
line-height: 25px;
padding-left: 11px;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
margin: 0;
}

.contenttop10 {
background: #d5d8df;
border-top: #ffffff 1px solid;
border-bottom: #b2b2b2 1px solid;
height: 20px;
line-height: 20px;
width: 416px;
padding-top:0;
padding-right:0;
padding-bottom:0;
margin:0px;
padding-left:11px;
}

.contenttop10 a {
font-family: verdana;
font-weight: bold;
font-size: 10px;
text-decoration: none;
color: #312c6e;
height: 20px;
line-height: 20px;
width: 427px;
}

.rightheader {
background: url(images/rightheaderbg.gif) no-repeat;
font-family: Tahoma; 
font-size: 10px;
color: #ffffff;
font-weight: bold;
height: 25px;
width: 219px;
line-height: 25px;
padding-left: 11px;
padding-top: 0;
padding-bottom: 0;
margin: 0;
}

.right1 img {
padding-left: 55px;
}

.box img {
padding-left: 8px;
padding-top: 7px;
}
.box {
background: #ffffff;
border-top: 1px solid #b2b2b2;
clear:left;
width:100%
}


h2 {
font-family: Verdana;
font-size: 10px;
font-weight: bold;
color: #312c6e;
text-decoration: underline;
margin: 0;
padding-top: 11px;
padding-bottom: 5px;
}

.right1 {
background: #484387;
font-family: Tahoma;
font-size: 10px;
color: #ffffff;
border-left: 1px solid #5d56aa;
border-top: 1px solid #5d56aa;
width: 229px;
padding-top: 5px;
line-spacing: 2;
margin: 0;
padding-bottom: 7px;
}

.right2 {
background: #312c6e;
width: 230px;
border-top: #221e4c 1px solid;
font-family: Tahoma;
font-size: 10px;
font-weight: bold;
color: #c8cae6;
margin: 0;
}

.right3 {
background: #312c6e;
width: 230px;
border-top: #221e4c 1px solid;
font-family: Tahoma;
font-size: 10px;
font-weight: bold;
color: #c8cae6;
height: 100px;
}



#navcontainer ul {
padding: 0;
margin: 0;
list-style-type: none;
font-family: Tahoma;
font-size: 10px;
}


#navcontainer a
{
display: block;
padding: 0;
width: 128px;
background-color: #484387;
border-bottom: 1px solid #3d396a;
border-top: 1px solid #5d56aa;
border-right: 1px solid #3d396a;
height:18px; 
padding: 0;
margin: 0;
padding-left: 12px;
text-decoration: none;
line-height:18px;
}

#navcontainer a:link, .navlist a:visited
{
color: #ffffff;
text-decoration: none;
}

#navcontainer a:visited {
color: #ffffff;
}

.navlist {
margin:0;
padding:0;
}

#navcontainer a:hover
{
background: url(images/navhoverbg.gif) no-repeat;
border-bottom: 1px solid #3d396a;
border-top: 1px solid #5d56aa;
border-right: 1px solid #3d396a;
height:18px; 
color: #fff;
}


#right {
float:left;
display: inline;
width:230px;
background-color: #312c6e;
}

h1 {
font-family: Verdana;
font-weight: bold;
font-size: 11px;
text-decoration: underline;
color: #3a357c;
margin: 0;
padding: 0;
}

.contenttext {
margin: 0;
padding: 0;
font-family: verdana;
font-size: 10px;
color: #7D7B86;
}

.contentheader { 
background: url(images/contentheaderbg.gif) no-repeat;
width: 415px;
height: 25px;
font-family: Tahoma;
font-size: 10px;
color: #ffffff;
line-height: 25px;
padding-left: 12px;
padding-top: 0;
padding-right: 0;
clear: left;
}

.contentsubheader {
background: #d5d8df;
height: 24px;
padding-left: 12px;
line-height: 24px;
border-bottom: #d2d2d2 1px solid;
}

.footertop {
background: url(images/footerbg.gif) repeat-x;
height: 74px;
border-top: #79778f 1px solid;
line-height: 74px;
}

#content{
width:427px;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}

#content img {
border: 0;
}

.navbit2 {
margin:0px;
padding:0px;

}

.content1{
	background:#ffffff;
	color:#fff;
	padding:0px;
        border-bottom: #c7c6cb 1px solid;
}

.clearer{
	height:1px;
	overflow:hidden;
	clear:both;
	margin-top:-1px;
}


#headerleft {
float: left;
width: 306px;
}

#footerleft {
float: left;
width: 454px;
height: 68px;
padding-top: 6px;
padding-left: 26px;
}

#footerleft img {
border: #504b91 1px solid;
line-height: 74px;
}

#footerright { 
height: 74px;
float: right;
width: 215px;
padding-right: 56px;
}

.leftbox {
float: left;
width: 79px;
clear:left;
background: #ffffff;
}

.rightbox {
float: right;
background: #ffffff;
width: 339px;
}

#pagebg {
background: url(images/pagebg.gif) repeat-y;
width: 836px;
margin: 0 auto;
}


.verdana a:link, .verdana a:hover, .verdana a:active, .verdana a:visited {
font-family: Verdana;
font-size: 10px;
color: #484848;
margin: 0;
font-weight: bold;
text-decoration: underline;
padding: 0;
}

.verdana {
font-family: Verdana;
font-size: 10px;
color: #484848;
margin: 0;
padding: 0;
}

#wrapper {
	margin: 0 auto;
	width: 800px;
	position:relative;
		margin-left:auto;
	margin-right:auto;
}

.topnav {
	background: url(images/topbg.gif) repeat-x;
	height: 24px;
	text-align: center;
	line-height: 24px;
	font-family: verdana;
	color: #ffffff;
	font-weight: bold;
	font-size: 10px;
}

.header {
	background: url(images/headerbg.gif) repeat-x;
	height: 72px;

}

.header img {
	margin: 0 0 0 45px;
}

.sqm {
font-family: Verdana;
font-weight: bold;
font-size: 10px;
text-decoration: underline;
color: #3a357c;
padding: 0;
margin: 0;
width: 194px;
}

p.sqm {
padding: 0;
margin: 0;
}

p.sqmalt {
margin: 0;
padding: 0;
}

.sqmalt {
font-family: Verdana;
font-weight: bold;
font-size: 10px;
text-decoration: none;
color: #3a357c;
padding: 0;
margin: 0;
}

.login {
background:url(images/loginbg.gif) no-repeat;
height: 26px;
}


.searchbox {
background: #d5d8df;
height: 64px;
padding-top: 4px;
padding-left: 13px;
padding-right: 5px;
}

.gosearch {
background: url(images/search.gif) no-repeat;
width: 68px;
height: 15px;
border: 0;
}

.gologin {
background: url(images/login.gif) no-repeat;
width: 60px;
height: 15px;
border: 0;
}



.footerbottom {
height: 95px;
margin: 0px;
padding: 0px;
background: #141414;
}



.ft {
font-family: Tahoma;
font-weight: bold;
font-size: 10px;
color: #ffffff;
margin: 0;
padding: 0;
width: 610px;
}

.ft a:link, .ft a:hover, .ft a:visited, .ft a:active {
font-family: Tahoma;
font-weight: normal;
text-decoration: underline;
font-size: 10px;
color: #ffffff;
}

#footerbottomleft {
float: left;
width: 603px;
padding-left: 7px;
height: 25px;
line-height: 25px;
text-align: left;
background: url(images/fbl.gif) no-repeat;
}

#footerbottomright { 
float:right;
width: 179px;
height: 25px;
line-height: 25px;
}

.ftl {
font-family: Tahoma;
font-weight: bold;
color: #d5d8df;
margin: 0;
padding: 0;
font-size: 10px;
}

.ftl a:link, .ftl a:hover, .ftl a:visited, .ft a:active {
font-family: Tahoma;
font-weight: bold;
color: #d5d8df;
font-size: 10px;
}

.search {
padding: 0;
margin: 0;
font-family: Verdana;
font-size: 10px;
color: #5d5c66;
}

img.searchbox {
padding-top: 3px;
padding-bottom: 3px;
width: 465px;
height: 57px;
margin-left: 300px;
vertical-align: top;
}

**iTechno** · Jun 21, 2006 05:38

I hate to double post but does anyone have a solution? I'm stuck.

**gl3nnx** · Jun 21, 2006 05:51

hi itechno, very impressive XHTML strict, site of nintendo, wish i can make a valid XHTML scrict site hehe

**Paul O'B** · Jun 21, 2006 07:08

HI,

You need to clear the floated content properly

Code:

#left{clear:both}

You are using a div with a class of clear but you do not have a class defined for .clear anyway. You shouldn't need a physical clearer anyway when using the clearfix method