More and more people are turning to CSS to separate as much as of their design from the content and more importantly to free their html layout from the shackles of tables. Tables are thus best left for tabular data display. I had nurtured myself a layout done purely through CSS 2.0 and a doctype of XHTML 1.0 transitional a few weeks back, Philippe Wittenbergh was helping me with the layout, trying to get around to it using many hacks. But in due course of hacks over hacks, one day my site get caught in the ALA cut of bug, or the “guillotine bug”.
Bugs and their hacks! Read about the “3px jog”, the Tan hack and the IE5 Mac hack.
Then it was time to think over and do a hackless CSS layout as much as possible, so I settled with the present simple layout based on XHTML 1.0 transitional doctype powered by a mix of CSS 1 and CSS 2. And yes, at this juncture, let me tell you that the last ditch problem in validating the CSS was, that of the CSS from the updated MTCodeBeautifier with the whole bunch of codes, I had to modify that to validate as a valid CSS 2.0. At the moment, I had just completed the modification for the Actionscript syntax style sheet, and most likely I will have to modify some MTCodeBeautifier file for the same.
While struggling to do a tableless (yes, no tables at all) for this site, I came across and learnt a lot from the following sites regarding CSS, their techniques, tips, tricks and hacks. Head over to the links listed below and learn some cool stuffs. Remember CSS is being supported more and more by most modern browsers and many other applications, so it is a good thing to learn something along the way.
CSS related worth mentioning links
(a) eric meyer’s website,
(b) the css wiki,
© a list apart’s css layout technique,
(d) blue robot, how can you miss this one,
(e) the noodle incident,
(f) glish, a good resource,
(g) kay,
(h) css shark,
(i) nc design, rather basic but still good for a start,
(j) nu blog, care for css for print,
(k) real world style, styles that works with antique browsers too,
(l) w3 schools’ css
and how can I forget the css link on
(m) w3c
More Links Update (updated on Thursday, November 6, 2003 from Jeffrey Zeldman’s CSS smorgasbord)
CSS Text Propeties
Fast Rollovers, No Preload Needed
Red Melon experiments
Mini-tab shapes
vertical mini-tabs
Pure CSS popups
Source-ordered columns
CSS Hints for IE5
Netscape-4-compatible CSS layouts
CSS browser hacks
Hiding CSS from old versions of Opera
Hiding CSS from various browsers
Using CSS to style email
Don't like it? There are lots of published articles, pick a random one.
Brajeshwar posted this article
on Tue, Jul 1st, 2003 at 5:43 am
Categorized under Technology
Comments Post Yours
There are 3 responses so far. You can follow any responses to this entry through the RSS feed. You can skip to the end and leave a response. Pinging is currently not allowed.
Hey,
Where did the Flash Comm window went??
The design is cool though……great job done.
Abhishek
Keep a watch out! Most likely to come out as full fledged Audio/Video Communication Service free (most likely) for my audience.
Looks great Brajeshwar,
I was surprised to see a re design, This css business is abit more complicated than it first looks. It took me awhile to get a grip. Glad to see it’s working for you.
On mac safari 1.0 your search text feild sticks out over the content. You might want to set the size down from 28 to 20, I’ve also found that if you don’t state a size that I can get fairly good results with the default width. You’ll want to test that though.
Post yours