<irony>Help!! My website only works with decent, standard compliant browsers! </irony>

Hehe, I had to make that joke. But it is not a joke really. My website layout works in Opera 9, Konqueror 3.5, and Safari 3 only. In other words: Really good standard compliant browsers only!

I do belive the problem lies with my weird float, negative-margin, position-hacked, overflow-managed thingy. However I have no idea how to fix it; so it will work with not-optimal browsers like Firefox and the Internet Explorer series. Can anyone pretty-please assist?

The layout has the following problems, according to screenshots from Browsershots:

• Firefox 1.5 and 2, and derivatives: (Top) The two darkest greens are above the white area. The brightest green is in the white area, but twice as big as it should be.
• MIE 5 and 5.5: (Top) The darkest green appears were it should. Two other greens are hidden.
• MIE 6: (Top and bottom) Brightest green not displayed. Both bottom greens in the white area.
• WIE 7: (Top and bottom) White area appears too high. Brightest green and it's text not displayed. Both bottom greens in the white area..

Confirmed correct displaying in: Opera 9.23, Konqueror 3.5, Safari 3b (Win).

Originally posted at Opera Forums.

My website layout works in Opera 9, Konqueror 3.5, and Safari 3 only. In other words: Really good standard compliant browsers only!

Firefox is hardly 'not optimal'.

1 - I don't see a PROPER DOCTYPE
2 - you're missing a closing </div> for #container which will throw things off and Firefox IS picky about that stuff.
3 - you have this for body rules: "line-height: 1.6" - 1.6 WHAT ?? You MUST provide a unit.. em, %, etc.

Why go thru all that with the negative margins and overflow ? Surely there's an easier way to achieve that layout ?

The interesting thing is if I put a 1px blue border around .head, then the extra space closes up, but you lose the very top dark green. This is typical of margin-collapse - which is NOT a bug. Not sure exactly what is going on there yet.

1. It is indeed proper for HTML 5. (I do realise that is just a draft, but still.)
2. You are absolutely right.
3. No. Line-heights are font-size * line-height. For instance would font-size: 12px; with a line-height: 1.5; give an actual line-height of 18px.

I actually forgot to close body and html too!

1. HTML 5? I don't think that there really is an "HTML 5". As I understand it, the last version of HTML was HTML 4.01, then it moves on to XHTML. Anyhow, you just put "!doctype html" as your doctype. Most browsers won understand that and will display things differently because they will just pick a common doctype. http://www.w3.org/QA/2002/04/valid-dtd-list.html

2. Solved

3. Some browsers may assume a specific unit, but if you want them all to work in a similar manner, you MUST be specific in your declarations.

HTML 5 ? Nothing like jumping on the bandwagon prematurely ! I don't know that most browsers are even supporting HTML 5. To start with something that still just a working draft is risky, to say the least, and you can't expect things to be 'perfect' in all browsers for something that's barely built yet.

Oh.. and I found that,currently, the ONLY browser vendors committed to support of HTML 5 is Appl, Mozilla, and Opera

HTML 5 [draft]

With help from this and other forums I have managed to fix the issues in Firefox and in Internet Explorer 7. However IE5, 5.5, and 6 still do not work. Ie 5.x hides the two brightest greens on the top, and IE6 do not display the brightest green.

do you get visits from IE 5.x users??

I know from my site logs over a wide variety of sites that IE 5.x users are less than 1% on average and many of those looked like spoofed UAs.

But why are you trying to meet a "spec" (that isn't a "spec" anyway) that is potentially 15 (Fifteen) years away from full W3C approved status.
It just seems like a totally ridiculous thing to be doing.

Is your site going to have the same design for 15 years?
Are still going to be running it in 15 years?
is IE5/5.5/6 still going to be around in 15 years???

Actually I am only adapting a very limited part of HTML 5. I do not use their structure elements, for instance. Which is the best part of the specs!

Anyways: The issues I have with my design are CSS related. They have nothing to do with the markup (except for my few closing tag errors which have all been corrected).

One thing I will say is your site doesn't conform to several standards (your forms for one thing).

I would say if you are going for standards compliance go with XHTML 1.0/1.1 Strict. Since in my opinion HTML 5.0 is completely the wrong direction for the industry to be taking.

I would also suggest placing your CSS into another file, it keeps everything nice and separate and makes designing far easier in my opinion.

Jamie

I know my CSS should be in a separate file. This is just a test to get the interface working. Easier to check for errors when everything is in one document.

HTML 5 is realy celever. Have you guys read about aside and article elements? Structure wise, HTML 5 it is a dream.

Yep, some of the new elements are great (not the article one, that one is pretty pointless) MY main thing against HTML 5 is that it is being developed at the expense of XHTML which is far cleaner, all the new elements could be incorporated and it would practically end crappy sites if it was properly implemented.

My main argument was against the form you have on your site, i doesn't conform to accessibility standards.

Jamie

The page I am asking for help is just a dummy page anyways. To get the layout working. However it seams like I just have to forget about early versions of IE. They suck too much.

If I understand you right Moldarin, the best way work would be to have one of each web browser installed on your developing machine, even if it means having to scrounge them up from other websites if the original sites don't have them. A lot of people had to do that in situations such as yours. Also for resolution issues, develop in your graphics cards lowest possible resolution. 640x480 if you have that.

Installing Internet Explorer on KUbuntu Linux (64bit) is a bit tricky.