[SOLVED] FF and IE

[dare87]

For a website I am making it looks funny in FF but when you load it in IE it looks fine. What would cause this?

 

www.pureimprov.com

 

Here is the css

 

/*

=============================================================

HTML OBJECTS

=============================================================

*/



body {

position: relative;

margin: 0;

background: #bbbbbb;

}



/*

============================================================

HEADER OPTIONS

============================================================

*/



#box{
position: relative; width: 800px;
margin: 0 auto;

}

#box a:link {
color: #000000;
text-decoration: none;
}

#box a:visited {
color: #000000;
text-decoration: none;
}

#box a:hover {
color: #000000;
text-decoration: none;
}


#header{
position: absolute;
width: 823px;
height: auto;
top: 0px;
left: -11px;
}

/*

=============================================================

NEWS OBJECTS

=============================================================

*/


.newsDate {

font-size: 12px;

font-weight: bold;

padding-top: 7px;

padding-bottom: 7px;

}



.newsTitle {

font-size: 15px;

color: #425b31;

font-weight: bold;

padding-top: 7px;

padding-bottom: 15px;

}



.newsArticle {

word-spacing: 1px;

padding-bottom: 5px;

}



.newsSig {

font-size: 10px;

border-top: 1px dashed #000000;

padding-bottom: 10px;

}



.avatar {

padding-top: 25px;

padding-bottom: 5px;

}

/*

=============================================================

BODY OBJECTS

=============================================================

*/



#main {

position: absolute; top: 150px; left: -11px; width: 823px;

padding: 5px;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

background: url(../images/body.gif) repeat-y;

padding-bottom: 15px;

}

#content {

float: right;

width: 650px;

padding: 15px;

padding-right: 25px;

padding-left: 20px;

}



#content a:link {

color: #000000;

text-decoration: none;

font-weight: bold;

}



#content a:visited {

color: #000000;

text-decoration: none;

font-weight: bold;

}



#content a:hover {

color: #000000;

text-decoration: underline;

font-weight: bold;

}

.maintitle {

font-weight: bold;

font-size: 23px;

}

.subtitle {

font-style: italic;

font-size: 16px;

padding-left: 10px;

}

/*

=============================================================

IMAGES

=============================================================

*/



/*

=============================================================

LEFT SIDE BAR OBJECTS

=============================================================

*/



#sideBarLeft {

position: relative;

left: 15px;

float: left;

width: 125px;

padding-bottom: 15px;

}



#sideBarLeft ul {

margin: 0;

padding: 0;

list-style: none;

}



#sideBarLeft li {

width:100%;

display: block;

padding: 10px 0px 2px 0px;

font-weight: bold;

text-align:right;

}



#sideBarLeft li a {

horizontal-align: left;

width:94%;  

display: block; 

padding: 2px;

}



#sideBarLeft li a:link {

font: 11px Verdana, Arial, Helvetica, sans-serif;

color: #000000;

text-decoration: none;

border-bottom: 1px dashed #5b7aa4;

font-weight: normal;

}



#sideBarLeft li a:visited {

font: 11px Verdana, Arial, Helvetica, sans-serif;

color: #000000;

text-decoration: none;

border-bottom: 1px dashed #5b7aa4;

font-weight: normal;

}



#sideBarLeft li a:hover {

font: 11px Verdana, Arial, Helvetica, sans-serif;

color: #000000;

background: #e3e3e3;

font-weight: normal;

border-bottom: 1px dashed #5b7aa4;

text-decoration: none;

}



.sideBarTitle {

font: 12px Verdana, Arial, Helvetica, sans-serif;

border-bottom: 1px solid #000000;

}


/*

=============================================================

FOOTER OBJECTS

=============================================================

*/

#bottom {
clear: both;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
position: absolute;
left: 0px;
}

#bottom a:link {
color: #000000;
text-decoration: none;
}

#bottom a:visited {
color: #000000;
text-decoration: none;
}

#bottom a:hover {
color: #000000;
text-decoration: underline;
}

#bottom ul {
margin: 0;
padding: 0;
list-style: none;
}

#bottom li {
display: inline;
margin: 0;
padding: 0;
}

/*

=============================================================

REFERENCE OBJECTS

=============================================================

*/



.reference a:link {

color: #000000;

text-decoration: none;


}



.reference a:visited {

color: #000000;

text-decoration: none;

}



.reference a:hover {

color: #000000;

text-decoration: underline;

font-weight: bold;

cursor: help;

}

 

here is the php

 

<?php
// Include the PHP script that contains the session information.
include('includes/session.php');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Pure Improv | Think Easy</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="includes/base.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="includes/include.js"></script>

</head>

<body>
<div id="box">
<div id="header">
    	<?php include('includes/header.php'); ?>
</div>
<div id="main">
	<div id="sideBarLeft">
		<?php include('includes/left.php'); ?>
	</div>
	<div id="content">
		<div class="maintitle">Welcome to Pure Improv</div>
		<div class="subtitle">Bringing Improv Comedy To A New Level!</div><br>
		Welcome to Pure Improv, where two teams of actors go head to head in performing comedy acts, without scripts! All the ideas come from the audience and anything can happen. Pure Improv is dedicated to providing a family friendly laugh out loud experience that will have you laughing well after you leave the theater.
	</div>
	<div id="bottom">
		<?php include('includes/bottom.php'); ?>
	</div>
  </div>
</div>

</body>
</html>

[SuperBlue]

It looks exactly as if you have forgotten to clear your floats, just add "clear:both;" on an element coming after your floating element, such a copyright at the bottom, or company contact info.

 

In general i suggest people to use position instead of floats whenever possible, because that way it wont matter in which order you place your content. For instance, one would think that it would be better to have a "content" div placed before any links in the document, that way you ensure better search results on search engines. 

[dare87]

i'm not sure I understand. I placed clear:both; after my floats:*; am i putting it in the wrong spot?

 

Thanks

[SuperBlue]

Yes, that was not what i ment, so lets remove the clear:both; from where it is now, shell we.  ??? 

 

you need to place a element after the floated element'(s), i'll give you an examble.

In the followering examble i simply add "clear:both;" to a element coming after the floated elements.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="eng">

  <head>
    <style type="text/css">
      #Basement {
        margin: 0 auto; /* Centers the Container */
        background: silver;
        width: 40em;
      }
      #LeftContent {
        float: left;
        width: 10em;
      }
      #RightContent {
        float: right;
        width: 10em;
      }
      ol {
        margin: 0; /* Removes the standard margin on the ol. */
        list-style-type: disc;
      }
      #Basement p {
        margin: 0 auto;
                  /* centers our text */

        width: 15em;
      }
    </style>
  </head>

  <body>
    <div id="Basement">
      <div id="LeftContent">
       <ol>
        <li>MenuItem</li>
        <li>MenuItem</li>
        <li>MenuItem</li>
        <li>MenuItem</li>
        <li>MenuItem</li>
        <li>MenuItem</li>
        <li>MenuItem</li>
        <li>MenuItem</li>
       </ol>
      </div>
      <div id="RightContent">
       <ol>
        <li>MenuItem</li>
        <li>MenuItem</li>
        <li>MenuItem</li>
        <li>MenuItem</li>
       </ol>
      </div>
       <p>Clearing the float's to make the container expand with its content</p>
       <p style="clear: both;">Copyright 2008 Blah Blah</p>
    </div>
  </body>

</html>

 

Note: If you are onlu floating one element, you could simply use clear:right; or clear:left;.

[dare87]

thanks. I got it working