Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Location
    Kansas
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Cross Browser Compatability (floats)

    I have been working to make a web page for my band. I have been coding it using notepad and previewing it in FF.

    Now for my problem...
    After days of coding this page and all the other pages, it dawned on my to open it in chrome and safari.

    My floats won't work any longer. I've tried a handful of different things, but it just keeps making it worse. Here is where my code is in it's "working FF" phase.

    Any help would be appreciated.

    Code:
    <html>
    <head>
    	<!--
    	******************************************************
    		Devin Keister
    		August 30, 2010
    		Web Design I
    		Left On Havana Website Project
    	******************************************************
    	-->
    	<title>Left on Havana</title>
    	<style type="text/css">
    	body{
    		margin: 0;
    		padding: 0;
    		font-family: Arial, Helvetica, Sans-serif;
    		background-color: #111;
    		color: #fff;
    	}
    	#container{
    		background-color: #000;
    		width: 960px;
    		margin: 0 auto;
    		position:relative;
    	}
    	#topbar{
    		background-color: #000;
    		height: 150px;
    		width: 665;
    		float: left;
    		padding: 0;
    		margin: 0;
    	}
    	#sidebar{
    		background-color: #fff;
    		width: 75px;
    		height: 550px;
    		float: right;
    	}
    	#nav{
    		width: 70px;
    		float: right;
    		margin: 0;
    		padding: 150px 0 0 0;
    		font-family: Impact, Helvetica, Sans-serif;
    	}
    	#nav li{
    		list-style-type: none;
    		color: #ff9;
    		margin: 0;
    		padding: 0;
    		line-height: 25px;
    		height: 25px;
    		text-align: left;
    	}
    	#nav ul{
    		margin: 0;
    		padding: 0;
    	}
    	#nav a{
    		color: #333;
    		text-decoration: none;
    		margin: 0;
    		padding: 0 0 0 5px;
    		-moz-border-radius-topright: 10px;
    		-moz-border-radius-bottomright: 10px;
    		-webkit-border-top-right-radius: 10px;
    		-webkit-border-bottom-right-radius: 10px;
    		background-color: #111;
    		display: block;
    		border-top: solid 1px #fff;
    		border-right: solid 1px #fff;
    		border-bottom: solid 1px #fff;
    		text-align: left;
    	}
    	#nav a:hover{
    		color:	#fff;
    		background-color: #222;
    		display: block;
    		line-height: 25px;
    		width: 71px;
    		padding: 0 0 0 5px;
    		margin: 0;
    	}
    	#main{
    		float: right;
    		padding: 0;
    		margin: 0;
    	}
    	#content{
    		background-color: #000;
    		width: 635px;
    		height: 400px;
    		margin: 0;
    		padding: 0 170px 0 10px;
    		overflow: auto;
    		text-align: justify;
    	}
    	#content h2{
    		color: #888;
    		font-family: Arial, Helvetica, Sans-serif;
    	}
    	#sidepic{
    		background-color: #222;
    		width: 150px;
    		height: 550px;
    		position: absolute;
    		top: 0px;
    		right: 0px;
    		margin: 0;
    		padding: 0;
    	}
    	#palm{
    		margin: 0 0 0 -55px;
    	}
    	#bpho{
    		position: absolute;
    		top: 180px;
    		right: 0;
    		margin: 0;
    		padding: 0;
    	}
    	#footer{
    		background-color: #555;
    		color: #222;
    		text-align: center;
    		margin: 0;
    		padding: 0;
    		-moz-border-radius-bottomleft: 5px;
    		-moz-border-radius-bottomright: 5px;
    		-webkit-border-bottom-left-radius: 5px;
    		-webkit-border-bottom-right-radius: 5px;
    	}
    	.clearfloat{
    		clear:both;
    	}
    
    	</style>
    
    
    </head>
    <body>
    	<div id="container">
    		<div id="sidepic">
    		<img id="palm" src="images/tree3.png"></img>
    		</div> <!--sidepic-->
    
    		<div id="bpho">
    		<img src="images/bandpic.png"></img>
    		</div> <!--bpho-->
    
    		<div id="main">
    		
    			<div id="topbar"></div> <!--topbar-->
    
    			<div id="content">
    				<h2> Dude... You messed up!</h2>
    				<p> We can't believe you actually thought we had a that page! What's even worse? Since you typed that adress, <i>you</i> probably think you know what you're doing. That's sad... so very <i>very</i> sad.
    <br />
    <br />
    Kick yourself in the nuts. <br />
    <i>Do it!</i>
    You deserve it.
    				</p>
    			</div> <!--content-->
    		</div> <!--main-->
    
    		<div id="nav">
    			<ul>
    				<li><a href="mainpage.html">Main</a></li>
    				<li><a href="about.html">About</a></li>
    				<li><a href="media.html">Media</a></li>
    				<li><a href="contact.html">Contact</a></li>
    			</ul>
    		</div> <!--nav-->
    
    		<div id="sidebar">
    		<img src='images/lohlogo.png' />
    		</div> <!--sidebar-->
    
    			<div class="clearfloat">
    
    		<div id="footer">
    		<p> Copyright &copy; 2010 Devin Keister </p>
    		</div> <!--footer-->
    			</div> <!--clearfloat-->
    
    
    	</div> <!--container-->
    </body>
    </html>
    This IS a school project by the way!

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    First thing would to too add a valid doctype. IE is picky when it comes to rendering pages with no doctype specified. Read the sticky in this very forum at the top about doctypes.

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Location
    Kansas
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow! well i dont really understand why, but this did help. Had to place another clearfloat around my content div but it works fine now.

    Thank you


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •