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 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2004
    Location
    Utah, USA
    Posts
    70
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help: CSS IE and Firefox

    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.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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>

  • #3
    New Coder
    Join Date
    Jul 2004
    Location
    Utah, USA
    Posts
    70
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Good tip. Thanks, worked great.

  • #4
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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.

  • #5
    New Coder
    Join Date
    Jul 2004
    Location
    Utah, USA
    Posts
    70
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by silverskymedia; 12-08-2005 at 08:13 PM.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.


  •  

    Posting Permissions

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