Forum Moderators: not2easy
I am in the midst of designing my first few (very small) sites using div positioning instead of tables. The sites look just as they should in IE6/win but they look very helter-skelter (un-readable, just about) in Netscape 7.1 and IE/Mac.
Why?
I have read extensibly on browser compatability and bugs and nothing comes close to the disfunction that I am experiencing. I just recently learned how to use doctypes to validate my code. I validated it to the best of my ability (XHTML 1.0 transitional) and there was no change.
It seems as though most people experience more problems with IE6/win than with Netscape. Why is my situation so drastic? I am ready to convert everything back to tables just to save me the headache. Since when did good old html become so meticulous? I assure you, my pages are not even very complex! Arg, I am so frustrated (and behind schedule)!
Any thoughts?
Why is my situation so drastic? I am ready to convert everything back to tables just to save me the headache. Since when did good old html become so meticulous? I assure you, my pages are not even very complex! Arg, I am so frustrated
This is a really good question.
The people who post the most here are for the most part total experts, who have been doing this stuff for years, most of people you read postings by have major programming backgrounds, they play with this stuff constantly, and have done so for years, and I've found that even they can't get some of the bugs really resolved in most cases, testing almost always reveals a problem with browser x or y, or computer x or y.
All CSS layouts involve bugs in different browsers. There is no such thing as a positioned div layout that will work as stably or as reliably as a clean table layout cross browser, that's just the way it is.
You pay for the flexibility you get with div construction with the stability you had with tables, that's why if you take a look around at your favorite commercial websites, you'll notice they almost all use tables. That's not because they people writing them are stupid or don't know the standards, it's because they need to have stable displays.
If you are trying to create table structures with div tags, you are going to run into very serious problems, with a really big drop in functionality and stability, as you have already seen.
If, on the other hand, you just use divs to pop content in little containers here and there on your page, you'll be relatively fine (until you test on say Mac IE 5)
My advice is learn div construction on your own, don't even think of trying to do a commercial job until you have a very good sense of it, that takes a few years, and you will always be learning how to solve new bugs in different browsers, and adding fixes for this or that weirdness.
When I want to learn a major new part of CSS, I give it a few hundred hours of research, a few hundred hours of testing, then I'll make a complex practice site, that takes a hundred hours or so. Easily 10 times more time than I spent when learning basic HTML.
[edited by: isitreal at 5:12 am (utc) on Mar. 30, 2004]
Can you post the code to the page (usually links aren't allowed here) or atleast specify what is wrong with it rather than saying it just looks bad?
Those had a lot of bugs in them, a lot of those bugs have been fixed in 1.5 and later, almost all of them.
Are you using a FULL doctype to put the browser into 'standards compliant' mode?
The full doctype for xhtml1 transitional is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Also have you validated the css [jigsaw.w3.org] as well as the html?
I have been reading some posts from other discussions and it looks as though I am facing an overflow issue. In IE6/win I was working off of what some people consider a bug: parent container DIV's grow to fit everything inside - including floating children. Apparently, Netscape and Mozilla do not recognize these nested divs as children, or whatever the reason is ... the main point is that the container div does not grow. This "bug" is also apparent in Opera. Thus, my page looks fine in Opera.
A nice example of this effect is on this page: [quirksmode.org...] I don't know if it is against the rules to post that link, but I found the page through one my many google searches and it clearly illustrates this issue.
Thanks again for all of your help!
This is probably a basic issue, but hey, now I know!
but he said Netscape 7.1, which is based on Mozilla 1.4
Yes, sorry about that, I misread it, that's right.
parent container DIV's grow to fit everything inside - including floating children. Apparently, Netscape and Mozilla do not recognize these nested divs as children, or whatever the reason is ...
Floats cause serious problems, I thought you said you were doing a simple layout, floats when used to create page structure, well, it's a bad idea in my opinion, they aren't stable, try resizing your pages and you'll see why in some cases, especially if you used fixed widths on them.
One of the biggest issues is that unless you have a mac to test on, you might do your whole layout, find it works on windows and linux, then you'll suddenly hear from someone that it isn't working on MSIE 5x mac.
I believe, though I'm not sure, that MSIE and Opera are incorrect, and Mozilla is correct. This is unfortunately a very typical CSS problem, the decisions on how to implement CSS positioning can vary quite widely, if you read the w3c recommendations you will see why, they were very vague in some areas, maybe deliberately so. MS will usually opt for the most user friendly approach (users meaning standard web designers), mozilla will try to get as close to their understanding of the current standards as they can.
In the case of float, the w3c has very specific requirements for the behavior of the top of the float, but say almost nothing about the bottom of it. So what you are seeing in this case is different browser makers simply doing it the way they think it should be.
