Help: CSS IE and Firefox

silverskymedia · 12-08-2005, 04:45 AM

How do I construct this page to look right in both IE and Firefox?

http://www.rapiddeploymentinc.com/default.html

It looks good in Firefox, but then in IE it's just slightly off. Thanks for the help.

_Aerospace_Eng_ · 12-08-2005, 04:58 AM

You do not need to position EVERYTHING absolute.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
	margin: 0; 
	padding: 0; 
	background: #b8bdc3 url(images/body_bg.gif) repeat-x top; 
	font: 12px 'lucida grande', geneva, arial, verdana, sans-serif; 
	color: #000;
}
#container {
	width:780px;
	margin:auto;
}
#top {
	height:75px;
	background-color: #FFFFCC;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
}
#mainmenu {
	height:40px;
	background-color: #FF9933;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
}
#header {
	height:150px;
	background-color: #00FFFF;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
}
#content {
	width:653px;
	height:350px;
	float:left;
	background-color: #FFFFFF;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
}
#footer {
	height:45px;
	clear:both;
	background-color: #FF9900;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
}
#leftnav {
	float:left;
	width:125px;
	height:350px;
	background-color: #FF9900;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
}

p {
	margin:0;
	padding:0 5px;
	text-align:justify;
}
-->
</style>
</head>
<body>
<div id="container">
	<div id="top"></div>
	<div id="mainmenu"></div>
	<div id="header"></div>
	<div id="leftnav"></div>
	<div id="content">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum interdum, ante a mattis laoreet, erat lorem tempor ipsum, faucibus pretium magna odio et pede. Fusce a libero interdum libero faucibus commodo. Pellentesque posuere lectus ut pede. Aenean sed dui. Cras rutrum facilisis sem. Nulla consectetuer. Nam pulvinar, quam vitae lobortis commodo, sem sapien auctor metus, consequat iaculis libero nulla in neque. Nulla facilisi. Ut facilisis aliquam nunc. Duis posuere lectus. Donec eu mauris. Mauris ultrices, velit a rutrum auctor, tortor sem scelerisque nunc, a commodo pede sapien eget nulla. Integer tincidunt est sit amet arcu.</p>
		<p>Curabitur augue justo, aliquet non, facilisis vitae, ullamcorper dapibus, elit. Phasellus sodales sapien vitae lacus. Quisque nisl. Donec nonummy. Morbi placerat pede ut risus. In fringilla arcu ut sapien. Mauris sed sem. Mauris ornare, diam non dignissim ultrices, libero ligula facilisis tortor, id volutpat leo magna nec urna. Nulla tempus. Sed mattis molestie nisi. Maecenas pede arcu, porta eu, aliquam rhoncus, varius quis, libero. Suspendisse potenti. Maecenas rutrum arcu nec orci. Maecenas egestas. Fusce ornare, odio pulvinar blandit varius, nisl justo venenatis dolor, varius viverra dolor velit et dui.</p>
		<p>Suspendisse dapibus felis et nibh. Nullam nec elit sed massa gravida interdum. Nam orci quam, facilisis in, pulvinar vitae, convallis at, neque. Maecenas molestie auctor augue. Nullam vehicula ante. Sed vel elit. Quisque tempor leo ac diam. Aenean venenatis nisi sit amet nisi. Vivamus sodales. Donec auctor. Aenean aliquet. Nam libero. In pellentesque, elit sit amet consequat varius, nisl diam facilisis elit, ullamcorper volutpat odio lectus sit amet lectus. Vivamus dapibus purus non ante. Nunc hendrerit. Donec imperdiet. Aliquam dui elit, condimentum ac, lacinia in, cursus nec, purus. Vivamus cursus risus. Ut lacinia felis sagittis magna.</p> 
	</div>
	<div id="footer"></div>
</div>
</body>
</html>

silverskymedia · 12-08-2005, 05:04 AM

Good tip. Thanks, worked great.

drhowarddrfine · 12-08-2005, 02:07 PM

Quote:

both IE and Firefox

Make sure you use a proper doctype. Using one keeps IE from going into 'quirks' mode and keeps all browsers on the same set of rules. Otherwise, you may find modern browsers working correctly but differently than old, buggy IE.

silverskymedia · 12-08-2005, 08:07 PM

Quote:

Originally Posted by drhowarddrfine

Make sure you use a proper doctype. Using one keeps IE from going into 'quirks' mode and keeps all browsers on the same set of rules. Otherwise, you may find modern browsers working correctly but differently than old, buggy IE.

OK, what's the proper doctype? I thought I was using the proper one.

_Aerospace_Eng_ · 12-08-2005, 08:15 PM

What I used is fine, you have the choice between the first 2 and the 4th and 5th one on this page http://www.w3schools.com/tags/tag_doctype.asp You can use the frameset ones but only if your page consists of a frameset.