Some CSS "must knows" from me, and please share yours

**Lycanthrope** · 09-02-2007, 12:30 PM

Originally posted by testpie

Here's a quick tip:

Instead of wrangling with every element and having to put margin:0;padding:0; use this at the top of your CSS:

Code:

* {
 margin:0;
 padding:0;
}

This works by using the wildcard match to make every element on the page have no padding and no margin without having to constantly redefine these.

Enjoy.

The single best thing you can do to "zero out" every browser across the board

**borked** · 09-02-2007, 12:51 PM

Great thread and great idea!

But, there's a lot I don't understand with CSS, and Stuart's example below shows my ignorance. Take the Acid 2 Test and see if your browser is compliant...

Safari 3 passes the test, Opera 9 neerly passes (nose colour wrong), and besides some very minor other browsers that's it.

The reason I bring this up is that Safari 3, 100% compliant, renders the below wrong. There is no header - the images start and the text wraps around.

CSS is great, and these kinda rules are essential, but it goes much deeper than simple rules - the only rule is to test in as many browsers as possible.

Originally posted by StuartD

Thank you. I decided to put together a couple of examples just to demonstrate... maybe not the best (they're done fast) but they should give you the right idea.

1. This is the thumbs idea from #5. You can resize the browser as wide or as narrow as you like and see how the thumbs will just fit.
I challenge you to try it with a table layout.
http://www.9xs.net/thumbs.html

2. This one is a basic layout with a header, left and right column and a footer (copyright).
Look at the source code to see the actual html (everything after the <body>).
There's almost nothing to it at all. Take out the CSS at the top of the page and you'll have a very basic page.
http://www.9xs.net/layout.html

Hopefully these help to illustrate some of my points.

**Twisted Dave** · 09-02-2007, 02:17 PM

Excellent thread! BUMP!

**Tempest** · 09-02-2007, 02:20 PM

Originally posted by testpie

Here's a quick tip:

Instead of wrangling with every element and having to put margin:0;padding:0; use this at the top of your CSS:

Code:

* {
 margin:0;
 padding:0;
}

This works by using the wildcard match to make every element on the page have no padding and no margin without having to constantly redefine these.

Enjoy.

Nice one.. didn't know about *.. there's some special things like that that I'm not aware of.

**StuartD** · 09-02-2007, 02:31 PM

50 CSS tips and tricks....

Let's keep sharing!

**LadyMischief** · 09-02-2007, 04:01 PM

Awesome thread, Stu, bookmarked! You know how much I LOOOOVE Css... grrr

**MicDoohan** · 09-03-2007, 12:56 AM

one problem i have with my 3 column wordpress css layouts is how to make the 2 colored sidebar columns go all the way to the bottom - as it stands they only go down as far as there is content in them.

any tips css gurus ?

**AlienQ - BANNED FOR LIFE** · 09-03-2007, 12:58 AM

CSS is the suck and not necessary.

**mrthumbs** · 09-03-2007, 02:02 AM

Originally posted by AlienQ

CSS is the suck and not necessary.

Start using it and maybe one day your designs will advance the mid 90's

**quantum-x** · 09-03-2007, 02:10 AM

I must say, to me 'pure css' designs, still seem in the realm of 'hacky' at best, but I love making hybrids : let tables make the main structure, throw in divs and css for the rest, match made in heaven.

**Twisted Dave** · 09-03-2007, 02:50 AM

Originally posted by quantum-x

I must say, to me 'pure css' designs, still seem in the realm of 'hacky' at best, but I love making hybrids : let tables make the main structure, throw in divs and css for the rest, match made in heaven.

What are you talking about? CSS is useable without being hacky in the slightest.

**cykoe6** · 09-03-2007, 02:55 AM

Ths is a really great thread. I hate CSS with a passion but as a full time blogger I am always dealing with it in my WP themes. I find that even the simplest adjustment takes forever to figure out in CSS.... but maybe this thread will help me.

**Grisey** · 09-03-2007, 02:56 AM

Not mine but an old bookmark

http://www.smashingmagazine.com/2007...-live-without/

**testpie** · 09-03-2007, 03:09 AM

Originally posted by MicDoohan

one problem i have with my 3 column wordpress css layouts is how to make the 2 colored sidebar columns go all the way to the bottom - as it stands they only go down as far as there is content in them.

any tips css gurus ?

Just adapt the code from this site: http://www.tanfa.co.uk/css/layouts/c...-layout-v1.asp and remove the footer if you don't want it.

**testpie** · 09-03-2007, 03:10 AM

Originally posted by Lycanthrope

The single best thing you can do to "zero out" every browser across the board

What do you mean?

Sorry for the double post.

Some CSS "must knows" from me, and please share yours

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment