By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,846 Members | 1,872 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,846 IT Pros & Developers. It's quick & easy.

Setting intelligent, consistent CSS default values

P: 12
It was suggested elsewhere by a moderator that it is a good practice to use "* {margin:0}" at the beginning of my style sheet to turn off the browser-dependent spacing. Presumably this is one step to getting consistent rendering of the output whether using IE or other browsers. Also I have tried to become consistent by using the following in my templates:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

When I do this I find that various things start to deteriorate. For example my paragraphs run together without spacing in between, lists deteriorate in inconsistent ways, etc.

My question is this: Can anyone post some of the standard CSS they use to recover the "normal" look of HTML (I've spent several hours trying to get back to where I started but it still doesn't look right to me). I'd like to believe that I'm not the first to experience this and would like to save a few more hours of fiddling.
Apr 4 '07 #1
Share this Question
Share on Google+
8 Replies


drhowarddrfine
Expert 5K+
P: 7,435
You should set padding, also.
*{
margin:0;
padding:0;
}

Your doctype is the wrong one to use and it mixes html with xhtml. There is a sticky at the top of this forum but this is what you need:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/html4/strict.dtd">
<html>

You have no need for the transitional doctype except for older pages that use deprecated code. Try those two things and see what happens.
Apr 4 '07 #2

P: 12
OK, I did that. And looking at my test pages in Firefox, I still find that putting all margins and padding to zero results in paragraphs that are crammed together, lists that are incorrectly aligned, etc. (No surprise)

What I'm hoping is that someone has already come up with a set of "starter" values for things like <p> tags and lists and other normal elements that will approximate the default browser behaviour I had before doing this (but is now consistently implemented across IE and other platforms).

I have spent several hours fiddling with values and experimenting and I'm still not at all happy with the result. The bullet lists look lousy, there's space where there shouldn't be, etc.

I really would like to write proper HTML and CSS, but I could use a bit of help.
Apr 5 '07 #3

drhowarddrfine
Expert 5K+
P: 7,435
The problem is that browsers sometimes have different default margins/padding so there is no way to get them consistent, hence the reason for setting everything to zero and adjusting each individual element. Lists are particularly troublesome because IE gets it wrong by using margins while everyone else uses padding due to their initial misuse of the box model.

There are other ways to do this. Google for "undo html" and "really undo html" but those will do pretty much the same thing and you will have to go in and set those values individually to what you want, mostly to get IE to work correctly.
Apr 5 '07 #4

P: 12
I understand the problem. But surely someone has a standard set of CSS they use after setting the margins and padding to zero.

I know that if I spend enough hours on this I can come up with one on my own. I'm just trying to use the spirit of a forum (sharing?) to get a decent starter set that someone else uses. Like I said above, I've already spent hours on this and still haven't satisfactorily returned some relatively simple HTML to the look it had back before I started this whole exercise. (For example, I haven't been able to get the second line of my bullets to indent properly, and I'm still struggling to separate inter-line spacing and intra-paragraph spacing values in paragraphs.)

I understand that if I use someone's starter set, I'll need to tweak it for each site, but I'd think the common stuff we all need, like the margins and spacing around paragraphs and lists would be similar.
Apr 5 '07 #5

drhowarddrfine
Expert 5K+
P: 7,435
Although there are templates around, these are designed for one particular look, but, no, default values are what everyone uses and setting everything to zero is most common.
Apr 5 '07 #6

P: 12
I'm not trying to start a flame war here, but frankly, I really don't understand why you are so willing to give out CSS that causes a page to deteriorate but not to offer some to help me recover it. In fact your categorical statement might cause any readers who have one to avoid contributing; after all, it's not nice to disagree with the moderator.

Fortunately, I located another site that discusses this very issue and from there I was able to get some simple starter values that seem to have solved my problem. Of course I will need to do my own additions and changes, that goes without saying. But it has stepped up to the problem of good initial CSS values. The article that I found very helpful was here:

http://kurafire.net/log/archive/2005/07/26/starting-css-revisited
Apr 7 '07 #7

drhowarddrfine
Expert 5K+
P: 7,435
Feel free to disagree with me as much as you want, as long as you do it respectfully.

The link you are referring to is actually the third site I would have pointed you to but thought my first two references above would have sufficed. Your link is but another variation of those two. So while you say I wasn't willing to give you what you wanted, in fact, you are reading about the same method. It's all good but using this is not for everyone.
Apr 7 '07 #8

P: 1
I think that main problem here is that as a newcomer to CSS, you are not aware of how much variance you can have between styles, problems, solutions, and foundation. If you start to standardize your initial pages in accordance with someone else's standard sheet you are already limiting yourself.

As was said, you found one more example of how to do it.

The biggest hurdle that I needed to get over with CSS and standardization was that I needed to think outside the box to produce newer, more invigorating design and development...from no standards except my imagination and logic.
Jun 24 '08 #9

Post your reply

Sign in to post your reply or Sign up for a free account.