Cross-Browser & Validity Woes

[chubbius]

I've been working on this site for two days now... And it's really not that complicated, it's a simple layout, but I just can't find a way to finish it, while making it completely cross-browser compatible, and valid...

I've uploaded the current page here: http://www.eldershut.net/layout/index.html

As you can see, the layout displays slightly differently between Firefox 1.x and IE 6, there's space around the image... But this really doesn't matter.

This is what I'm aiming for, when finished:


header
header
header
______ _____________________
|______| | |
|______| |_____________________|
|______| | |
|______| | |
|______| | |
| |
| |
| |
|_____________________|
______________________________
| |
|______________________________|


So, if someone could help me finish this, I'll give you some candy. Thanks in advance! :cool:

[Kravvitz]

Don't use XHTML 1.1.
Sending XHTML as text/html Considered Harmful (http://www.hixie.ch/advocacy/xhtml)
Serving up XHTML with the correct MIME type (http://keystonewebsites.com/articles/mime_type.php)
http://www.w3.org/2003/01/xhtml-mimetype/
http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html
http://www.w3.org/TR/xhtml-media-types/#summary

XHTML 1.0 vs XHTML 1.1 (http://www.sitepoint.com/forums/showthread.php?t=320391)

You should be aware that the XML declaration puts IE6 in backwards compatibility mode.

You should use a list for that menu.
http://www.alistapart.com/articles/taminglists/
http://css.maxdesign.com.au/listutorial/

Why tables for layout is stupid (http://www.hotdesign.com/seybold/index.html)
Why avoiding tables (for layout) is important (http://davespicks.com/essays/notables.html)
Why go table free? (http://www.workingwith.me.uk/tablefree/why/)
Nested Tables: About the (ab)use of tables as layout tools in webpages. (http://www.dorward.me.uk/www/nested/)
Tables Vs. CSS - A Fight to the Death (http://www.sitepoint.com/article/tables-vs-css/)
Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS (http://www.phrogz.net/CSS/WhyTablesAreBadForLayout.html)
The layout is dead, long live the layout (http://www.westciv.com/style_master/house/good_oil/dead_layout/)
Tables or CSS: Choosing a layout (http://evolt.org/article/Tables_or_CSS_Choosing_a_layout/25/21429/)

[chubbius]

Alright, I'm planning on re-writing the page in HTML 4.01, but I still can't figure out to to position the content box and the footer, without using tables or absolute positioning, so that it displays the same in Firefox and IE. :rolleyes:

[drhowarddrfine]

I still can't figure outAnd you never will until you remove that xml declaration.

[Kravvitz]

You don't need to switch to HTML 4.01. You can use XHTML 1.0 Strict if you want to -- just don't use the XML declaration unless you are prepared to deal with IE6's extreme bugginess.

Use floats and margins.

http://www.alistapart.com/articles/negativemargins/

http://www.alistapart.com/articles/practicalcss/

http://css.maxdesign.com.au/floatutorial/index.htm
http://www.brunildo.org/test/#flo

http://garyblue.port5.com/webdev/floatdemo.html
http://www.csscreator.com/attributes/containedfloat.php
http://www.positioniseverything.net/easyclearing.html
http://www.quirksmode.org/css/clearing.html
http://css-discuss.incutio.com/?page=ClearingSpace

Curing Float Drops and Wraps (http://nemesis1.f2o.org/aarchive?id=11)

[chubbius]

I actually prefer HTML 4.01, it's usually more IE friendly.

Anyways, thanks for the links, I've just decided to use absolute positioning for the menu (which I switched to LI) and margins for the content-box. But I still can't make the menu the same height, which throws the content-box off a little.

Is there some magical universal unit that displays correctly in all browsers, or am I just doing it wrong? :rolleyes:

Here's the link: http://www.eldershut.net/layout2/index.html

[AltF4]

Well...
Try div and absolute postioning. Take it to the CSS forum for help on that.
SORRY!

[AltF4]

Or...
You could try a template.
Check out http://www.steves-templates.com/

[pcthug]

Try tweaking http://www.alistapart.com/articles/holygrail/