Is it possible? Non-jumping, non-overlapping, inline CSS!?

[Birmingham]

W3.org has jumping and overlapping CSS when the window is resized too small. Google use tables, which I use too seen as CSS is so flawed! Does anyone have a bulletproof tableless CSS design with columns that dont jump and don't overlap?

[Twey]

seen as CSS is so flawed!

CSS is not flawed -- your use of it is.
There comes a point at which you have to say, "well, if the user is stupid enough to resize his window to 5px width, he can damn well deal with the consequences." I usually say that if it looks OK at 640x480, it's fine.

[mwinter]

W3.org has jumping and overlapping CSS when the window is resized too small.

As far as I can see, any overlap is caused by long words, more than anything else, and there are no practical solutions to that; soft hyphens could allow a browser to hyphenate such words, but as I recall, support is very poor.

As for jumping, you'll have to be more specific. If you're referring to columns that are reflowed below other content, that's typically done by design. There's only so much horizontal real estate available, and so at a certain point, it's not reasonable to display everything side-by-side. As the content is the most important part, it is the columns that usually move first.

If media queries were available from the outset, there would be an intrinsic means of switching between different style sheet based upon viewport properties. As it is, only Opera implements them (at least amongst the 'major' browsers), and at a rudimentary level.

Google use tables,

Google using bad markup? Since when has that been news? Most large corporations are guilty of it, but then again, they have such a large user base that it doesn't make much of a difference to them. Moreover, they typically have such large sites that an overhaul now would take far too much time and money.

Why people feel compelled to follow in the footsteps of something that represents a bad decision is beyond me.

which I use too seen as CSS is so flawed!

So basically, you're just trolling? Cheers. I'll make a mental note to ignore you from now on then.

Mike

[Birmingham]

CSS is not flawed -- your use of it is.
There comes a point at which you have to say, "well, if the user is stupid enough to resize his window to 5px width, he can damn well deal with the consequences." I usually say that if it looks OK at 640x480, it's fine.

w3.org starts to overlap before 640 x 480. notice the indent appearing after the 1st column.... then resize to web-tv size (544 x 384) and the 3rd column jumps below the other 2, leaving white space everywhere and words in a mess.

So basically, you're just trolling? Cheers. I'll make a mental note to ignore you from now on then.

Mike

Considering your unwarranted hostile comments, I don't disapprove of this decision

Back to the subject: can anyone attempt to offer bulletproof css design? or is there any agreement with my decision for using tables?

[Twey]

I see no overlapping at all, actually. At 644px width, overflow is clipped. However, there is sufficient whitespace for the site to still be displayed fully at 628px.
Mozilla/5.0 (X11; U; Linux x86_64; en-GB; rv:1.8.0.4) Gecko/20060607 Firefox/1.5.0.4

unwarranted hostile comments

Mike's comments were quite justified. Your post had all the marks of a classic troll. If it was not intended as one, you should attempt to avoid it resembling one.

[Birmingham]

if you can't see the w3c overlap / unintended margin / css problem then i won't argue nor provide screen shots. i'm using MSIE btw - and i'm not proud of it (at uni, can't change it)
about my trolling behaviour - i'm so sorry you feel that way.

[Twey]

Internet Explorer has several bugs that make it often render pages completely differently to what the standards say it should. In these cases, there is little you can do other than to use conditional comments to include an IE-only style sheet to compensate for these bugs.