Float Problem: can't figure this out

strippy Guest

Messages:: 5

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#1

works fine in firefox, but ie7.0 gives me problems with the float.

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" lang="en" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>E-Com Solutions</title>

<link rel="stylesheet" type="text/css" href="ecom.css" />

</head>

<body>

<div id="header">
<h1>Leading the way
<br />
to better solutions</h1>
</div>

<hr id="pain" />

<ul class="nav">

<li><a href="ecom.html" class="navbar">Home</a></li>
<li><a href="aboutus.html" class="navbar">About Us</a></li>
<li><a href="equipment.html" class="navbar">Equipment</a></li>
<li><a href="services.html" class="navbar">Services</a></li>
<li><a href="technology.html" class="navbar">Technology</a></li>

</ul>
<hr class="clear" />

<div id="industry">

<div id="ccinfo" class="sideleft">

<h3>Credit Cards</h3>

<p>
<span class="sidegroup1">Knowledge Base</span>
</p>

<p>
<a href="sidebar/creditcards/thebasics.html">The Basics</a>
<br />
<a href="sidebar/creditcards/interchange.html">Interchange Tables</a>
<br />
<a href="sidebar/creditcards/fees.html">Understanding Fees</a>
</p>

<p>
<span class="sidegroup1">Rules & Regs</span>
</p>

<p>
<a href="sidebar/creditcards/compliance.html">Compliance</a>
<br />
<a href="sidebar/creditcards/security.html">Security Standards</a>
</p>

</div>

<div id="checkinfo" class="sideleft">

<h3>The Check World</h3>

<p>
<a href="sidebar/checkworld/problempaper.html">Problematic Paper</a>
<br />
<a href="sidebar/checkworld/acceptance.html">Proper Check Acceptance</a>
<br />
<a href="sidebar/checkworld/check21.html">Check 21</a>
</p>

</div>

<div id="newinfo" class="sideleft">

<h3>New & Exciting</h3>

<p>
<a href="sidebar/new/terminal.html">Virtual Terminal</a>
<br />
<a href="sidebar/new/cash.html">Cash Advance</a>
<br />
<a href="sidebar/new/package.html">Ultimate Package</a>
</p>
</div>

</div>

<div id="main">
<p>
Main Content kjghllllllllllllllllllllllllll<br />
gfhkjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
hgkfffffffffffffffffffffffffffffffffffffffffffffffff<br />
ghckkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk<br />
</p>

</div>

</body>

</html>

css:

body {

font: small/1.6em Verdana, Helvetica, Arial, sans-serif;

background-image: url(steel_background_2.gif);

width: 800px;
margin: auto;
}

#header {

margin: 5px 1px 1px 1px;
padding: 40px 10px 40px 350px;

background-color: rgb(28, 148, 157);
background-image: url(logos/E-ComSolutions_logo.gif);
background-repeat: no-repeat;
background-position: 10px center;

}

#stray {
margin: 0px 10px 0px 10px;
font-size: 1.25em;
}

ul.nav {
list-style-type: none;
padding-left: 0;
margin: 1px 0px 0px 1px;
width: 100%;
}

ul.nav a {
display: block;
width: 11.50em;
text-align: center;
border: 4px solid black;
text-decoration: none;
color: black;
line-height: 250%;
background-color: silver;
padding: 0px;
font: bold 100%/250% Arial, Helvetica, sans-serif;
border-right-color: #666;
border-bottom-color: #333;
border-top-color: #DFDFDF;
border-left-color: #858585;

}

a.navbar:hover {
background: url(steel_background_2.gif);
}

ul.nav li {
float: left;
}

#pain {
padding: 0;
margin: 0;
}

.clear {
clear: both;
}

#main {
width: 800px;
height: 1200px;

margin: -4px 0px 0px 0px;
padding: 10px 0px;

background-color: rgb(28, 148, 157);

}

#industry {
width: 205px;
float: left;

margin: 0px 10px 10px 0px;
padding: 10px;

}

.sideleft {
border: solid medium;
padding: 10px;
margin: 0px;

background-color: rgb(197, 197, 197);

}

.sidegroup1 {
font-size: 100%;
font-weight: bold;

margin: 0px;
padding: 0px;
}

strippy, Oct 20, 2007 IP

soulscratch Well-Known Member

Messages:: 964

Likes Received:: 45

Best Answers:: 0

Trophy Points:: 155

#2

Link to page? Are you using a universal reset? Get rid of the width:100%; declarations

soulscratch, Oct 21, 2007 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,999

Best Answers:: 253

Trophy Points:: 515

#3

Well, let's see... You've got a lot of paragraph tags around stuff that... well, isn't paragraphs... much of it appears to be lists. You're dropping to H3 with no H2's present, that can't be right... as to the float... ah, I see it, you've got some margin errors... and using HR's as a rule is a BAD idea in this day and age since they don't render the same cross-browser ANYHOW...

800px is not 800px friendly, your font sizes will break on large font machines in Opera and IE since their fonts obey the system metric, and you really should never use dynamic fonts inside narrow px width containers. Mixing metrics usually = layout failure.

You also are mixing background positioning types which IS invalid CSS. You can't say "10px center" - doesn't work that way. This is why you should explictly state your font size and line-heights for centering it.

You've also got some extra wrapping div (like #header) that just seem to be unneccessary...

I also advise against using shortcut words like 'small' and 'medium' for things like font sizes and borders - it just more stuff to break cross-browser.

Right now it doesn't appear to render right in ANY of the browsers I'm testing, probably because of the font-size declarations (or lack therin). I'm getting five different appearances in five different browsers.

This is probably how I'd code that:
<!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" lang="en"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>E-Com Solutions</title>

<style type="text/css">
* {
	margin:0;
	padding:0;
}

body, html {
	height:100%;
	font: 90%/140% verdana,helvetica,arial,sans-serif;
}

body {
	text-align:center;
}

#container {
	width:768px;
	margin:0 auto;
	text-align:left;
	min-height:100%;
	overflow:hidden; /* wrap floats */
	background:#1C949D;
}

* html #container {
	/* IE has no min-height, but treats height as such */
	height:100%;
	/* 
		but only if overflow:visible - but since IE incorrectly 
		wraps floats ANYWAYS 
	*/
	overflow:visible;
}

h1 {
	padding:40px 10px 40px 350px; 
	font:bold 24px/26px arial,helvetica,sans-serif;
	/* guessing on size and background-position */
	background:#1C949D url(images/logos/E-ComSolutions_logo.gif) 10px 20px no-repeat;
}

#mainMenu {
	overflow:hidden;
	background:#FFF;
}

#mainMenu ul {
	list-style:none;
	overflow:hidden;
	margin:4px 0;
	padding:4px 0 4px 4px;
	border:solid #666;
	border-width:2px 0;
	white-space:nowrap;
}

* html #mainMenu {
	height:1%; /* haslayout */
	overflow:visible; /* again lte IE6 screwing with us */
}

#mainMenu li {
	display:inline; /* make IE behave */
}

#mainMenu a {
	float:left;
	width:144px;
	display:block;
	padding:0.7em 0;
	color:#000;
	background:#CCC;
	text-align:center;
	text-decoration:none;
	border:4px solid;
	border-color:#CCC #666 #333 #AAA;
	font:bold 100%/120% arial,helvetica,sans-serif;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	border-color:#666 #CCC #AAA #333;
}

#contentWrapper {
	float:right;
	width:100%;
}

#content {
	color:#FFF;
	margin:10px 0 36px 225px;
}

#content h2 {
	margin-bottom:0.5em;
}

#content p {
	margin-bottom:1em;
}

#sideBar {
	float:right;
	width:205px;
	padding:10px 10px 36px;
	margin-right:-225px;
}

#sideBar .sectionBox {
	border:4px solid #000;
	margin-bottom:4px;
	background:#CCC;
	padding:10px;
	font:normal 14px/18px verdana,helvetica,arial,sans-serif;
}

#sideBar .sectionBox h2 {
	font:bold 16px/20px verdana,helvetica,arial,sans-serif;
	margin-bottom:4px;
}

#sideBar .sectionBox h3 {
	font:bold 14px/18px verdana,helvetica,arial,sans-serif;
}

#sideBar .sectionBox ul {
	list-style:none;
	padding-left:1em;
	margin-bottom:0.5em;
}

#footer {
	clear:both;
	width:768px;
	margin:-32px auto;
	padding:7px 0;
	position:relative;
	color:#FFF;
	background:#1C949D;
	border-top:2px solid #468;
	text-align:center;
	font:normal 14px/16px verdana,helvetica,arial,sans-serif;
}

</style>

</head><body>

<div id="container">
	<h1>
		Leading the Way<br />
		to Better Solutions
	</h1>
	
	<div id="mainMenu">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">Equipment</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Technology</a></li>
		</ul>
	</div>
	
	<div id="contentWrapper"><div id="content">
		<h2>Test content</h2>
		<p>Some test content for the main area</p>
		<p>Some test content for the main area</p>
		<p>Some test content for the main area</p>
		<p>Some test content for the main area</p>
	</div></div>
	
	<div id="sideBar">

		<div class="sectionBox">
			<h2>Credit Cards</h2>
			
			<h3>Knowledge Base</h3>
			<ul>
				<li><a href="#">The Basics</a></li>
				<li><a href="#">Interchange Tables</a></li>
				<li><a href="#">Understanding Fees</a></li>
			</ul>
			<h3>Rules and Regulations</h3>
			<ul>
				<li><a href="#">Compliance</a></li>
				<li><a href="#">Security Standards</a></li>
			</ul>
		</div>
		
		<div class="sectionBox">
			<h2>The Check World</h2>
			<ul>
				<li><a href="#">Problematic Paper</a></li>
				<li><a href="#">Proper Check Acceptance</a></li>
				<li><a href="#">Check 21</a></li>
			</ul>
		</div>
		
		<div class="sectionBox">
			<h2>New &amp; Exciting</h2>
			<ul>
				<li><a href="#">Virtual Terminal</a></li>
				<li><a href="#">Cash Advance</a></li>
				<li><a href="#">Ultimate Package</a></li>
			</ul>
		</div>
		
	</div>

</div>
	
<div id="footer">
	<p>Test Footer</p>
</div>

</body></html>
Code (markup):
You'll notice I cut the width to 768px wide to be 800x600 friendly, I pulled the horizontal rules for borders, which meant putting that div around the UL to ACTUAL use since it's easier to declare the white background there, and then the cyan background on the wrapping container... at least, it's that way since the page is built on a 100% height model setup. I also put it in content first source order while I was in there. I'd consider going fully fluid or semi-fluid on it, but that means some heavy duty reworking of the 'buttons' section.

It's a little less HTML, a bit more CSS, but much more versatile.

deathshadow, Oct 21, 2007 IP

strippy Guest

Messages:: 5

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#4

that looks very different from mine. I guess the fact that I've been doing this for 3 months stands out.

noticed two things:

1) you didn't use an external CSS sheet. any particular reason??? or is it just preference?

2) Mozilla is cutting the page off before it displays all content. Not so on IE7. any clue on that?

thanks again...and are there any sources you would recommend for improving my CSS?

strippy, Oct 21, 2007 IP

strippy Guest

Messages:: 5

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#5

soulscratch said: ↑

Link to page? Are you using a universal reset? Get rid of the width:100%; declarations
Click to expand...

soulscratch:

I'm very green and didn't understand your 1st and second question. Can you rephrase?

strippy, Oct 21, 2007 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,999

Best Answers:: 253

Trophy Points:: 515

#6

I didn't put it in an external stylesheet because it was just a quick test - a 'production' version would of course put it in an external file.

As to the Mozilla problem - it wasn't doing that when I wrote it, but it is now... What the? The only difference is the upgrade to 2.0.0.8 went through.

Hmm, could this be ANOTHER thing that worked which they ****ed up? We're setting min-height, not height... and height on body and HTML is SUPPOSED to be treated as min-height.

deathshadow, Oct 21, 2007 IP

strippy Guest

Messages:: 5

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#7

The new version must be the difference...I've been on 2.0.0.8 since last week.

Is this what you suggested:

body, html {
height:100%;
font: 90%/140% verdana,helvetica,arial,sans-serif;

min-height: 800px;
}

Earlier you spoke of height: 100%, so not sure if that now requires changes. All seems to work well with the above added.

strippy, Oct 21, 2007 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,999

Best Answers:: 253

Trophy Points:: 515

#8

actually, I messed up on that font declaration - that should only be in body, not BOTH body and HTML - likewise if you are going to set a min-height, that's where it should go.

No, the problem is the float not clearing properly. Firefox now appears to flat out ignore

Breaking about half the websites I've written the past three years, and going completely against the specification.

I AM NOT A HAPPY CAMPER RIGHT NOW.

Sheesh, yet another reason for me to say **** firefux and the open sores it rode in on.

Sitting here thinking that this SHOULD break ALA's holy grail, and a number of the layouts on 'layout Gala' as well.

deathshadow, Oct 21, 2007 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,999

Best Answers:: 253

Trophy Points:: 515

#9

Ok, I hate to do this, but change the CSS to the following:

* {
	margin:0;
	padding:0;
}

body, html {
	height:100%;
}

body {
	text-align:center;
	font: 90%/140% verdana,helvetica,arial,sans-serif;
}

#container {
	width:768px;
	margin:0 auto;
	text-align:left;
	min-height:100%; 
	position:relative;
	background:#1C949D;
}

/* 
	NORMALLY we could just put overflow:hidden on #container, but the
	new firefox (2.0.0.8) has it's head up it's	ass in regards to 0 flow
	width boxes now ignoring them on float and overflow properties that
	SHOULD still obey them.
	
	ASSHOLES. **** Firefux and the open sores it rode in on.
*/

#container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

* html #container {
	/* IE has no min-height, but treats height as such */
	height:100%;
	/* 
		but only if overflow:visible - but since IE incorrectly 
		wraps floats ANYWAYS 
	*/
	overflow:visible;
}

h1 {
	padding:40px 10px 40px 350px; 
	font:bold 24px/26px arial,helvetica,sans-serif;
	/* guessing on size and background-position */
	background:#1C949D url(images/logos/E-ComSolutions_logo.gif) 10px 20px no-repeat;
}

#mainMenu {
	overflow:hidden;
	background:#FFF;
}

#mainMenu ul {
	list-style:none;
	overflow:hidden;
	margin:4px 0;
	padding:4px 0 4px 4px;
	border:solid #666;
	border-width:2px 0;
	white-space:nowrap;
}

* html #mainMenu {
	height:1%; /* haslayout */
	overflow:visible; /* again lte IE6 screwing with us */
}

#mainMenu li {
	display:inline;
}

#mainMenu a {
	float:left;
	width:144px;
	display:block;
	padding:0.7em 0;
	color:#000;
	background:#CCC;
	text-align:center;
	text-decoration:none;
	border:4px solid;
	border-color:#CCC #666 #333 #AAA;
	font:bold 100%/120% arial,helvetica,sans-serif;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	border-color:#666 #CCC #AAA #333;
}

#contentWrapper {
	float:right;
	width:100%;
}

#contentWrapper:after {
}

#content {
	color:#FFF;
	margin:10px 0 36px 225px;
}

#content h2 {
	margin-bottom:0.5em;
}

#content p {
	margin-bottom:1em;
}

#sideBar {
	float:right;
	width:205px;
	padding:10px 10px 36px;
	margin-right:-225px;
	position:relative;
}

#sideBar .sectionBox {
	border:4px solid #000;
	margin-bottom:4px;
	background:#CCC;
	padding:10px;
	font:normal 14px/18px verdana,helvetica,arial,sans-serif;
}

#sideBar .sectionBox h2 {
	font:bold 16px/20px verdana,helvetica,arial,sans-serif;
	margin-bottom:4px;
}

#sideBar .sectionBox h3 {
	font:bold 14px/18px verdana,helvetica,arial,sans-serif;
}

#sideBar .sectionBox ul {
	list-style:none;
	padding-left:1em;
	margin-bottom:0.5em;
}

#footer {
	clear:both;
	width:768px;
	margin:-32px auto;
	padding:7px 0;
	position:relative;
	color:#FFF;
	background:#1C949D;
	border-top:2px solid #468;
	text-align:center;
	font:normal 14px/16px verdana,helvetica,arial,sans-serif;
}

Code (markup):

had to use a ****ing clearfix. God damned mother puss bucket.

deathshadow, Oct 21, 2007 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,999

Best Answers:: 253

Trophy Points:: 515

#10

I put a live copy here:
http://battletech.hopto.org/for_others/strippy/template.html

It still has a FF issue, extra padding at the clearfix. Sweet hopped up on crank Mary and Joseph I ****ing hate Gecko.

deathshadow, Oct 21, 2007 IP

strippy Guest

Messages:: 5

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#11

everything looks fine now. Guess I have a lot to learn!

Sorry, to hear you now have to address firefox's issues on your own websites.

1 question: you said the min-height and something else should be in the body???

you have min height in the container...It works, so I'm not complaining; just trying to learn.

"teach a man to fish" as the cliche goes.

Thanks again.

strippy, Oct 21, 2007 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,999

Best Answers:: 253

Trophy Points:: 515

#12

In my case, the #container was the right place to put it.

The 'problem' with putting it on both HTML and body is that you can only use min-height one removed from body and still get 100% min-height - it's stupid, but that's how it works.

deathshadow, Oct 21, 2007 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,999

Best Answers:: 253

Trophy Points:: 515

#13

Ah, and it's already in bugzilla

https://bugzilla.mozilla.org/show_bug.cgi?id=400406
and
https://bugzilla.mozilla.org/show_bug.cgi?id=400469

For those interested, I tossed up my own testcase:
http://battletech.hopto.org/for_others/firefux.html

deathshadow, Oct 21, 2007 IP

Log in or Sign up

Float Problem: can't figure this out

strippy Guest

soulscratch Well-Known Member

deathshadow Acclaimed Member

strippy Guest

strippy Guest

deathshadow Acclaimed Member

strippy Guest

deathshadow Acclaimed Member

deathshadow Acclaimed Member

deathshadow Acclaimed Member

strippy Guest

deathshadow Acclaimed Member

deathshadow Acclaimed Member

Useful Searches