CSS IE/Firefox 1

ponderdj · Apr 24, 2005

Hello,

For awhile, I've been meaning to fix my webpage to display correctly on Firefox. I was content with it looking good in IE because of the 95%+ thing, but really want it to be "correct" now. Can anyone tell me why my content div shows up where it does in Firefox and if there is a way to fix it without messing with IE? Also, for some reason the auto-scroll isn't working for the content div and I'm not sure why. The page is at:

http://www.david-lauren.com

Any help would be greatly appreciated.

Code:

html, body {
	margin: 0;
	padding: 0;
	background-color: #000;
	color: #333;
	
	}
a:link{
	color: #8BC44D;
	text-decoration: none;
	}
a:hover{
	text-decoration: underline overline;
	color: #FFFF66;
	}
a:visited{
	color: #8BC44D;
	text-decoration: none;
	}
#nav1 {
	width: 175px;
	float: left;
	margin-left: 0px;
	padding: 10px;
	border-right: 0px solid #FFF;
	color: #FFF;
	height: 55%;
	}

#join{
	clear: left;
	float: left;
	padding: 3px, 0px, 0px, 0px;
	}
	
#content {
	padding: 5px;
	width:98%;
	margin-left: 176px;
	height: 45%;
	border-left: 0px solid #000;
	color: #996600;
	overflow: auto;
	scrollbar-face-color : #996600;
    scrollbar-track-color: #660000 ;
	scrollbar-arrow-color: #660000 ;
    scrollbar-shadow-color: #660000 ;
    scrollbar-highlight-color: #996600 ;
    scrollbar-darkshadow-color: #996600 ;
	}

#header {
	background-color: #000;
	color: #FFF;
	border-bottom: 0px solid #FFF;
	margin-bottom: 0px;
	}
	
#footer {
	background-color: #19517F;
	color: #FFF;
	border: 0px solid #000;
	text-align: center;
	padding: 0px;
	clear: both;
	}
	
#divbar{background-color:#996600;
        width:100%; 
		height: 10px;
        z-index: 2;
		border-top: 0px solid #FFF;
		border-bottom: 0px solid #FFF;
		clear: all;
		color: #FFF;
		filter: alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=200, FinishY=0);
		float: left;		
		}
		
.spacer {
	clear: both;
	}
	
p {
	padding: 0;
	margin-top: 0px;
	font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Helvetica, Arial, sans-serif;
	}

dd, dt {
	font-family: 'Lucida Grande', Verdana,  Geneva, Lucida, Helvetica, Arial, sans-serif;
	font-size: 0.95em;
	}

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<link rel="stylesheet" href="2col.css" type="text/css">
<style type="text/css">
</style>


<title>David and Lauren's Wedding</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<div id="header"> 
  <div align="center"><a href="index.php"><img src="./images/Header.jpg" border="0" align=left></a> 
  </div>


<!-- Divbar divides header/content -->

<div id="divbar"></div>
 

<!-- Begins Navbar -->
<div id="nav1"> 
  <table border="0" align="left">
    <tr> 
      <td><a href="directions.php"><img src="images/Directions_Rollover.jpg" width="99" height="104" border="0"></a></td>
    </tr>
    <tr> 
      <td><a href="registry.php"><img src="images/Registry_Rollover.jpg" width="99" height="95" border="0"></a></td>
    </tr>
    <tr> 
      <td><a href="rsvp.php"><img src="images/RSVP_Rollover.jpg" width="99" height="115" border="0"></a></td>
    </tr>
    <tr> 
      <td>&nbsp;</td>
    </tr>
    <tr> 
      <td>&nbsp;</td>
    </tr>
  </table>
</div>
<!-- Ends Navbar -->
<div id="content"> 

<!-- Enters Page in Content div -->

ChrisHunt · Apr 25, 2005

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

That's only half a DOCTYPE, which means that browsers will render the page in "quirks" mode - with each one displaying its own quirky behaviour. Use this instead:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

and both IE6 and FF will apply (more-or-less) the same rendering rules, making it easier to get them looking the same. Be warned that the effect of getting it to follow the rules will initially be to "break" the IE rendering of the page - you'll have to change things to get it looking right again.

Try running your pages through the validator at

http://validator.w3.org

- it'll point out some errors in your code that may be confuse the browser. For example, you seem to be missing an opening <body> tag.

Finally, if you're David or Lauren, all the best for the big day!

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

ponderdj · Apr 25, 2005

Chris,

Thank you, I have meant to run the page through the validator, but was ignorant about my DOCTYPE. I really appreciate your help. The great people of this board always amaze me!

David

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS IE/Firefox 1

ponderdj

MIS

ChrisHunt

Programmer

ponderdj

MIS

Similar threads

Part and Inventory Search

Sponsor