13 replies [Last post]
slartybartfast
Offline
newbie
Last seen: 14 years 37 weeks ago
Joined: 2007-05-14
Posts: 3
Points: 0

I have an issue in IE6/7 and Opera - looks good in FF. Pls see:

http://84.9.125.31/developer/css_test/test5.html


3-col layout via CSS

/* */

//


Left Col



This is content of the LEFT column. It can be short, longer or very long.



Middle Col



This is content of the MIDDLE column. It can be short, longer or very long.

Testing the tables

 

The issue is that when there is a table in the middle column which is wider than the default width of that column, the vertical position of the table is exactly aligned with the depth of the longest column in the grid. To see this click the longer or very long hyperlinks in the grey box on the left. If your browser is set so that the table is wider than the middle column (1024x768 does it) the table will move up and down with the depth of the left grey column. Text outside the table is not affected.

NB. This is only in IE6/7 and Opera - it works like a dream in FF and Safari!

In IE I want the table to appear directly under the text above it. If the table is less wide than the middle column the vertical position of the table is as intended, ie directly following the text above it.

I tried position:absolute; on the grey box and this fixes the mid column table position, but this breaks the text in the left grey box outside the base of it.

My knowledge of css is limited. I've been using tables and can see a 3 column table solution working, however I'd prefer to use css if it's possible. Any help is much appreciated.

slartybartfast
Offline
newbie
Last seen: 14 years 37 weeks ago
Joined: 2007-05-14
Posts: 3
Points: 0

Since posting I've been

Since posting I've been googling and this is a bad problem. Most of the comments tend towards "why oh igonrant one do you want to display wide content in the beautiful css 3 column layout? shame be upon you!". It's perfectly reasonable to require wide content in a web page, be it a table like in my case or a picture.

My issue seems mainly due to the inability of IE to be standards compliant. Css was supposed to give us something 'good', removing style from content, reducing markup, enhancing the experience for users and developers alike. It's power is partly it's downfall - with mutually exclusive behaviours in different browsers requiring multiple browser specific hacks.

I'm sticking with tables, I can't be in this css world of hurt a moment longer!

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

Good luck then makes me

Good luck then :shrug:

makes me wonder how we have all managed the transition :? perhaps something to do perseverence, learning new methods, nothing comes overnight!

CSS is indeed complex and powerful, and yes at times one comes up against cross browser problems with interpretation of the specs, but I'd rather have those irritating problems and the power and flexibility of CSS( even in it's present semi mature phase) than the utterly inflexible and incorrect table layout approach , which after all is now firmly redundent and rightly abhored.

You will find that at some point in the future your table approach will be your downfall and you will be forced to face up to how layouts are actually constructed and all that goes with that in terms of accessibility. semantic markup structure and correct seperation of content from presentation.

My honest advice would be to apply yourself to this now rather than later, and to accept that one has to accomodate minorish browser problems, which however do start to fade away once one has a better understanding of how to use and work with CSS.

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

slartybartfast
Offline
newbie
Last seen: 14 years 37 weeks ago
Joined: 2007-05-14
Posts: 3
Points: 0

Thanks for the response!

You are quite correct Hugo. Sorry for the rant, but I've just spent 48 hours trying to fix a really very straightforward requirement of a web-page, ie to display some wide content. Perserverance is one thing, but I have lost patience with the process I have been forced into of trial end error best guess hacking. I can't find any reliable reference to which css standards IE6/7 uses. I knew some programmers who worked like this in assembly language, they don't work in IT any more, except one who now actually does work for Microsoft.

When will CSS apply correctly in IE as specificed in the w3c? maybe by IE 10? I think only then will tables be a thing of the past. Don't forget, this is how the web was first built. Accessibility is important, but my primary concern is consistent display of content. If browser specific hacking comes to the point of almost needing two enitirely different style sheets, something is very wrong.

The problem we all have is that IE 6 is still at c. 50%+ usage. We all love FF, but we can't force people to use it, especially not those corporate users with strict IT strategies, those very people who tend to need to see data analysed in a multi column wide tabulated format.

Have you seen the display:table; issue with IE 7, plus the phantom space issue as posted by me above? Do you have any practical advice or pointers to workarounds?

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

No need to apologise for the

No need to apologise for the rant, I think we can all empathise with the problems that IE brings to the table and of the staggering amount of time spent or more acurately wasted fixing for IE, I know in the past there have been times when I have thrown something together in a matter of a few hours, only then to spend an equal amount of time on sorting an unnoticed problem found in IE, it's simply beyond frustration at times, but.. It does get easier and now that IE6 should begin to be a dim distant memory things will get slightly better, and IE8 is but a year and a half away (whether they will support the selectors that IE7 should have, who knows.)

As for the problem not sure, I'll try and take a look in a while, and perhaps one of the other members will chip in with some thoughts.

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

studious
Offline
newbie
Last seen: 14 years 36 weeks ago
Joined: 2007-05-17
Posts: 1
Points: 0

Same Problem

I'm experiencing this same problem too. I'm using this 3 column layout and there are times when a wide table will be displayed in the center column. In IE, the wide table will align itself below the longest side-column. Adjusting the size of the table isn't an option since it contains a large number of columns. For the purposes of my site, it would be ok if the table overlapped the right-side column or if there was a way to automatically expand the center to encompass the table (I could live with horizontal scrolling on these pages). I haven't found a way to accomplish either of those yet.

Macer
Offline
newbie
Last seen: 12 years 25 weeks ago
Joined: 2009-08-02
Posts: 1
Points: 0

We can all see the

We can all see the theoretical benefit of css. still works better for many pages in certain browsers - especially with wide content like a pic submitted via a content management system. One style sheet per site was the idea. With any reasonable design complexity this isn't possible.

It's a complete waste to develop and test a different website for each browser PLUS each browser release. For IE alone we're now talking about releases 5, 6, 7 and 8. We have Chrome coming on stream with a 'shiney' new os next year. More permutations for testing an already diverse set of perceived/applied standards.

Pls lets put aside the evangelistic nonsense. still works and always has. is inconsistent. We can't force people to use FF when IE is detected as the client. August 2009 and IE 6 is still in widespread use, especially by larger organisations with IT departments who don't allow their staff to install software.

kenmorgan
kenmorgan's picture
Offline
Regular
Last seen: 11 years 46 weeks ago
Timezone: GMT-5
Joined: 2009-07-29
Posts: 21
Points: 9

Hi Macer, I found your post

Hi Macer,

I found your post to this two-year old thread very interesting. I'd really appreciate your take on the thread I recently started:

http://csscreator.com/node/36730

Thanks.

Ken

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

It's likely going to be

It's likely going to be roughly what was posted above is it not? If you are looking for justification for the continued mis-use of tables this isn't really the forum to look for it in.

Macers comments are not the kind that tend to hold much sway any longer, comments such as 'evangelistic nonsense' are just plain irritating and will not be entered into in serious discussion, to be honest the post has all the feel of a classic troll piece.

In fact be advised that the majority of Macers comments are actually inaccurate and misleading.

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

kenmorgan
kenmorgan's picture
Offline
Regular
Last seen: 11 years 46 weeks ago
Timezone: GMT-5
Joined: 2009-07-29
Posts: 21
Points: 9

Hi Hugo, Thanks for your

Hi Hugo,

Thanks for your comment. However, I think you misunderstand me.

Quote:

If you are looking for justification for the continued mis-use of tables this isn't really the forum to look for it in.

I'm not looking for justification for using tables for layout. In my own thread, you'll notice that my original coding was a non-table, CSS approach and that I am now diligently working to find another non-table, CSS approach for which the resulting page behaves the way I'd like it to behave under browser resizing. I am committed to using good CSS.

However, I will admit to one thing. Though I'm not looking to justify the misuse of anything, I am interested in reading well-constructed logical arguments for and against the use of tables for layout, should anyone care to make such arguments. For all I know, there may yet be a minority view among knowledgeable professionals that supports a use of tables for layout, at least in some situations. I thought perhaps that Macer might be such a person. Of course, as I have said in my own thread, it is sometimes difficult to tell whether any given commentator has sufficient expertise to make and evaluate such arguments. Perhaps, as you say, Macer does not meet those qualifications. I too was a bit surprised at the expression "evangelistic nonsense."

The bottom line is that I appreciate your input as a moderator to point out a suspicious post. I'd also certainly appreciate any comments you'd like to make in the thread I started. Smile

Ken

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

Hugo wrote:In fact be

Hugo wrote:

In fact be advised that the majority of Macers comments are actually inaccurate and misleading.

And clearly based on personal experience rather than empirical data. The thing you'll find about most people who advocate using tables for layout on CSS-related forums is that they're people who've tried CSS, had troubles with it, and so decide it must be a problem with CSS rather than them.

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

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

The art of layout is one of

The art of layout is one of a synergy of markup elements - many and various - and a declarative language used to impart the presentational aspects for these elements; this in reality is not as simple or as straight forward as it may appear, there are depths to this that are not apparent until one has spent some time withit, and I guess it ccan seem as though one starts to feel as though they are retrogressing in their learning curve rather than progressing, perhaps that is off putting? perhaps it's easier to revert to what one knows and is used to?

A table used to layout a document is actually a very simplistic and easy approach to achieving a layout, but it is an extremely restrictive one where you have little ability to alter the layout once set. You are in effect using but one of a range of markup elements out of context to perform a secondary task to that of it's intended purpose, this has a further enormous disadvantage which is a breaking of the natural flow of the content, a table renders it's content in a columnar fashion; cells exist in reference to row and column heading, to a screen reader that then makes the content gibberish.

It is true that due to the inability of many browsers to handle CSS effectively it was granted that tables could be used to ensure layouts worked consistently across browser but it was only ever a stop gap, as soon as CSS became viable and better supported there was no reason to use tables in this fashion, and the move to using CSS along with all the semantic elements available - including tables used for tabulated data - became more common place. That was a few years ago today we have been creating stable CSS-P layouts for a while with few issues - browser foibles exempt.

Once you fully understand what flexibility really means when used in reference to CSS-P layouts you will understand that there simply is no argument here.

CSS isn't perfect and no one will claim it is but the same goes for all areas of front end coding, the era of using tables to achieve layouts though, really is long past.

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

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 4 years 31 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

@Ken Macer resurrected a 2

@Ken
Macer resurrected a 2 year old thread and I'm surprised in some ways (and in some ways not Smile), that you got such a fulsome reply from Hugo since this subject has been thrashed on the forum and most of the regulars and mods are tired of going over old ground.

Quote:

Though I'm not looking to justify the misuse of anything, I am interested in reading well-constructed logical arguments for and against the use of tables for layout, should anyone care to make such arguments.

I entered "tables vs css" in the Search bar at top right and got 15 pages of threads you can comb through, here's a selection from the first page:

http://csscreator.com/node/35795 Why not tables - 2009
http://csscreator.com/node/7509 DEBATE: divs vs tables - 2005
http://csscreator.com/node/32368 From table to DIV question - 2008
http://csscreator.com/node/8594 TABLES vs DIVS - 2005
http://csscreator.com/node/30174 A thought about tables vs css - 2008
http://csscreator.com/divs-do-not-replace-tables - 2006

And one from Smashing Magazine
http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/

Then of course there's Seybold:
http://www.hotdesign.com/seybold/index.html

There are about a hundred links for you to follow in those threads alone if that's where you want to spend your time instead of going back to your own thread where Gary posted the answer to your:

ken wrote:

I don't understand this. Why is the height statement necessary? Should not the descendent div's nested within "Container" expand the "Container" div so as to be within it?

If you did follow his link, tried it and had problems with it, bring the problem back to your thread.

I understand some of your frustration in getting to grips with css. Although I never learned tables, I (accidentally) maintain a site written with tables and shudder every time it's owner wants a change. I brought a half-baked css layout here and then spent 5 months, every morning and every night with Hugo (mainly) and the others, bringing my problems here and getting a solution or direction to try the next thing I wanted to do. He didn't give me code - people here rarely do but their patience and knowledge is exemplary. The guys here taught me to build a site and since then I've done 3 more and about to embark on a fourth and I have no intention of being a webbie!!! I just don't want to lose the skills they have taught me.

If you concentrate on getting the div with 3 cols to work and understand the what the css is doing, the rest of your page should fall into place for you. Ignore the rest of the layout until that is done. Install the Firebug web developer tool if you haven't already got it - see Hugo's sticky in the How To forum.

ETA:
Hugo all the pics are missing from the Firebug sticky.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

kenmorgan
kenmorgan's picture
Offline
Regular
Last seen: 11 years 46 weeks ago
Timezone: GMT-5
Joined: 2009-07-29
Posts: 21
Points: 9

Hugo: Thanks so much for

Hugo: Thanks so much for your detailed discussion. I'm printing it off for my files.

Smee: Your admonition was well taken. See my explanation in the post I just made in my thread.

Smile