...

View Full Version : Cross Browser Compatability (floats)



saintd666
11-09-2010, 05:42 PM
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.


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

teedoff
11-09-2010, 05:46 PM
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.

saintd666
11-09-2010, 06:40 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum