The very first, original thread that started this conversation offers additional information of the origins of these CSS settings and why I use what I do. I explored many CSS reset and CSS framework approaches and realized that they were overkill for the majority of my projects.

This file is not meant to fit everyone's projects and needs. It will reset the most common cross browser inconsistencies and provide a method of organization, commenting, and serve as a foundation to build your own file.

Share this post

Link to post

Share on other sites

It certainly is useful to have a starting point for a quick webpage, before you add detailed edits.

In most places font is % or ems but in two places, pre and .small, it's in px. Could this cause the display to look a bit odd (edit: in IE which doesn't resize text when in px) when someone resizes text?

Edited December 24, 2008 by Wickham

Share this post

Link to post

Share on other sites

In most places font is % or ems but in two places, pre and .small, it's in px. Could this cause the display to look a bit odd (edit: in IE which doesn't resize text when in px) when someone resizes text?

Well, for my projects it is ok and I don't worry as much as I once did about it because all modern browsers 'Zoom' by default instead of increasing text size. IE6 and FF2 are the only browsers that are still showing significant usage that resize text and do not support zoom.

The % is a reset explained in the first post. It forces an 'em' to be 10px regardless of monitor resolution and size. So I start with a %, use em for typography, and then force a large or small size using px. The classes there are just examples, but I use them in my CMS sites as the classes that TinyMCE grabs and makes available for site owners. So, if a site owner wants to float something or make a font small, they assign the appropriate class using the Style dropdown option of TinyMCE and in some cases FCKEditor.

.

Share this post

Link to post

Share on other sites

Well. I'm being a bit fussy; it's just that if a person with bad eyesight enlarges only the text in IE6 or IE7, the 10px .small class text will still be 10px, which could be difficult for them to see, but IE7 has a zoom so it's probably only IE6 which my comment applies to, and that's not got a huge share of the market now.

Share this post

Link to post

Share on other sites

Well. I'm being a bit fussy; it's just that if a person with bad eyesight enlarges only the text in IE6 or IE7, the 10px .small class text will still be 10px, which could be difficult for them to see, but IE7 has a zoom so it's probably only IE6 which my comment applies to, and that's not got a huge share of the market now.

right. it is only IE6 that applies to which is why I no longer worry about it. I have the same concerns you write about. Thankfully modern web browsers are finally beginning to behave like modern web browsers. But, remember, this is an example of what works best for my projects. 90% of my projects are from agencies that hire me as their lead developer and want fixed width, fixed fonts, fixed everything to match the specifications exactly. Unfortunately there is little room for me to propose better approaches when I receive the final PSD and specs approved by the client.

Edited December 31, 2008 by shelfimage

Share this post

Link to post

Share on other sites

Guest fearless_fool

Guest fearless_fool

@shelfimage: this tyro thanks you for a VERY useful bit of work -- your default.css is a great way to get going.

Have you run it through the W3C validator, i.e. http://jigsaw.w3.org/css-validator/? I tried it and it came up with 1 error ("Property word-wrap doesn't exist : break-word") and 5 warnings. Are any of these worth looking at?

best,

- ff

Edited July 16, 2009 by fearless_fool

Share this post

Link to post

Share on other sites

Have you run it through the W3C validator, i.e. http://jigsaw.w3.org/css-validator/? I tried it and it came up with 1 error ("Property word-wrap doesn't exist : break-word") and 5 warnings. Are any of these worth looking at?

Cool!

Correct, word-wrap is an IE only property. I'm not too worried about that though. The warnings that are shown will be there until the person using the file applies it to their project and makes it their own. It is only a skeleton that needs to be modified for each project.

UPDATED VERSION - New version uploaded to Box.net (http://www.box.net/shared/j2q23gqzue) with minor differences. The important parts are Resets; HTML & Body; Links; Typography; Lists; Tables; and Forms - because they help reset elements and make it easier to be cross browser compatible. The other sections are just examples of what might be needed for typical projects. Enjoy!