/    Sign up×
Community /Pin to ProfileBookmark

<div> displays in IE but not FF

Copy linkTweet thisAlerts:
Oct 29.2008

[CODE]
.cbox {
margin: 0 auto; /* containers for side-by-side <div>’s */
position: relative;
text-align: left;
clear: both;
}
<body>
<div id=’outer’ style=’background-image:url(images/back.jpg)’>
<div class=’cbox’ style=’width:760px; border-bottom:1px solid #0000B0; background-color:#FFFFFF’>
<div class=’cright’ style=’width:230px’><img src=’images/perfect.gif’ style=’border:0; margin:5px’></div>
<div class=’cleft’ style=’width:226px’><img src=’images/main2.gif’ style=’border:0; margin:5px’></div>
[/CODE]

The ‘cright’ and ‘cleft’ with accompanying images appear in both browsers, but the ‘cbox’ with its white background and blue bottom border appear only in IE and not in FF. (The other two classes merely apply float and text-align properties.)

I can’t validate this page, as it is login protected and the validator gets kicked to, and validates, the login page.

Any idea why the ‘cbox’ is not showing up in FF?

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangOct 29.2008 — The blue border does appear in Fx.
Copy linkTweet thisAlerts:
@JayhawkauthorOct 30.2008 — Here's the full HTML
[CODE]
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'>
<html lang='en'>
<head><title>Company of San Diego</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<link href='incl/alignment.css' rel='stylesheet' type='text/css'>
<link href='incl/pixelfont.css' rel='stylesheet' type='text/css'>
<link href='incl/listdefn.css' rel='stylesheet' type='text/css'>
<link href='incl/companymain.css' rel='stylesheet' type='text/css'>
<link href='incl/topform.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div id='outer' style='background-image:url(images/back.jpg)'>
<div class='cbox' style='width:760px; border-bottom:1px solid #0000B0; background-color:#FFFFFF'>
<div class='cright' style='width:230px'><img src='images/perfect.gif' style='border:0; margin:5px'></div>
<div class='cleft' style='width:226px'><img src='images/main2.gif' style='border:0; margin:5px'></div>
</div>
[/CODE]
and the alignment.css
[CODE]
.cbox {
margin: 0 auto; /* containers for side-by-side <div>'s */
position: relative;
text-align: left;
clear: both;
}
.cleft {
text-align: left;
float: left;
}
.cright {
float: right;
text-align: left;
}
.cright img {
display: block; /* assures correct alignment of images */
}
/* containers and definitions for forms */
form { margin: 0; }

* {margin:0; padding:0;} /* make IE behave properly */

body {
text-align:center; /* center content in IE5 */
}
img { border:0; }
[/CODE]
The "cbox" is transparent, and the border does not show. FF 3.0.3 on Vista. I am not dreaming or imagining it: it doesn't show the white background or the border. IE does show both.

I'll provide the other css files if anyone thinks they might be contributing to the issue.
Copy linkTweet thisAlerts:
@drhowarddrfineOct 30.2008 — I'm not on my dev computer so I can't check but the problem looks like IE not collapsing its margins properly. Google for collapsing margins and IE bug or somesuch, but some of the guys here may check on that. Also look at positioniseverything.net.
Copy linkTweet thisAlerts:
@FangOct 30.2008 — .cbox {
margin: 0 auto; /* containers for side-by-side &lt;div&gt;'s */
position: relative;
text-align: left;
[COLOR="Blue"]overflow:hidden;[/COLOR]
}
Copy linkTweet thisAlerts:
@JayhawkauthorOct 31.2008 — Thanks, but why does that do it?

Nothing is overflowing, is it? The <div> is merely not showing up.
Copy linkTweet thisAlerts:
@drhowarddrfineOct 31.2008 — IE incorrectly expands elements to contain floated elements. Firefox was performing correctly all the time. So the parent div collapses and overflows the collapsed element.
Copy linkTweet thisAlerts:
@JayhawkauthorNov 01.2008 — IE incorrectly expands elements to contain floated elements.[/QUOTE]
Oh, duh. And I even knew that at one time. I can only claim, I don't know, maybe senility. Thanks.
×

Success!

Help @Jayhawk 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.18,
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,
)...