FF/Opera problem with floats(?) and overlap

kimlb

02-27-2005, 02:34 AM

CSS:

.page_border {
margin: 0px auto;
width: 750px;
border: 1px solid #000;
background-color: #fff;
}

.main_left_col_330, .main_right_col_330 {
width: 330px;
padding: 0px 10px 10px 10px;
display: inline;
border: 1px solid #ccc;
background-color: #eee;
}

.main_left_col_330 {
float: left;
margin: 15px 15px 15px 15px;
}

.main_right_col_330 {
float: right;
margin: 15px 15px 15px 0px;
}

.main_banner {
font: 10pt/20px Arial, Verdana, Tahoma, Times, Sans-Serif;
padding: 0px;
margin: 10px 0px 10px 0px;
border: 1px solid #000;
background-color: #fff;
text-align: center;
}

.end_container {
width: 698px;
padding: 10px;
margin: 0px 15px 15px 15px;
border: 1px solid #000;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><link type="text/css" rel="stylesheet" href="css/style.css"></head>
<body>

<div class="page_border">
<div class="main_left_col_330">
<div class="main_banner"><a href="latin.htm">Latin1</a></div>Latin text.</div>
<div class="main_right_col_330">
<div class="main_banner"><a href="latin.htm">Latin</a></div>Latin text.</div>
<div class="end_container">Latin text go here</div>

</div>
</body>
</html>

IE displays this fine; left and right columns, then end_container below, all wrapped inside page_border.

FF/Opera is another case, though. I'm of the impression that the floats are causing the problem, but I can't see any other way of dedicating the elements to the left/right sides, respectively. These browsers put end_container "above/behind" the left/right columns, whereas it should be displayed at the end (below left/right columns).

Any help appreciated.

Thanks,
Kim.

COBOLdinosaur

02-27-2005, 11:06 AM

get rid of:
display: inline;

You float block elements, not inlines.

IE is probably rendering in quirksmode which often happens with xhtml doctypes, because of:
the namespace declaration on the html, which IE does not understand.

kimlb

02-27-2005, 11:38 PM

No change.

rmedek

02-27-2005, 11:50 PM

You need to clear the floats.

http://css.maxdesign.com.au/floatutorial/

.end_container {
clear: both;
width: 698px;
padding: 10px;
margin: 0px 15px 15px 15px;
border: 1px solid #000;
}

IE displays this fine; left and right columns, then end_container below, all wrapped inside page_border.
IE displays this wrong as it incorrectly expands the height of the outer container to match the float, when floats are in fact out of the page flow until cleared. COBOLdinosaur is probably right when he says you're actually rendering in Quirksmode rather than Strict.

kimlb

02-28-2005, 12:22 AM

Thanks, I'm still finding my way around floats. On the note of rendering mode, I thought I ensured strict mode by using

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

?

rmedek

03-01-2005, 06:02 AM

COBOLdinosaur

03-01-2005, 11:16 PM

If you want compliance to strict then use:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Using an immature XHTML doctype that is never going to be widely support does not buy you anything. IE support of XML is nothing but vapor speak, and lip service. Mozilla has only implement as small subset, and seems reluctant to proceed any further until there is a workable standard that will be widely implemented.

Mean while the stable proven htmo4.01 strict, produces teh fewest cross-browser issues of any other doc type.