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 3 of 3
  1. #1
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts

    CSS works in all but Mozilla

    Hi all,

    Here is a dummy version of a site I am working on. The problem is the body text (#maincon div) on the left is breaking out of the "box" on Mozilla 1.7.10+ and it's driving me crazy!!! It works in everything else that I've test so far.

    Can someone see if I'm missing something somewhere? Here is the code with the styles as well:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>CSS Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    body {
    	height: 100%;
    	margin: 20px;
    	background: #D0D58A url(images/bkgd0.gif) repeat scroll left top;	
    	color: #333333;
    	text-align: center;
    	padding: 0;
     }
    
    #outer {
    	text-align: left;
    	border: 1px solid #74003C;
    	width: 770px;
    	margin: auto;
    	background:  url(images/bgd_out.gif) repeat-y scroll left top;
     }
    
    #hdr {
    	height: 123px;
    	width: 622px;
    	background: #FFFFFF url(images/test.gif) no-repeat scroll left top;
     }
    
    #bar {
    	width: 622px;
    	height: 25px;
    	background: #D0D58A url(images/2navbgd.gif) repeat-x scroll left top;	
     }
     
     /* animations */
     #anim {
    	width: 148px;
    	height: 231px;
    	margin: 0px;
    	padding: 0px;
    	z-index: 10;
    	background:  #00FF00;
    }
    
    #date {
    	width: 180px;
    	height: 20px;
    	float: left;
    	margin: 2px 0 0 5px;
    	padding: 2px 0 0 5px;
    	z-index: 10;
    	font: normal normal normal 12px Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
    	color: #997400;
    }
    
    h2 {
    	text-align: center;
    	color: gray;
    	font: lighter 24px Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
    	text-shadow: 2px 2px 3px #999;
    }
    
    #leftcol {
    	width:  622px;	
    	height: 400px;
    	float: left;
    	background: #EAF6FF;
    	margin: 0;
    	padding: 0;
     }
     
    #rightcol {
    	width: 148px;	
    	height: 400px;
    	top: 0px;
    	float: right;
    	background: #74003C;
    	margin:0;
     }
    
    /* right column news */
    #news {
    	font: normal 10px Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
    	text-align: left;
    	color: white;
    	width: 138px;
    	background: #74003C;
    	padding: 5px;
    	z-index: 3;
    	text-decoration: none;
    }
    
     /* Navigation bar */
    #navcontainer  {
    	width: 622px;
    	height: 25px;
    } 
     
    ul#navlist {
    	top: 0;
    	margin: 0;
    	padding: 0;
    }
    
    #navlist li {
    	width: 84px;
    	display: inline;
    	list-style-type: none;
    }
    
    #navlist a { 
    	width: 84px;
    	font: bold 14px/26px Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
    	color: #997400;
    	text-aliogn:center;
    	border-right: 1px solid #FFFFFF;
    	padding: 3px 5px 3px 3px; 
    	background: transparent url(images/2navbgd.gif) no-repeat scroll 0px 0px;
    	text-decoration: none;
    }
    
    #navlist a:hover {
    	width: 84px;
    	color: #FFFFFF;
    	background-color: #74003C;
    	text-decoration: none;
    }
    
    /* bottom navigation bar */
    #footcontainer ul{
    	display: block;
    	clear: both;
    	padding: 5px 0px;
     	margin: 0px;
    	width: 770px;
    	height: auto;
    	border-top: 1px solid #fff;
    	font: normal 10px Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
    	text-align: center;
    	background: #006248;
    	overflow: hidden;
    }
    
    #footcontainer ul li {
     	display: inline;
     	list-style-type: none;
     	padding: 0px 20px 0px 0px;
     	margin: 0px;
    	color: #70BEAA;
     }
     
    #footcontainer ul li a{
     	font: normal 10px Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
    	color: #43A389;
    	text-decoration: none;
     }
     	
    #footcontainer ul li a:hover{
    	text-decoration: underline;
     }
     
     /* main body content */
    #maincon {
    	font: normal 12px Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
    	color: #7F7D71;
    
    }
    
    .disclaimer {
    	font: normal 10px Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
    }
    </style>
    </head>
    <body>
    <div id="outer">
    	<div id="leftcol" align="left">
    		<div id="hdr" align="left"></div>
    		<div id="bar">
    			<div id="date">date here</div>
    			<ul id="navlist">
    			<li><a href="http://" accesskey="1" title="link1">link1</a></li>
    		 	<li><a href="http://" title="link2">link2</a></li>
    			<li><a href="http://" title="link3">link3</a></li>
    			<li><a href="http://" accesskey="9" title="link4">link4</a></li>
    			</ul>
    		</div>
    		<div id="maincon">
    		<h2>Welcome</h2>
    		<h3>sub header here</h3>
    		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin non lorem. Duis adipiscing suscipit est. Pellentesque sit amet nunc vitae leo auctor aliquet. Vivamus ac dui sit amet lorem ornare suscipit. Aliquam sed nibh eget pede facilisis vestibulum. Vivamus velit. Phasellus id dui. Praesent non nulla eget ligula sodales tristique. Donec fringilla odio quis mi. Nullam pede. Aliquam erat volutpat. Sed orci eros, vestibulum vitae, condimentum vel, hendrerit vel, sapien. Curabitur sit amet massa vel leo fermentum dapibus. Proin sem augue, placerat vestibulum, dapibus at, congue id, tortor.</p>
    <p>
    Aliquam semper volutpat quam. Nunc tempor ante vitae enim. Nulla sem erat, lobortis sit amet, vehicula ut, vehicula ac, dolor. Aenean quam. Curabitur pede. Nullam sodales urna a tortor. Phasellus magna purus, convallis ut, mattis sed, dictum et, lorem. Aenean fringilla orci lobortis massa. Praesent ut dolor ornare sapien bibendum bibendum. Nunc mi turpis, mattis id, accumsan nec, feugiat vitae, sapien.</p>
    <p>
    Sed consectetuer fermentum lacus. Aenean quam. Vestibulum vel tortor convallis pede euismod fringilla. Phasellus ultrices lobortis quam. Proin eu massa. Aliquam porttitor libero at enim. Aenean sed velit. Cras tincidunt. Vivamus id mauris sit amet leo ultrices convallis. Ut malesuada cursus neque. Sed at nisi nec nisi bibendum tristique. Suspendisse lorem nulla, volutpat et, blandit eu, eleifend vel, leo. Morbi auctor. Maecenas eget quam eu purus mollis nonummy. Integer volutpat dignissim purus. Mauris hendrerit, sapien sit amet ultrices posuere, sapien mauris sollicitudin justo, vel tristique tortor orci convallis dui. Aliquam dignissim eros in sem iaculis ultrices. Ut viverra eros quis enim. </p>
    		
    		</div>	
    	</div>
    	<div id="rightcol" align="right">
    		<div id="anim" align="right"></div>
    		<div id="news"><strong>Happenings:</strong><br />
    		Aliquam semper volutpat quam.<br />
    		Nunc tempor ante vitae enim. <br />
    		Nulla sem erat, lobortis sit amet, <br />
    		vehicula ut,</div>
    	</div>	
    	<div id="footcontainer">
     		<ul>
    		<li>Copyright &copy; 2005</li>
    		
     		</ul>
     	</div> 
    </div>	
    </body>
    </html>
    thanks for any 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
    Lose the height in #leftcol and make your #footercontainer clear:both;

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    d'oh! I can't believe it was something that stupid I missed. Worked like a charm thanks.


  •  

    Posting Permissions

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