/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Problems with Floating In Firefox 3

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] using [URL=”http://validator.w3.org/check?uri=http%3A%2F%2Fwww.msands.com%2Ftesting%2Fproducts.html&charset=(detect+automatically)&doctype=Inline&group=0″]WC3[/URL] Validators and I’ve passed, but this isn’t working the way I’d like.

Any help would be appreciated.

Problem on two pages.

[url=”http://www.msands.com/testing/products.html”]Products[/url]
[url=”http://www.msands.com/testing/contactus.php”]Contact Us[/url]

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.

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@CentauriJun 18.2008 — You haven't cleared the floats :[CODE]#content {
width: 800px;
margin: 0 auto;
/*background: #EFFCF0 url(images/line.gif) repeat-y;*/
background:#EFFCF0;
border: 10px #002EB8 solid;
border-top: none;
[COLOR="Red"]overflow: hidden;[/COLOR]
}[/CODE]
Copy linkTweet thisAlerts:
@bclincyauthorJun 18.2008 — That worked perfectly thank you!

You haven't cleared the floats :[CODE]#content {
width: 800px;
margin: 0 auto;
/*background: #EFFCF0 url(images/line.gif) repeat-y;*/
background:#EFFCF0;
border: 10px #002EB8 solid;
border-top: none;
[COLOR="Red"]overflow: hidden;[/COLOR]
}[/CODE]
[/QUOTE]
×

Success!

Help @bclincy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...