/    Sign up×
Community /Pin to ProfileBookmark

Problem with FF

This code works in IE but not in FF
css

[code]
body {
margin: 0;
padding: 0;
text-align: center;
background: url(images/buy-property.gif) repeat-x;
height: 100%;
}
#contall {
text-align: left;
margin: 0px auto 0px auto;
padding: 0px;
border:0;
width: 772px;
}

#header {
margin: 0 0 0px 0;
background: url(images/realestate-comfort.jpg) no-repeat top;
height: 117px;
}
#containerhead{
background: url(images/buy-real-estate.jpg) no-repeat top;
height: 267px;
}
#container{
height: 100%;
background-image: url(images/conback.gif);
}
#side-a {
width: 150px;
margin-left: 0px;
float: left;
}

#side-b {
width: 150px;
float: right;
}

#content {
width: 56%;
float: left;
}

#footer {
clear: both;
background: url(images/conback.gif);
}[/code]

Html

[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”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<link href=”my.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”contall”>
<div id=”header”> HEADER </div>
<div id=”containerhead”> </div>
<div id=”container”>
<div id=”side-a”><div>This is the text. I don’t want here white background but in FF here it is.</div></div>
<div id=”content”><div>This is the text. I don’t want here white background but in FF here it is.</div></div>
<div id=”side-b”><div>This is the text. I don’t want here white background but in FF here it is.</div></div>
</div>
<div id=”footer”> FOOTER </div>
</div>
</body>
</html>
[/code]

In IE background-image is visible but in FF the text is on white background. Can somebody tell me how to change css for the same effect in FF.
Here is the same page live.[url]http://proba.scraft.net/3col/[/url]
Thank you.

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@toicontienApr 05.2006 — IE-Win doesn't support the float property correctly, so actually your code is fine in Firefox and problematic in Internet Explorer. Read the forum post in my signature entitled "Quick Floated Elements Explanation" for more information. This is a common issue that designers run into.

Basically, move your #footer so it's inside the #container DIV to stretch that DIV down past the floated columns.
Copy linkTweet thisAlerts:
@drackemoorauthorApr 05.2006 — Thank You for all your help.
×

Success!

Help @drackemoor 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.20,
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,
)...