Extra CSS Necessary?

HTML & CSS
1

I’m curious if you know the answer to this…

Say you have this CSS:

body {
color:#252525;
font-family:Arial,sans-serif;
font-size:12px;
line-height:1.7;
}

That’s sufficient for all content on all of the pages on one site, but it is not sufficient when I use the same HTML and CSS from within a Drupal template.

For example, using the CSS definition above, all of the text displays using font-size 12 and font face arial. Using Drupal, text falling within a table td ends up using the browser’s default style settings - so the font ends up in a different face and muuuuch larger. In order to fix things, I end up having to add another CSS definition like this:

td p {
color:#252525;
font-family:Arial,sans-serif;
font-size:12px;
line-height:1.7;
}

It seems like the extra CSS definition should be unnecessary. I’m also curious why I have to. I’ve run into it before and I’ve always just added the extra CSS definitions to solve the problem. I’m assuming that it’s because at some point in the CSS the style for the td or p is being reset. Maybe there’s a better answer though. It would be nice not having to add the extra CSS tags. Any ideas?

-Ed

2

A browser won’t generate a doctype. It’ll make various browsers just use their inbuilt quirks modes. There are plenty of pages around without doctypes, so browsers can display those pages, and missing the opening tag is an error but I would think each browser would interpret that differently.

Did you leave a bug report/note over at Drupal (was your source file a Drupal template file?) so that whoever made the source file can fix it?

3

Thanks for the help you guys =)

I figured out what the problem was… The source file that I was copying into my Drupal template had a bug. Specifically, the opening HTML tag was missing. Fixing this solved the problem. I think the browser was automatically compensating by generating it’s own doctype.

4

It seems like the extra CSS definition should be unnecessary. I’m also curious why I have to.

Drupal community encourages people to keep the default CSS and use a special stylesheet to override everything. This means you must write CSS for every little thing, which isn’t something I personally like but most people seem ok with it.
Otherwise, the other option is to remove all the Drupal stylesheets so that you only have your own. If you are familiar with how Drupal themes work, this will certainly give you less code in total. I got the book “Drupal 6 Themes” from Packt Press specifically to learn how to safely do this (tho I’ve stopped with reading it as other things came up).

You now see why most templates have many stylesheets and lots of extra code in them.

5

Are you sure it’s not some Drupal defaults? It would be interesting to target the element with Firebug and see where the styles are coming from. (If nothing shows up other than your styles, it probably is the browser, but I’ve not heard of a browser overriding these styles.)

BTW, if you did have to stick with the styles you’ve pasted above, you could group them todether like this:

body, td p {
color:#252525;
font-family:Arial,sans-serif;
font-size:12px;
line-height:1.7;
}

But you shouldn’t have to.

EDIT: Welcome to SitePoint! :wink: I dodn’t notice it was your first post.