...

View Full Version : CSS works in all but Mozilla



finstah1
12-13-2005, 08:05 PM
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:



<!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 :)

_Aerospace_Eng_
12-13-2005, 08:27 PM
Lose the height in #leftcol and make your #footercontainer clear:both;

finstah1
12-13-2005, 09:06 PM
d'oh! I can't believe it was something that stupid I missed. Worked like a charm thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum