17 replies [Last post]
DaveTheRave
Offline
Regular
Norwich
Last seen: 16 years 44 weeks ago
Norwich
Joined: 2006-01-22
Posts: 26
Points: 0

Hello all,

I'm new to CSS.
I use dreamweaver.

I have found that rendering of relative position styles to be inconisistent between browsers (only looking at MS IE6 and Mozilla Firefox 1.5).

This have now sent me down the path of using tables to get consistent layout. This works much better but seems to be the old way of doing things.

Am I missing something?

Regards
Dave

drhowarddrfine
Offline
Leader
Last seen: 13 years 5 hours ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Inconsistency across browsers

We need to find this "they" person and shoot them. Never, ever use tables for layout. They are for tabular data only.

Make sure you have a proper doctype to keep IE and all browsers on the same set of "rules".

Always design and test your page using Firefox (or Opera). These browsers are standards compliant and use modern techniques while IE is old, buggy and a poor standards observer. If you get it right in Firefox then chances are it will work with all modern browsers and only need some adjustments for IEs quirks and bugs. You will learn to despise IE.

Be careful of DW because it creates code which leans toward IE. It also tends to write code which is very superfluous, ie, creates more code than you would if you did it by hand. It may be hard to debug because of that. (However, I have not used the latest version which I hear is better.)

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

DaveTheRave
Offline
Regular
Norwich
Last seen: 16 years 44 weeks ago
Norwich
Joined: 2006-01-22
Posts: 26
Points: 0

Inconsistency across browsers

Quote:
Never, ever use tables for layout. They are for tabular data only.

Table are how layouts used to be done - so why are they so bad?

I tried using styles with positions, unless you use absolute positioning its seems not to work as expected and quite inconsistent across browsers. Using absoulte positioning means your layout is designed for a fixed resolution.

Quote:
Make sure you have a proper doctype to keep IE and all browsers on the same set of "rules".
Please forgive my ignorants about this, what doc type should I have set ?

Quote:
Be careful of DW because it creates code which leans toward IE. It also tends to write code which is very superfluous, ie, creates more code than you would if you did it by hand. It may be hard to debug because of that. (However, I have not used the latest version which I hear is better.)
I use the latest version, and it generally seems to generate fairly clean code, I never used an old version so cant compare with that.

Regards
Dave

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Inconsistency across browsers

DaveTheRave wrote:
Quote:
Never, ever use tables for layout. They are for tabular data only.

Table are how layouts used to be done - so why are they so bad?

Because their use as a layout tool was something that was never intended with their original design. Today, with CSS, we are able to revert back to using the correct tag to describe content: heading tags for headers, lists for lists and tables for tables of information, not layout.

DaveTheRave wrote:
I tried using styles with positions, unless you use absolute positioning its seems not to work as expected and quite inconsistent across browsers. Using absoulte positioning means your layout is designed for a fixed resolution.

No, using absolute positioning is what you get from using WYSIWYG editors and results in producing inflexible layouts that will often break when the user resizes their window or their text size.
Check out this thread.

DaveTheRave wrote:
I use the latest version, and it generally seems to generate fairly clean code, I never used an old version so cant compare with that.

Even the latest version produces bad code if you use it in WYSIWYG mode because it seems to use absolute positioning instead of floats for positioning.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

drhowarddrfine
Offline
Leader
Last seen: 13 years 5 hours ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Inconsistency across browsers

I recommend HTML4.0 strict.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Inconsistency across browsers

Verschwindende wrote:
  • CSS doesn't make pies

DaveTheRave
Offline
Regular
Norwich
Last seen: 16 years 44 weeks ago
Norwich
Joined: 2006-01-22
Posts: 26
Points: 0

Inconsistency across browsers

Tyssen wrote:
DaveTheRave wrote:
Quote:
Never, ever use tables for layout. They are for tabular data only.

Table are how layouts used to be done - so why are they so bad?

Because their use as a layout tool was something that was never intended with their original design. Today, with CSS, we are able to revert back to using the correct tag to describe content: heading tags for headers, lists for lists and tables for tables of information, not layout.

If this is true why do microsoft and others use tables to construction the pages on there web site ?

Regards
Dave

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Inconsistency across browsers

DaveTheRave wrote:
If this is true why do microsoft and others use tables to construction the pages on there web site ?

Because they were first built at a time before CSS gave developers the tools to be able to create the sort of layouts they wanted without resorting to tags whose purpose was never intended as such.
And because Microsoft is not a good example to hold up of a company adhering to current web standards.
As you seem intent on thinking up examples to back up your hypothesis that using table for layout is OK, how about you read this:
http://www.hotdesign.com/seybold/

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Inconsistency across browsers

Look at ebuyer. Not a table in sight.

Tables are bad, and if you'd bothered to read the links I posted 3hours and 20 minutes before your reply, you'd see why. Thay're bloated, inaccessible, and horrible to style.

Verschwindende wrote:
  • CSS doesn't make pies

drhowarddrfine
Offline
Leader
Last seen: 13 years 5 hours ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Inconsistency across browsers

MSN does not use tables for layout.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Inconsistency across browsers

Yes it does Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

aca_dia
Offline
Regular
Last seen: 17 years 31 weeks ago
Joined: 2005-04-25
Posts: 27
Points: 0

Inconsistency across browsers

I am only an amateur builder doing volunteer work for several non-profits, but even I quickly leaned to discard table layouts as soon as it became practical with CSS. All of the links about are excellent and if you need more examples and reasons to leave tables behind I will add these links (all have been posted many times before I am sure).

http://www.csszengarden.com/

http://css.maxdesign.com.au/

and if you are really new to CSS and CSS layouts checkout Eric Meyers on CSS.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Inconsistency across browsers

DaveTheRave wrote:
If this is true why do microsoft and others use tables to construction the pages on there web site ?

Microsoft is probably not a good company to use for debating. They care none about standards and moving foward. It's their way or the highway...

Here's an excellent article by Doug Bowman of StopDesign on much Microsoft could benefit by switching to a CSS layout
http://www.stopdesign.com/articles/throwing_tables/

drhowarddrfine
Offline
Leader
Last seen: 13 years 5 hours ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Inconsistency across browsers

Quote:
Yes it does
No it doesn't. They use one table for the stock quotes but that's all.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

DaveTheRave
Offline
Regular
Norwich
Last seen: 16 years 44 weeks ago
Norwich
Joined: 2006-01-22
Posts: 26
Points: 0

Inconsistency across browsers

Hi All,

Thanks for the many responses Laughing out loud
I just looked at an Ebay page, that still seems to use tables.

If all is good with CSS positioning why is anyone bothering with tables.

I started doing a web site with relative positioned style sheets - I wanted to embrace the new technology. It all looked good under IE6. When I tried Mozilla Firefox V1.6 it looked like a pile of guess what.

Maybe my use of style sheets is not correct (or standard), so I enter the area of not so well defined functionality.

Regards
Dave

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Inconsistency across browsers

You do have to accept that you're learning a new method of doing things; CSS is far more flexible than the table construct can ever be you can't just expect to start producing perfect layouts with it without some sort of learning curve involved. Put some study in and things will start to make sense and come together and whatever you do do not code for IE this is the wrong way of doing things IE does not support standards that well, you must code for a compliant browser first then check and fix up for that P.O.S.

Bear in mind that on this forum, the discussion and support of tables for layout purposess does not go down too well, being that we have all mainly made the move to full CSS-P layouts. Tables for what they are intended for then there is no problem.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DaveTheRave
Offline
Regular
Norwich
Last seen: 16 years 44 weeks ago
Norwich
Joined: 2006-01-22
Posts: 26
Points: 0

Inconsistency across browsers

I have visited http://www.csszengarden.com/ and its look pretty good. But all the styles except the first look like they use fixed positioning, the page width does not change when the browers is re-sized.
Why is this?

Regards
Dave

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Inconsistency across browsers

DaveTheRave wrote:
the page width does not change when the browers is re-sized. Why is this?

Because that's the way the designers wanted it. They've designed fixed width layouts.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference