SitePoint Sponsor |
|
User Tag List
Results 1 to 19 of 19
-
May 7, 2004, 13:37 #1
- Join Date
- Jun 2001
- Location
- Melbourne, AU & Seattle, WA
- Posts
- 502
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Looking for CSS templates that work in ALL browsers.
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.
~Dorian
-
May 7, 2004, 13:41 #2
- Join Date
- Apr 2004
- Location
- NC
- Posts
- 689
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
May 7, 2004, 14:08 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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.
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
-
May 7, 2004, 16:49 #4
- Join Date
- Jun 2001
- Location
- Melbourne, AU & Seattle, WA
- Posts
- 502
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
~Dorian
-
May 7, 2004, 19:46 #5
- Join Date
- Jan 2004
- Location
- Melbourne, Australia
- Posts
- 7,305
- Mentioned
- 1 Post(s)
- Tagged
- 1 Thread(s)
Which IE are you talking about? 6? I've never had a problem with it (apart from little fancy things)
-
May 7, 2004, 22:39 #6
- Join Date
- Jan 2004
- Location
- Glasgow, Scotland
- Posts
- 60
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
May 8, 2004, 01:57 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
As i said above:
Originally Posted by me
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
-
May 8, 2004, 02:21 #8
- Join Date
- Mar 2004
- Location
- Earth
- Posts
- 406
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
May 8, 2004, 05:04 #9
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
But for IE you can do a lot with expression() values
-
May 8, 2004, 06:50 #10
- Join Date
- Mar 2004
- Location
- Earth
- Posts
- 406
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
May 8, 2004, 07:45 #11
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Off Topic:
Hi,
You believe wrong then
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.
Code:#element (width:expression(document.body.clientWidth < 760 ? "760px" : "auto" );}
you could simply have added this code to your linked example.
Code:* html .udm li a {height:1%}
Code:#second a { text-align:right; width:expression("auto",this.runtimeStyle.width=(isQuirksMode) ? "100%" : (this.parentNode.offsetWidth - 20) ); }
Paul
-
May 9, 2004, 02:54 #12
- Join Date
- Mar 2004
- Location
- Earth
- Posts
- 406
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
)
Code:width:expression( documentElement.clientWidth < 760 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 760 ? "760" : "auto") : "760px") : "auto" );
Originally Posted by Paul O'B
-
May 9, 2004, 03:02 #13
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by brothercake
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
-
May 14, 2004, 16:13 #14
- Join Date
- Oct 2003
- Location
- norway
- Posts
- 92
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Too early for most (advanced) table-less designs
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 =)
-
May 14, 2004, 19:58 #15
- Join Date
- Feb 2003
- Location
- Akron, OH, USA
- Posts
- 106
- Mentioned
- 3 Post(s)
- Tagged
- 0 Thread(s)
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
-
May 14, 2004, 20:02 #16
- Join Date
- Oct 2003
- Location
- norway
- Posts
- 92
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
May 15, 2004, 01:47 #17
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by Aphenitry
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
-
May 15, 2004, 09:30 #18
- Join Date
- Nov 2001
- Location
- Bath, UK
- Posts
- 2,498
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Aphenitry
impossible to make a css/table-less layout that's compatible across all browser/platform combinations
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,
DouglasHello World
-
Oct 15, 2004, 22:54 #19
- Join Date
- Dec 2003
- Location
- el paso tx
- Posts
- 119
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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!
Originally Posted by Paul O'B
Bookmarks