DIV Problem

[thomashw]

In IE and Opera the page displays  fine, but Firefox takes 3 DIV's and layers them over eachother. I've been reading about problems with Firefox and DIV's, but I haven't found a solution to this problem.

 

One DIV is floated left, one is floated right, and one is located above these two DIV's. If Firefox, they're all located over eachother.

 

Let me know if you have any suggestions!

[TheFilmGod]

Why not show the code? What firefox version are you using?

 

Firefox is the best browser out there, so if it doesn't work in FF, but it does in IE, that's a really bad thing. (means your code is bad).

[haku]

Seconded.

[gruzaw]

try putting them all in another DIV and set definite sizes for all the divs.

[thomashw]

Sorry, here's the code. I removed most of the content (but the code is still the same.)

 

<div id="content"><br />
<div id="view">
</div>
<br />
<div class="leftcheck3">
<table class="check3infotable">
<tr>
<td>
</td>
r</tr>
</table>
</div>
<div class="rightcheck3">
<table class="check3infotable">
<tr>
<td>
</td>
</tr>
</table>
<br /><br />
</div>
<div class="check3">
<table border="0" cellpadding="0" cellspacing="0" class="table">
<tr>
<td>
</td>
</tr>
</table>
</div>
<div class="submit">
<form method="post" action="check3.php">
<input type="submit" name="Submit" value="Submit">
</div>
</form>
</div>

 

And the styles:

 

#content {
width: 575px;
background-color: #FFFFFF;
float: none;
margin-left: 200px;
}

#view {
width: 100%;
text-align: right;
}

.leftcheck3 {
margin: 0 0 20px 10px;
outline: 0;
width: 259px;
float: left;
}
.check3infotable {
padding: 0 0 0 10px;
width: 60%;
color: #1F4E16;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 11px;
text-align: left;
vertical-align: bottom;
}

.rightcheck3 {
margin: 0 10px 20px 0;
outline: 0;
width: 259px;
float: right;
}

.check3 {
float: none;
padding: 0 0 20px 0;
}

.table {
padding: 0 0 10px 30px;
margin: 0 0 0 0;
width: 100%;
color: #1F4E16;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 11px;
text-align: center;
}

.submit {
height: 30px;
width: 120px;
text-align: left;
outline: 0;
margin: auto;
}

 

I'm guessing it has something to do with my "floats" but I'm not too sure how to fix it.

 

Any help is GREATLY appreciated. Thanks!

[thomashw]

The problem is that the "check3" DIV isn't going below "rightcheck3" and "leftcheck3". It's actually right over top two DIV's.

[haku]

add:

 

clear: both;

 

to your 'check3' div

[thomashw]

I added clear: both. Now it's aligned horizontally perfectly, but is located at the bottom of the page. The two "leftcheck3" and "rightcheck3" are located beside eachother like they should be. The "check3" DIV is now located horizontally in the correct position, but is located at the very bottom of the page.

 

Adding clear:both positions the DIV at the bottom of all browsers now. Without clear:both, it is located properly in all browsers except Firefox.

 

Any ideas now?

[haku]

Post a link.

[thomashw]

I'm not able to post a link, but here's a picture. You can see the top two DIV's beside each other at the top, and the "check3" DIV at the bottom. This is AFTER I've added clear:both. It moves all the way to the bottom of the page.

 

Any help is GREATLY appreciated!

[thomashw]

Forgot the picture...

 

The top two DIV's are at the top, and after using clear:both; on the bottom DIV, you can see where it goes (all the way to the bottom.)

 

There's NOTHING in between in the top two DIV's and the bottom one - I really don't get why it's doing this.

 

 

Should I try using a negative margin? I'm extremely stumped.

[haku]

You should find some free hosting and post a link. There are a multitude of potential reasons behind this. Its a lot easier to figure out the problem with the actual site to work with.

[thomashw]

I have the site on the internet - I just can't give the link because it's a page on the site which is password protected.

 

I'll duplicate it later on a different HTML page and post the link.

[dbrimlow]

I don't want to come off too negative, here, but why are people throwing out advice when the basic concept and structure is seriously flawed in the first place?

 

There is so much wrong with just this simple example that when actual content is added it will just get worse.

 

I assume you are using a DOCTYPE and CHARSET in you head tag (and know what they are).

 

A line break tag "br/" is NOT a styling device to create margins or paddings. It is MEANT to be used to force a line break WITHIN a paragraph, list, header or other proper "logical block level element" used for containing text.

 

This is just wrong:

<table class="check3infotable">
<tr>
<td>
</td>
r</tr>
</table>

What is the "r" doing outside any table tag (even a wrong one). All data in a table goes within a "td" tag ("d" for data).

 

You are using your floats wrong in the first place and certainly not clearing them properly. You have to understand the complexity of properly floating elements before just slapping them on the page as if the were table cells and expect them to work as such.

 

And I hope the table that is in these elements are for "tabular" data and not as yet more "styling" design aids. Because then the whole point of using "divs" and css "selects" is totally moot.

 

You need to brush up on your basics. Here is a link of a few great quick tutorials on the basics of css including:

 

1. how to use floats (floatutorial)

2. The most important aspects of css structure (selectutorial)

3. and everyone's favorite ways to make menus with lists (listomatic)

 

maxdesign

 

Good luck. Once you learn all the concepts you can begin to code for cross-browser compliance. The key is to code it to work in FF first, THAN look at it in IE (so you can tweak a few elements and using a conditional comment toss them into an IEonly.css file to force the IEs to behave as it should)

 

I've been reading about problems with Firefox and DIV's

 

??? :o

 

Where could you POSSIBLY have read that? At a Microsoft sponsored blog? Or from the code view challenged "gurus" at the Dreamweaver "support" forums?

 

A "DIV" is nothing but an html markup level placeholder! Period. It has nothing to do with CSS, browsers or browser interpretation. It is what it is ... and empty container waiting for some data to contain. The same way a paragraph tag or table tag is just an html data placeholder element.

 

It is only when YOU tell it how to behave by inputting style commands within a css select element that browsers pay attention ... and IE has ADD, not FF.

 

IE 5.x3, IE 5.5, IE 6, IE 7 (AND now even the beta version of IE 8!) all display  CSS differently and not according to any understandable conception of the W3C web standards for CSS 2. And NO IE version can even display XHTML when it is properly (as intended) served as "application/xhtml+xml". Only when served as "text/html" (which therefore renders it as if it were html 4.01) can IE handle it.

 

If you want to create web pages, NEVER even view them in IE until they are finished and working as intended in FF. The see how IE6 and IE7 messed up the css so you can make a few easy qucik tweaks to make them behave.

 

 

[thomashw]

What is the "r" doing outside any table tag (even a wrong one). All data in a table goes within a "td" tag ("d" for data).

The "r" was a mistake when I posted the code on the forums. It's not in my code, and the table certainly is holding tabular data. The whole reason I'm trying to use DIV's is because I don't want to use tables in my design.

 

You are using your floats wrong in the first place and certainly not clearing them properly. You have to understand the complexity of properly floating elements before just slapping them on the page as if the were table cells and expect them to work as such.

No, I don't understand floats very well.

 

Where could you POSSIBLY have read that? At a Microsoft sponsored blog? Or from the code view challenged "gurus" at the Dreamweaver "support" forums?

I don't go to Microsoft sponsored blogs or Dreamweaver support forums. I don't use Dreamweaver - I code in Notepad. I admit I don't know everything, or even a lot, about HTML. Which is why I came to ask the question in the first place.

 

A "DIV" is nothing but an html markup level placeholder! Period. It has nothing to do with CSS, browsers or browser interpretation. It is what it is ... and empty container waiting for some data to contain. The same way a paragraph tag or table tag is just an html data placeholder element.

 

It is only when YOU tell it how to behave by inputting style commands within a css select element that browsers pay attention ... and IE has ADD, not FF.

 

IE 5.x3, IE 5.5, IE 6, IE 7 (AND now even the beta version of IE 8!) all display  CSS differently and not according to any understandable conception of the W3C web standards for CSS 2. And NO IE version can even display XHTML when it is properly (as intended) served as "application/xhtml+xml". Only when served as "text/html" (which therefore renders it as if it were html 4.01) can IE handle it.

 

If you want to create web pages, NEVER even view them in IE until they are finished and working as intended in FF. The see how IE6 and IE7 messed up the css so you can make a few easy qucik tweaks to make them behave.

Thank you for the suggestions. Like you said, you did come off extremely negative. I realize you were just trying to help me get my act together.

 

Thanks.

[haku]

I can understand Birmlows frustration (which seems to have come out as negativity), but the fact is that the huge majority of code that people are producing on these forums is crap (page layout using tables seems to be the standard here). I can't be bothered either always telling people that their code sucks (not very productive if you don't offer any suggestions on how to fix it, and/or point them in the direction to learn how to fix it), or fixing all of their code. I'd rather just point someone in the direction of fixing the specific problem they are asking about if possible. If its not possible, then I will tell them why, or if their code is just too much crap, I ignore the post altogether.

[thomashw]

Well... I assure you I'm not using tables to do the page layout.

[dbrimlow]

I'm really glad you didn't take offense. It was totally not my intent and what worried me right from the start was that people were trying (with good intent) to give advice on your exiting code which just wouldn't work.

 

Also, your comment about FF and "DIVS" showed that you are testing in IE in the first place. No one can ever expect to be cross-browser compliant if they FIRST test their code in IE.

 

While FF has some faults (most particularly, and coincidentally enough, with float clearing), it is a "Modern" browser (along with Safari, Mozilla, Netscape, Sea Monkey and sometimes Opera) and will behave like one.

 

Floats are rough enough to master. They take a lot of trial and error.

 

One thing to remember about floats is it is usually best to float side by side containers left (instead of one left and one right).

 

Also, it is best to use percentage widths instead of fixed widths. Particularly if you are working within a fixed main page wrap.

 

But there are two absolutely crucial things to learn about floats - simply applying clear:both within a css select element will not help.:

 

1. clearing them properly - most pros concerned with cross-browser have used a variation of the "clearfix" technique (which seems hard to understand at first, but miraculous once mastered).

 

The original version of clearfix

 

Although, apparently there is a newer, much simpler method (which I haven't had time to test, yet) here, simple clearing

 

2. Dealing with IE's "HasLayout" - warning - heavy reading written in "geekese"

 

Sometimes I wish I could go back to the simple days of table layout, but once you see your css based layout work you'll never go back.

 

 

[haku]

I got that from your last post. Sorry, my reply wasn't to you, it was to dbrimlow. I guess I didn't make that very clear.

[haku]

I agree with pretty much all your post Dbrimlow, except for the part about clear: both. It works fine if there is content in the element you apply it to. The clearfix is for those situations where people sometimes feel the need to add an extra empty div to the layout to clear something. This is going against the principals of separating content and layout, which is why the clearfix is the preferred method.

[thomashw]

Also, your comment about FF and "DIVS" showed that you are testing in IE in the first place. No one can ever expect to be cross-browser compliant if they FIRST test their code in IE.

I've been testing my code initially in Opera (I like it more than FF.) I used to use Firefox. I NEVER test code in IE until I think I'm done the page. I had the page working perfectly in Opera, so I was testing IE and FF.

 

How is Opera compared with FF?

 

Anyway...I fixed my problem by floating the bottom DIV right.

[dbrimlow]

Opera is strange (I don't know about versions other than 6.0). Sometimes it was compliant, but other times it was as funky as IE. For the MOST part it displayed similar to modern browsers. AND, like IE, it was fine with poor quirks mode code, but once you had valid html/css it could get wonky.

 

So not having seen the newest version, I can't really comment. I just had a few issues with Opera 6.0.

 

There is nothing more sobering than to see your perfect web page in FF 3 for Ubuntu Linux! They really got it right ... ands it blows up uncleared floats like nobody's business!

 

The clearfix is for those situations where people sometimes feel the need to add an extra empty div to the layout to clear something.

 

Actually, haku, like I said, we use a variation of the clearfix. It does not involve any extra markup whatsover (or even inline class).

 

It is done by applying the fix (the ":after" pseudo element) directly in the css, like so:

 

.floated1:after, .anotherfloat:after  {
content:"."; 
display:block; 
visibility:hidden; 
height: 0;
font-size: 0; 
line-height: 0; 
clear: both;}

 

Some add the "HasLayout" fix in their css like this:

.floated1:after, .anotherfloat:after  {
content:"."; 
display:block; 
visibility:hidden; 
height: 0;
font-size: 0; 
line-height: 0; 
clear: both;}

/* for ie 6 only */
* html .floated1 {height:1%}

/* for ie 7 only */
* :first-child + html .floated1 {min-height:1px}

But that causes css to not validate.

 

So most put these into an ie-only.css file that is called using a conditional comment in the head tag, like this:

<!--[if lt ie 7]><link href="../css/ie-only.css" rel="stylesheet" type="text/css" /><![endif]-->

 

But simply using "clear:both" in the select element's css does not work. It works occasionally if you are lucky and not floating block level elements between non-floated elements.

 

But once you drop a floated element between a non-floated element you can try clear:both all you want, but it still will not clear - and if you didn't instruct IE 6 to use * html height:1% and IE 7 to use * :first-child + html min-height:1px, then your floats will do strange things in IE.

 

 

[bronzemonkey]

While FF has some faults (most particularly, and coincidentally enough, with float clearing)

 

Really? I haven't come across any such problems.

 

1. clearing them properly

 

It's actually getting a container to self-clear. Floats are supposed to removed from the flow and "poke out" of their containers...it's an intended behaviour. But since we have to use floats to create columns, we have to find ways to get their containers to act as containers!

 

Although, apparently there is a newer, much simpler method (which I haven't had time to test, yet) here, simple clearing

 

It is not as flexible as variations on the clearfix theory. Using overflow will either produce scrollbars in certain situations or cut off content that exceeds the limits of the container. The FnE method can also produce "peekaboo" bugs in IE6 that seem to be completely unfixable.

 

I agree with pretty much all your post Dbrimlow, except for the part about clear: both. It works fine if there is content in the element you apply it to. The clearfix is for those situations where people sometimes feel the need to add an extra empty div to the layout to clear something.

 

{clear:both;} does not work if you are trying to self-clear an element that contains floated elements. If I have this:

 

/*css*/
#content {margin-bottom:1em; background:#000;}
#col1, #col2 {float:left; height:500px;}
#footer {clear:both}

<!-- html -->
<div id="content">
  <div id="col1">blah blah</div>
  <div id="col2">blah blah</div>
</div>

<div id="footer"></div>

 

Then both #col1 and #col2 will "poke out" of #content. The #content will only be 1px high and the background colour will not expand down the page and surround the two columns. The footer will render after the two columns but it will ignore the #content margin because that margin will be directly below the 1px high #content div (check it out in firebug) and have no effect on the position of the footer below the two columns.

 

To get #content wrapping both columns so that its background extends downwards and its margin will produce a space between the columns and the footer, you need to "self-clear" the content div. Using <div class="clear"></div> is not only unsemantic but unreliable. The clearfix method was a solution to avoid unsemantic code and unreliable self-clearing. However, it can be improved so that you don't even need to add classes in the markup at all.

 

But that causes css to not validate.

 

Actually, it doesn't make your css invalid. It's just that I prefer to keep version-specific IE targetting in version-specific stylesheets. All my fixes for a particular version of IE go into their own conditional stylesheet - that way I don't have to mix standards/non-standard code and I don't have to worry about those "hacks" suddenly being read by other browsers in the future.

 

If you were using the IE7 haslayout fix in your master stylesheet then it works just as well with *+html {min-height:1px;}. And because it is min-height, it doesn't matter if other browsers can read it.

[dbrimlow]

Well, now you heard it from THE MAN who knows, and tipped off a lot of us here about the ease of the clearfix variation (also mentioned in Dan Cederholm's "Bulletproof Web Design").

 

And while I've also had success leaving off the :first-child pseudo element for the IE7 HasLayout fix (after seeing that it worked without it), I don't take chances that it might be necessary for certain situations ... it doesn't hurt to leave it in.

 

Really? I haven't come across any such problems.

 

Absolutely! I constantly (almost daily) have situations (usually a bordered box with an image and  text floated to its left) where before entering the clearfix, IE6/WinXP will clear the floats while FF doesn't. It is the one situation where it seems as if IE6 got something right that FF didn't.

 

Unlike many pros who can find the time to study the whys and hows, I am coding 12 hours a day, 5 days a week and need to take advantage of the academics of it all that's been done by others ... I simply need the results to work so I can apply it fast and move on to the next project I'm given by "the powers that be".

 

But the main problem with the state of css and browsers today is that it is NOT an exact science. Each browser interprets the CSS2 Specs differently (some closer to others).

 

And the whole issue of this thread comes down to cross-browser/platform compatibility. If you work using mainly one platform and one browser - Windows OS/IE, Mac/Safari or  Linux/Sea Monkey or whatever - than you will have to know what the fixes are for the other browser/platform combos.

 

The one I found to really get the css2 specs right is Ubuntu Linux/FF 3.0. I would like to see the acid test results for that.

[thomashw]

Seems I've started up a discussion. Thanks everyone for chiming in on it.

 

As for my site, I fixed the problem using float: right; on the lower DIV. I realize my code isn't up to par, so if I have the time to go in and make it better I will.

 

Thanks for the help and information.