Looking for CSS templates that work in ALL browsers.

[theGWS]

Correct me if I'm wrong, but apparently it's impossible to make a css/table-less layout that's compatible across all browser/platform combinations. IE for Win and Mac is the worst. Safari, Netscape, and Opera work perfectly on both platforms, but IE just sucks! I'm sick of wasting time trying to make things work in various environments so if anybody can point me to a site that has a variety of css layouts that work in IE and the better browsers, then please share it. I don't need fancy - just a variety of css layouts to choose from.

[Josh_]

It's not impossible, it just takes a lot of hacks to get it to work in IE and mac.

But if you consider NN4 a browser, it will never work in there.

[Paul O'B]

Correct me if I'm wrong, but apparently it's impossible to make a css/table-less layout that's compatible across all browser/platform combinations

You are correct .

But it's also impossible to make some table layouts compatible across all browser platforms as well .

I know its a pain and I wish there was an easy way to do it as well but there is no getting around having to check in each browsers you want to support and coding accordingly.

IE version 5+ for the pc is easy to fix but ie mac is a lot harder. Even my 3 col layouts at the top of the threads (which use some complicated stuff) work in ie5 - 6 without problems. They also render well in mozilla and other major browsers.

If you want something for nn4 then it might be worth looking at some of the layouts here:

http://www.saila.com/usage/layouts/nn4-layouts.shtml

Sorry I can't be more specific

Paul

[theGWS]

NN4 is nothing I take a concern to. (Do people even use it anymore?) It's IE that irritates me to no end. I can make 2 and 3-col layouts with headers and footers that display perfectly in Safari, NN7, and Opera for both Mac and Windows, but IE breaks everything apart and makes my webpages unpresentable. Does that stupid browser even support css?

[Egor]

Which IE are you talking about? 6? I've never had a problem with it (apart from little fancy things)

[Rincewind]

It's actually quite easy to make truly cross browser designs. It's just that it is instinctive to push technologies to the limit. And when you get close to that limit you have to start using hacks. From my experience, most hacks in css are used to make css look like tables. You know the 3 collumn, header and footer type design that is easy on tables and had in css. If you don't try to emulate tables with css and actuall design using the css's own properties then you can create designs that are novel, x-browser compatable and free form bugs and hacks.

[Paul O'B]

Hi,

As i said above:

IE version 5+ for the pc is easy

While ie5 may have some small issues ie5.5. and 6 are generally no problem to sort out when you know what you are doing.

If you can give examples of where you are having problems in ie then I can (probably) show you how to fix them (unless of course you are specifically using the css that ie hasn't implemented (like position fixed)).

Most times it's peoples lack of understanfing how css works that causes problems. One point in case is that CSS makes no assumptions about how a tag should look but browsers do and will set different default margins and padding. This is easily remedied by setting margins and padding explicitly.

It really is quite easy once you understand the differences/basics and only takes me a few minutes to do layouts that would take me hours with a table (that is if could get a table to do what i wanted anyway ).

Don't give up it will be worth it in the end

Paul

[brothercake]

I agree with the original poster - IE5 and IE6 between them give me 10 times more trouble than every other browser put together. But for IE you can do a lot with expression() values - make up for a lot of its poor CSS support that way. http://webfx.eae.net/dhtml/cssexpr/cssexpr.html

Also Google for "one-time-use expression" - very nifty that is.

[Paul O'B]

But for IE you can do a lot with expression() values

Although expressions are quite useful I believe they only work in quirks mode though

[brothercake]

You believe wrong then

Although it's true that if you're doing things like setting element dimensions through expressions, then it's more complicated if you're not in quirks mode.

But you can use ternary statements inside expressions - here's a thread in a different forum where I did just that to solve a particularly tedious problem in IE http://www.codingforums.com/showthread.php?t=37260

[Paul O'B]

Off Topic:


Hi,

You believe wrong then

I thought I might be wrong - I should stick to css

As javascripts not my thing what would I need to add to this code to make it work in standards mode as it only works in quirks mode at present.

#element (width:expression(document.body.clientWidth < 760 ? "760px" : "auto" );}

As an aside you could simply have added this code to your linked example.

* html .udm li a {height:1%}

Instead of all this.

#second a {
	text-align:right;
	width:expression("auto",this.runtimeStyle.width=(isQuirksMode) ? "100%" : (this.parentNode.offsetWidth - 20) );
	}

Sometimes ie needs a hand in finding the width of its elements and the height :1% comes in useful in a lot of situations.

Paul

[brothercake]

As javascripts not my thing what would I need to add to this code to make it work in standards mode as it only works in quirks mode at present.

The only reason that doesn't work is that in compliant mode the canvas is document.documentElement rather than document.body. But since documentElement still exists in quirks mode, with an offsetWidth of 0, we can use that to determine which value to use. (Like I said - more complicated )

width:expression( documentElement.clientWidth < 760 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 760 ? "760" : "auto") : "760px") : "auto" );

As an aside you could simply have added this code to your linked example.

Good aside - I like that much better

[Paul O'B]

The only reason that doesn't work is that in compliant mode the canvas is document.documentElement rather than document.body. But since documentElement still exists in quirks mode, with an offsetWidth of 0, we can use that to determine which value to use. (Like I said - more complicated )

Ahh - I understand Thanks for that it will come in very useful

I must really try and get out of this forum and brush up on my other skills as they are falling behind lol.

Paul

[Aphenitry]

After HOURS of trying to make things compatible I've given up. I use CSS for style etc, and for a lot of positionstuff, but when it comes to the grand-design, I usually stick with tables. I don't remember who said it here, but table-based designs are SOOO much easier to get right the first time on all browsers worth concidering versus CSS-based layouts, it's just not worth it. To get CSS-based designs working you usually have to do SO MANY hacks that I'm thinking the table-based layout is cleaner anyway - atleast from a developers point-of-view.

Like, when you start to cheat with nesting, floating, placement etc to make it more compatible - you are starting to destroy the samantics you were striving for to begin with.

Also, it's easy to make the site look good in lynx and similar browseres without resorting to a total ban of tables. Boho, so the 7 line-navigation came first (or last). You are still using headers, paragraphs, divs.. You got that XHTML validation no matter how many tables you use (yes, I know they SHOULD be used for tabulator data and similar things).

That said, if things would work like xhtml1.1/css2.1(3) declares (out-of-the box, NO hacks), I would throw tables out without hesitation.

Some people also point out how it's so much smaller - in 95% of the time I think this is a non-issue. If your estimates show you can save thousands a month/year on converting, it's starting to make sense. So you start working on the re-design (or design). If you calculate 150$ an hour, you can see how things are starting to get expensive pretty fast, so this should only apply to HIGH-load sites. If the extra load is either neglectable or very low, it's really not a valid argument since (for my sites atleast) the textsize is inferior to the images and other multimedia data. And how much are we talking about here anyway? A few more <td>'s and <tr>'s? Remeber it's not either that or this, I'm compromising - using CSS all the way except for crucial positioning stuff.

I see how this can be fun for hobbyist-developers, developers who really don't care about other browsers than Opera, or similar reservations, but in a commercial-sence (where you have to support both win/mac/linux/unix and all major browsers on each os) it's insane for me atleast.

There are several posts on the web about this for both sides, here's one on my side http://www.sfsmith.com/blog/archives/000016.html

CSS-only based designs CLEARLY aren't working like they should - if they where, you wouldn't be asking this question, I wouldn't be writing my answer, and the web wouldn't be crammed with tableless templates and tutorials.

If the browser-people could just interpret the recommendations right the first time..

*brings up the heat-shield* =)

Edit: Actually, with all the sites I've strived for this over time, it should read "After DAYS" or perhaps even WEEKS =)

[scannon]

It's not entirely impossible. I've tested my personal with the following tools for IE and Safari browsers.

http://www.danvine.com/iecapture/ - for checking windows browsers
http://www.danvine.com/icapture/ -for checking mac browsers

Then I have FF 0.8, Opera, and IE 6 and my layout looks the same in everything. However, it's nothing fancy; I haven't finished it yet.

So, from my testing my layout looks fine in ALL major browsers.

You may use my code as a LEARNING TOOL ONLY! Please do not copy it. (As crappy as it is...!)

http://www.seancannon.net

[Aphenitry]

I'm not saying it's impossible. You can do as many browserhacks/checks/stylesheets as you want. It all depends on the design. Some may not require any, some many. I'm saying then it's usually not economically feasable.

[Paul O'B]

It all depends on the design.

It also depends on the designer

I've wasted hours trying to get tables to do what I want and now it only takes me minutes to make a css layout.

CSS has to be learned and understood (just like you did with tables) before you can apply it correctly. Then you will know instantly whether a proposed design will work in css or a hybrid table should be used.

There are designs that are suited to tables and designs that are suited to css. If you are trying to copy the table layouts of old then you are heading in the wrong direction.

A lot of table sites are just drawings cut up sliced and diced and stuck in a table in a million bits with spacer gifs holding them all together. They make no logical sense and are usually badly put together with invalid code and are extremely bad for accessibility.

The table design has been made easier by wysiwyg editors so that everybody and his cat can have a website. This is fine for amateurs but doesn't really cut it in the real world where usability, accessibility and design should go hand in hand. The trouble with css is that you have to learn how to use it and apply it correctly.

So what if it doesn't work the same in all browsers - I'll think you'll find that most table layouts don't work in all browsers either. As I mentioned in another post the last three table examples I have been shown to copy my css layouts didn't actually work (and this was from so called table experts).

I've got nothing against tables and think they should be used when they are right for the design in hand. Hybrid tables with css are fine, accessible and usable. Nested tables with millions of spacer gifs and thousands of sliced and diced images are not.

Some css layouts are rubbish and also unusable and inaccessible but that doesn't mean that all are. It doesn't also mean that css is no good - it's the designer that is no good.

This argument shuldn't really be an argument there is no need to say that tables are beeter than css or vice versa. Both have their strengths and weaknesses and should be used accordingly. Ultimately its the designer that's at fault either way for not using the proper tools for the job in hand.

Paul

[DougBTX]

If the browser-people could just interpret the recommendations right the first time..

Doubt that would help much, people still have problems coding for Moz and Opera which follow the recommendations...

impossible to make a css/table-less layout that's compatible across all browser/platform combinations

Depending on how you read your comment, you are either totally wrong or totally correct. In all browsers? What, even Mosaic with 0 CSS support? Hell no. In modern (IE5+) browsers? Sure, quite possible. Just hire a designer/developer who knows what he or she is doing.

The problem I see at the moment, in a broader sence, is a general lack of understanding of the basic CSS principles, combined with a quasi-religious view on XHTML purity. Get past both of these and you're away. (Most of the hacks you see around today (the Tantek Hack in particular) are unnecessary.)

Regards,
Douglas

[jammo]

i spent a good few hours today, reading through the countless posts on CSS, positioning, div based layouts, etc etc.

ive gone to alistapart, glish, wellstyled, and many others.

the quote below has GOT to be the most in-depth comment on the subject at hand. and i thank Paul for his comment here, and his so-many-others scattered throughout this site.

there is an inspiration around every thread it seems.
damn, im having a good day!

It also depends on the designer

I've wasted hours trying to get tables to do what I want and now it only takes me minutes to make a css layout.

CSS has to be learned and understood (just like you did with tables) before you can apply it correctly. Then you will know instantly whether a proposed design will work in css or a hybrid table should be used.

There are designs that are suited to tables and designs that are suited to css. If you are trying to copy the table layouts of old then you are heading in the wrong direction.

A lot of table sites are just drawings cut up sliced and diced and stuck in a table in a million bits with spacer gifs holding them all together. They make no logical sense and are usually badly put together with invalid code and are extremely bad for accessibility.

The table design has been made easier by wysiwyg editors so that everybody and his cat can have a website. This is fine for amateurs but doesn't really cut it in the real world where usability, accessibility and design should go hand in hand. The trouble with css is that you have to learn how to use it and apply it correctly.

So what if it doesn't work the same in all browsers - I'll think you'll find that most table layouts don't work in all browsers either. As I mentioned in another post the last three table examples I have been shown to copy my css layouts didn't actually work (and this was from so called table experts).

I've got nothing against tables and think they should be used when they are right for the design in hand. Hybrid tables with css are fine, accessible and usable. Nested tables with millions of spacer gifs and thousands of sliced and diced images are not.

Some css layouts are rubbish and also unusable and inaccessible but that doesn't mean that all are. It doesn't also mean that css is no good - it's the designer that is no good.

This argument shuldn't really be an argument there is no need to say that tables are beeter than css or vice versa. Both have their strengths and weaknesses and should be used accordingly. Ultimately its the designer that's at fault either way for not using the proper tools for the job in hand.

Paul