If I said it once I've said it 1000 times . . .

Anyone care to build a list of 'most often overlooked CSS issues'?

[Webwork]

Deep in my learning curve I just scanned to SitePoint about 3 column layouts and came across this robust little gem (which I paraphrase):

If I've said this once I've said it 100 times: Browsers impose default margins and padding on all elements. Your job is to control the default margins and padding by applying the dimensions you require for your layout. One way you can do this by adding this to the end of your stylesheet: h1 {margin:0;} ul {margin:0}

Browsers set their own - varying - defaults for margins and padding, which can disrupt my design? Arrrggghhh! More damned CSS minutae!

As I waltz along the path to CSS enlightenment and bliss, blithely unaware of common CSS pitfalls, is there anyone - a hero, a mentor, an ordinary Joe - who would care to hasten my enlightenment by adding to the list of laments about repetitive CSS neophyte failings, ones that meet the following standard:

If I've said (or read) this once I've said this a hundred times . . .

[drbrain]

Here's two that bug me:

Authors incorrectly use a to style links. They should be using :link and :visited in combination with :hover, :active, and :focus to style links:

[dbaron.org...]

Authors use too many divs, spans and classes to create effects. This is something that authors will learn to fix over time as their experience increases. After getting a design to work, the next step should be removing as much markup as possible while making it still work.

Often a more complicated selector or careful use of multiple classes can replace extra markup.

[jetboy_70]

In CSS, there are usually multiple ways to achieve an effect. Some ways cause cross-browser issues. Some don't. Experiment.

If someone says something can't be done in CSS, it often means that they don't know how to do it, not that it can't be done at all.

Edit: Actually, that second one applies to a lot more than just CSS ;)

[mincklerstraat]

I find it a pity that single-transparency value alpha-transparent png's aren't used more often, since you can get ie to do the same thing with its alpha: filter in an added ie stylesheet.

[stever]

Remember the cascade bit in cascading stylesheets. Don't write more than you need - just change a property when necessary.

Look at your sheet(s) with a critical eye - look at repeated detailed properties which could be covered more easily by a global one with minimal specific changes.

MS conditional comments for IE issues rather than hacks (ducks hastily).

[4css]

Stever
MS conditional comments for IE issues rather than hacks (ducks hastily).

Now, why would you duck hastily?

I have used them playing around and have found a few threads in here on them.

I have to admit, much easier then learning the hacks ;)
off she heads to css p class

[encyclo]

MS conditional comments for IE issues rather than hacks

No, don't duck - it is the best solution for targeting IE by far.

Another very basic thing I've said a thousand times, especially those new to CSS, is validate [jigsaw.w3.org] and validate [validator.w3.org]. If the page isn't valid (both HTML and CSS) then you can't be sure whether you've got a CSS bug or a rendering bug caused by the errors in your markup.

[MatthewHSE]

Some of the following may seem pretty basic, but if we're talking about overlooked CSS issues, these should definitely be included . . .

I think the initial post here nailed a good one. The defaults for padding, margins, and other such design aspects, including font size, can and should be over-ridden in the stylesheet. The defaults are all different, so by specifying them yourself, you eliminate a lot of cross-browser headaches.

One notable exception - to me, at least - is background color. I believe the default is transparent, right, and that's pretty well dependable cross-browser? Unless I want a different background color, I don't specify one explicitly. Saves a line here and there in that stylesheet!

Another useful gem is to use CSS Positioning as much as possible, but don't expect or work toward pixel-perfect designs. It just won't work, so you're better off saving your time, leaving the layout a little "loose" to allow for different browsers' (read IE) quirks.

Floated elements are taken out of the flow of a document, so in order to be "contained" in another element, the parent element needs to be floated as well. Use clear:both when you finally want to "get beneath" your floats.

Position:absolute positions the element absolutely in the browser viewport - unless the absolutely-positioned element is within a relatively-positioned element. Then the absolutely-positioned element is positioned absolutely in the relatively-positioned element. Very handy technique.

Absolutely-positioned elements are taken out of the document flow; relatively-positioned elements aren't.

:hover and :active pseudo-classes only works on links in IE; as far as I know, the :focus pseudo-class doesn't work at all in that browser.

And the last one I can think of is to always develop "for" a recent version of Mozilla or FireFox, then debug in IE. Follow DrDoc's instructions for installing multiple versions of IE [webmasterworld.com] and test clear back to IE and NN 4.

[SuzyUK]

...One way you can do this by adding this to the end of your stylesheet: h1 {margin:0;} ul {margin:0}...

or as has been said 1000 times try adding
* {margin: 0;} to the start of your stylesheet, because even if you were to get to grips with the recommended defaults [w3.org] differing browsers haven't incorporated them all that way. :o (and it will mean less surprises as to what elements have defaults)

...And then you have margin collapsing to deal with.. so it's best to zero them all and deal with them as you set them as opposed to guessing what they are or might be!

.. and (oh dear it's happening again isn't it, sorry Webwork.) I've since learned that IE can't handle default margins in a collapsing scenario but if you explicitly set them it at least gives them a sporting chance :)

Suzy

4css - I reckon you'll be teaching this css-p class soon ;)

[4css]

SuzyUK

...And then you have margin collapsing to deal with.. so it's best to zero them all and deal with them as you set them as opposed to guessing what they are or might be!

One thing to let webwork (and others seeking to learn this information as well)know about in regards to the margin collapsing, is that it only happens on the vertical margins. Not horizontal.

Here [andybudd.com] is an article that covers this.

You can also find information on this in the CSS2 Specs [w3.org]

SuzyUK
4css - I reckon you'll be teaching this css-p class soon ;)

lol, thanks for the vote of confidence Suzy, Right now my head is swiming with all the CSS2 specs that were required reading. Along with the other reading that was required this week! I know its a matter of doing the pages that puts the learning into perspective. Lots of doing! ;)

[mincklerstraat]

suzyuk: that's a real good one, and I'm kinda ashamed I never thought of that myself - always used to starting off selectors with margin: 0;

'pixel-perfect' can work in css, though I've found that for some effects, you want to pull in a table or two (one will usually do it). That can also go as another css piece of advice: if it isn't working in pure tableless css, look around a bit and try things out, but don't drive yourself nuts, just add that extra table where it helps you get things right.

With absolute positioning, browsers will often disagree about which selector is the one which should be the determining selector (from which the position is measured). In this case it helps to add an 'anchor' div that is explicitly diminesioned, even if it doesn't display anything. This 'anchor' div is then becomes the solid, obvious building point for your absolutely positioned divs that get position themselves off the anchor div - make sure all the stuff in between that div and the one you want to position absolutely doesn't have both width and height stated explicitly, but instead e.g. get their dimensions by images - this way these relatively 'wimpy' elements won't end up being the ones browsers try to position the absolutely elements off of.

[mincklerstraat]

The user-edit button is gone, so I suppose there must be some kind of time limit to this function --

anyways, a must read by Tantek Celik, "ten css tips" - Tantek makes some corrections to an article originally posted on evolt.org - original article was so-so, maybe more for newbies, but Tantek has some *excellent* additions. url: [tantek.com...]

One in particular I should have remembered here: using short-hand css declarations sets all of the properties for that shorthand category back to default. So if you do
.bigbox {
font-family: verdana;
font: 8px bold;
}
your font-family declaration will get re-set to default. I found this out the hard way, which wasted quite some time.

[4css]

One in particular I should have remembered here: using short-hand css declarations sets all of the properties for that shorthand category back to default. So if you do
.bigbox {
font-family: verdana;
font: 8px bold;
}
your font-family declaration will get re-set to default. I found this out the hard way, which wasted quite some time.

According to the article, its not the usage of the shorthand, but the incorrect usage of the shorthand property that causes it to go back to the default.

"Just a couple of words of warning: This CSS shorthand version will only work if you're specifying both the font-size and the font-family. Also, if you don't specify the font-weight, font-style, or font-varient then these values will automatically default to a value of normal, so do bear this in mind too."
Ten CSS tricks you may not know [evolt.org]

Taken from the first tip, 1. CSS font shorthand rule

And if I am remembering correctly, don't all shorthand rules need to be in a particular order?

btw, thanks for the link, I already have it tabbed in my browser, and I think it might be a great link to post in my css p class.;)

[mincklerstraat]

4css:

And if I am remembering correctly, don't all shorthand rules need to be in a particular order?

This is one that I think I tripped up on in my first experiments when it came to font declarations - I think my problem was over-writing previously assigned values with font-family: [whatever] by a following shorthand font: [whatever] tag. The css2 spec doesn't say anything about a special order in their general page on shorthand. [w3.org...] (I might have missed something elsewhere) You'll also find the rule there about how everything's set back to default in a particular property category when you declare properties in shorthand. As you rightly mention, Mr. Celik only mentions this (in #3) sort of in passing without really getting into it.

Good luck in your css class! It takes enough skill to wrap your mind around some of these things, and to explain it to others takes even more! Good css skills is also something that the web needs badly, you're teaching something important. Bring your experience back here too, I for one would like to hear more.

[4css]

Good luck in your css class! It takes enough skill to wrap your mind around some of these things, and to explain it to others takes even more! Good css skills is also something that the web needs badly, you're teaching something important. Bring your experience back here too, I for one would like to hear more.

lol, I'm curently taking the class, and its a bit involved.
I agree that good css skills are needed. I know many that are learning "on the fly" and are missing a good bit.

I'm sure if you are already working its a different situation, you don't have the time to really learn this as it should be learned. As anxious as I am to be working, I want to be working correctly (if that makes sense?) I also know that css p classes aren't easy to come by. So by taking this one, I figure it will give me some grounding to add to reading and searching online for more links.

Self teaching, its a long road to travel, but I have come a long way from that first Hello world page! lol ;)

I thought that I would add this link <sorry no URLs> here because it has some pretty good layouts on it.

The good thing about the pages is that the styles are embedded in the document so that you can grab the code and styles and play around with it to you hearts content!;)

[edited by: SuzyUK at 11:16 am (utc) on Nov. 5, 2004]
[edit reason] sorry no URLs : see TOS #13 [webmasterworld.com] [/edit]