#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2005
    Posts
    86
    Rep Power
    14

    Internet Explorer's broke it (again), My float won't work in explorer


    Hi, my site (http://2ndrevolution.co.uk) works fine in Firefox, but when it's viewed in Explorer the navigation messes up. Could you please take a look and suggest a fix for me.

    CSS Code:
    body,td,th {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	color: #CCCCCC;
    	font-size: small;
    }
    body {
    	background-color: #333333;
    	margin: 0; /* to avoid margins */
    	text-align: center; /* to correct the centering IE bug*/
    	font-size: small;
    }
    a:link {
    	color: #FFCC00;
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    	color: #FFCC00;
    }
    a:hover {
    	text-decoration: underline;
    	color: #CCCCCC;
    }
    a:active {
    	text-decoration: none;
    	color: #FFCC00;
    }
    #main {
    	background-attachment: scroll;
    	background-color: #333333;
    	background-repeat: no-repeat;
    	display: block;
    	background-position: left top;
    	width: 800px;
    	border: none;
    	visibility: visible;
    	height: 100;
    	padding: 3px;
    	margin-left: auto;
    	margin-right: auto;
    	clear: both;
    	text-align: left;
    }
    #navigationtop {
    	background-image:url(/Images/images/Nav_Top.gif);
    	height: 21px;
    }
    #navigation {
    	border: none;
    	margin: 0px;
    	background-repeat: repeat;
    	background-image: url(/Images/images/Nav_Main.gif);
    	float: left;
    	text-align: center;
    }
    #content {
    	padding: 3px;
    	margin-left: 165px;
    	vertical-align:top;
    }
    #ads {
    	float: right;
    	padding: 3px;
    	vertical-align:top;
    }
    #footer {
    	padding: 3px;
    }
    #contentbox {
    	padding: 5px;
    	width: 130px;
    	height: 101px;
    	overflow: auto;
    }


    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>2ndRevolution.co.uk - </title>
    <link href="/css.css" rel="stylesheet" type="text/css" />
    <script language="javascript">
    <!--
    function logout() {
        var answer = confirm("Are you sure you want to logout?")
         if (answer){
    		window.open('/logout.php','logout','width=200,height=100,left = 312,top = 84');
    		window.close();
         }
    }
    -->
    </script>
    </head>
     
    <body>
    <div id="main">
    	<img src="/Images/images/Header3.gif" alt="Header" />
    	<div id="navigation">
     
    		<div id="navigationtop">jebbench</div>
    		<p>
      <a href="http://forums.2ndrevolution.co.uk">Forum</a><br>
      <a href="/videos">Videos</a><br>
      <a href="/Games">Games</a><br>
      <a href="/more">More</a><br>
     
      <!--<a href="/radio">Radio</a><br />-->
    <a href="#" onClick="window.open('/ctrl.php','ctrl','width=600,height=400,left = 312,top = 84, scrollbars = 1'); return false;">My Panel</a>	<p>
    	  <a href="#" onClick="logout();">Logout</a><br />
    	<center>
    <div id="contentbox">
    <ul id="shoutboxmessage">
    <li><strong>Guest</strong>: hi</li><li><strong>Guest</strong>: Ello Fello</li><li><strong>Guest</strong>: weirdo
     
    </li><li><strong>Guest</strong>: i like table tennis and shoot dog</li><li><strong>Guest</strong>: BOB
    </li><li><strong>Guest</strong>: hehe:wtf</li><li><strong>Guest</strong>: hiya</li><li><strong>Guest</strong>: hi
    </li><li><strong>Guest</strong>: hehe
    </li><li><strong>Guest</strong>: ummm</li></ul></div><div>
      <form method="post" action="/Games/index.php">
     
        <strong>Message:</strong><br/>
        <textarea name="message" cols="15" class="submitbox" rows="2"></textarea>
        <br/>
        <input type="submit" name="shoutsubmit" value="GO!">
      </form>
    </div>
    </center>  <a href="#" onclick="window.open('/smileys.html','Smileys','width=200,height=300');">Smileys</a><br /><br />
    		<img src="/Images/images/Nav_Bottom.gif" alt="Navigation End" />
     
    	</div>
    	<div id="ads">
    		<!--Google Ads-->
    		<script type="text/javascript"><!--
    		google_ad_client = "pub-4501852315641113";
    		google_ad_width = 120;
    		google_ad_height = 600;
    		google_ad_format = "120x600_as";
    		google_ad_type = "text_image";
    		google_ad_channel ="0412946773";
    		google_color_border = "333333";
    		google_color_bg = "333333";
    		google_color_link = "FFCC00";
    		google_color_url = "FFCC00";
    		google_color_text = "CCCCCC";
    		//--></script>
    		<script type="text/javascript"
    		  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    		</script>
    		<!--End Google Ads-->
    	</div>
    	<div id="content">
     
    		<p>
    		<p><a href='/' target="_self">2ndRevolution</a> &gt; <a href='/Games/' target="_self">Games</a> &gt; Index		<br /><br /><p>2ndRevolution Games </p>
    <ol><li><a href="Bordometer.php">Bordometer</a></li>
      <li><a href="Monkey%20Invaders.php">Monkey Invaders</a></li>
     
      <li><a href="Bordometer22.php" target="_self">Bordometer 2 </a></li>
      <li><a href="Moon%20Defender.php">Moon Defender </a></li>
      <li><a href="BBall.php">BBall</a></li>
      <li><a href="County%20Battle.php">Country Battle</a> </li>
      <li><a href="Ship.php">Asteroid Ship</a></li>
      <li><a href="Frog.php">Frog</a></li>
     
      <li><a href="Hunted.php">Hunted</a></li>
      <li><a href="Vs.php" target="_self">Vs.</a></li>
      <li><a href="Terror_Shoe.php" target="_self">Terror Shoe</a></li>
      <li><a href="Flash/Bomb/bombs_High_Scores.php" target="_self">Bombs</a> - With High Scores</li>
      <li><a href="Bordometer2.php">Bordometer 3</a> - with High Scores </li>
     
    </ol>
    <p>Join the <a href="http://forums.2ndrevolution.co.uk">Forums</a> for access to over 70 Games </p>
    <p>Downloads</p>
    <ol>
      <li><a href="/Downloads/Number_Guesser/setup.exe">Number Guesser</a> (Lame but I'm getting there) </li>
    </ol>
    </p>
      	</div>
     
    	<br />
    	<center><img src="/Images/images/Footer.gif" alt="Footer"/></center>
    	<div id="footer">
    		&copy; James Bench
    		<center>
    					<!-- Start of StatCounter Code -->
    			<a href="http://my.statcounter.com/project/standard/stats.php?project_id=398918&amp;guest=1;" >
    		<script type="text/javascript">
    		<!-- 
    		var sc_project=398918; 
    		var sc_invisible=0; 
    		var sc_partition=2; 
    		var sc_security=""; 
    		var sc_text=2; 
    		var sc_remove_link=1; 
    		//-->
    		</script>
     
     
    		<script type="text/javascript" src="http://www.statcounter.com/counter/counter_xhtml.js"></script></a> Hits so far.<br />
    		<!-- End of StatCounter Code --></center>
     
    		<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    _uacct = "UA-244011-1";
    urchinTracker();
    </script>
    	</div>
    </div>
    </body>
    </html>


    Thanks
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    Before starting any debugging, you should validate and correct all errors in your html. You cannot expect consistent results while using invalid markup. Further, any new document should be validated against a strict DTD. There is no sane reason to use deprecated elements and attributes.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2005
    Posts
    86
    Rep Power
    14
    OK, I've got it down to 2 errors which i don't understand (any help would be appreciated) but it still won't work in Explorer.
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    2,999
    Rep Power
    1228
    Originally Posted by jebbench
    OK, I've got it down to 2 errors which i don't understand (any help would be appreciated) but it still won't work in Explorer.
    Paragraphs cannot contain block-level elements (like div, table, form etc).

    Comments on this post

    • jebbench agrees : Thanks
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2005
    Posts
    86
    Rep Power
    14
    OK, i've got rid off all the errors, but the page still won't display in IE. Any ideas???
    Thanks
  10. #6
  11. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    Not tested.

    Give #navigation a width, #navigation {width: 165px;}.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2005
    Posts
    86
    Rep Power
    14
    I didnt try it, in the end i changed the CSS to
    CSS Code:
    #navigationtop {
    	text-align:center;
    	background-image:url(/Images/images/Nav_Top.gif);
    	width: 164px;
    	height: 21px;
    	display:block;
    }
    #navigation {
    	border: none;
    	margin: 0px;
    	background-repeat: repeat;
    	background-image: url(/Images/images/Nav_Main.gif);
    	float: left;
    	text-align: center;
    	display:block;
    }


    and the html

    HTML Code:
    <div id="navigationtop"><?php echo($_SESSION[username]); ?></div>
    	<div id="navigation">	
    		<?php require('nav.php'); ?><br />
    		<img src="/Images/images/Nav_Bottom.gif" alt="Navigation End" />
    	</div>


    I took the navigation top div out of the navigation div, it works better in a way because i can lose a <br /> at the top of the content!
    IE doesn't seem to like nested DIV's

    Thanks for the help anyways.
  14. #8
  15. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    IE handles nested divs just fine. What it doesn't handle is bad code. If you had no intent of trying the suggestions you receive, why ask?

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2005
    Posts
    86
    Rep Power
    14
    I would have tried it if i hadn't all ready figured out a work around, thanks for the help, but i don't want to change all the code back just to try giving the navigation a width. If i get the same problem again ill try it.

IMN logo majestic logo threadwatch logo seochat tools logo