I’m making this site for my my job that (they actually laid me off [fired] yesterday), I designed using IE7 well, but upon testing in Firefox I noticed that my images are floating over my content container. Can somebody help me figure out work around or tell me the correct way of doing this. I validated both my HTML and my [URL=”http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.msands.com%2Ftesting%2Fproducts.html&profile=css21&usermedium=all&warning=1&lang=en”]CSS[URL=”http://validator.w3.org/check?uri=http%3A%2F%2Fwww.msands.com%2Ftesting%2Fproducts.html&charset=(detect+automatically)&doctype=Inline&group=0″]WC3
Any help would be appreciated.
Problem on two pages.
[url=”http://www.msands.com/testing/products.html”]Products
[url=”http://www.msands.com/testing/contactus.php”]Contact Us
CSS
body {
margin: 20px 0;
padding: 0;
background: #FFFFFF;
font: normal small tahoma, Arial, Helvetica, sans-serif;
line-height: 1.8em;
color: #000000;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-family: Arial, “Times New Roman”, Times, serif;
font-weight: normal;
color: #000033;
}
h3{
margin: 1em auto;
background:#002EB8;
padding: 10px;
font-weight:bold;
color:#FFFFFF;
}
a { color: #000D1A; }
a:visited{ color:#FF0000;}
a:hover {
text-decoration: none;
}
/* Navi
#navi {
width: 800px;
height: 40px;
margin: 0 auto;
background: #E0E0FF;
border: 10px solid #002EB8;
}
#navi ul {
margin: 0;
padding: 0;
list-style: none;
}
#navi li {
display: inline;
}
#navi a {
display: block;
float: left;
height: 32px;
padding: 8px 20px 0 20px;
border-right: 1px solid #002EB8;
text-decoration: none;
font-weight: bold;
color: #000080;
}
#navi a:hover {
background: #FFFFAD;
}
#navi .last {
float:right;
}
/* Header
#header {
width: 800px;
height: 180px;
margin: 0 auto;
background: url(images/headsprings.jpg);
border: 10px solid #002EB8;
border-top: none;
}
#header h1 {
padding: 75px 0 0 20px;
font-family:”Arial Black”;
font-weight:bold;
font-size: 1.8em;
color: #FFFFFF;
}
#header h2 {
padding: 0 0 0 20px;
font-size: .8em;
color:#FFFFFF;
}
#header a {
text-decoration: none;
color: #0000AD;
}
#breadcrum {
display:block;
width: 800px;
height: 1.7em;
background: #EFFCF0;
margin: 0 auto;
border: 10px #002EB8 solid;
border-top:none;
border-bottom:none;
}
#breadcrum ul{
margin:0; padding:0;display:inline; list-style:none; }
#breadcrum li{ margin:0; display:inline; Padding: 25px 10px 5px 10px; }
#breadcrum a{
font-weight:bold;
text-decoration: none;
}
#breadcrum a:hover{
background:#FFFFAD;
}
/* Content
#content {
width: 800px;
margin: 0 auto;
/*background: #EFFCF0 url(images/line.gif) repeat-y;
background:#EFFCF0;
border: 10px #002EB8 solid;
border-top: none;
}
#content p{
padding: 5px 10px 5px 10px;
line-height:1.3em;
}
#content h2{ padding: 10px 10px .5em 10px; }
#contentframe{
width: 800px;
margin: 0 auto;
background:#EFFCF0;
border: 10px #002EB8 solid;
border-top: none;
}
#fullcontent{ margin: 5px; }
.twcolumlft {
float:left;
width: 480px;
padding: 0 10px;
}
.twcolumrt{
margin: 0 5px 0 10px;
float:right;
width:240px;
padding: 0 20px;
background: #A8ABFF;
}
.twcolumrt img{
border: 0;
margin: 2px ;
text-align:center;
}
#newslinks{
padding: 10px 0 1em 0;
line-height: 1.4em;
}
#newslinks h2{
padding: 2px 2px 5px 10px;
color: #000A29;
border-bottom:thin dotted #000A29;
}
/* first session
#firstsection {
padding: 20px 0;
background: #EFFCF0;
border-bottom: 10px solid #002EB8;
}
#firstsection .title {
float: left;
width: 230px;
padding: 0 20px;
text-align: right;
line-height: 1.2em;
font-size: 2.2em;
}
#firstsection .content {
float: right;
width: 389px;
padding: 0 20px;
border-left: 1px solid #C6DAC7;
}
#firstsection .newline {
clear: both;
}
/* Footer
#footer {
margin: 20px auto;
width:800px;
font-size: 80%;
color:#666666;
padding: 10px;
}
#footer p{ margin:0px; }
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
.inlineul {
background:#FFFFAD;
margin:0 60px 1.5em 70px;
}
.inlineul ul{
margin:0;
padding:0;
list-style:none;
}
.inlineul li{ display:inline;}
.inlineul a{ }
.inlineul a:hover{
background:#FFFEFE;
}
#bookmarks{
text-align:center;
}
#bookmarks ul{list-style:none; display:inline; }
/*#bookmarks li{ margin: 5px 10px 5px 10px; }
#bookmarks a{
text-decoration: none;
font-weight:bold;
padding: 5px 10px 5px 10px;
}
#bookmarks a:hover{ text-decoration: underline; }
#sidewhite{ color:#FFFFFF; }
.credits { color: #FFFFFF; }
label{
width: 10em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}
#form{
}
#form input{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
border:thin #6CA8F0 solid;
background: #EEFCFD;
}
.submit input{ margin-left:10em; }
#form p{
margin:0;
}
.rtcolumwhtbg{
float:right;
width:240px;
background:#FFFFFF;
margin-left: 240px;
display:block;
}
.rtcolumwhitebg h2{
border-bottom:#000080 thin dotted;
}
#imgcol{
padding:3px;
float:left;
display:inline;
height:auto;
width:auto;
text-align:center;
background:#FFFFFF;
}
#imgcol img{
display:block;
border:none;
}
#imgcol .desc{
text-align: center;
font-weight: normal;
font-style: italic;
font-size:.7em;
width: 148px;
margin: 2px;
}
.current{
margin: 0 2px 0px 10px;
border-bottom: #0000AD thin solid;
color:#000088;
}
.module{
margin:10px;
border:none;
}
.module p{
margin: 0;
padding:0;
line-height:100%;
}
.module h4{
font-size: 1.8em;
color: #000033;
margin: 0;
padding: 0;
font-weight:bold;
}
.module img{
border: #EFFCF0 thin solid;
float:right;
}
.module img a:hover{
border: #FFFFAD thin solid;
}
.module ul{
list-style-type:square;
}
Any help would be greatly appreciated.