/ Published in: CSS
visual_consistencies.css : 2005.09.07 : Ruthsarian Layouts
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
@charset "iso-8859-1"; /******************************************************************************* * visual_consistencies.css : 2005.09.07 : Ruthsarian Layouts * ----------------------------------------------------------------------------- * Font sizes on heading elements and the margin/padding applied to these * same elements will vary from browser to browser. This is an attempt to pull * the font sizes and spacing together for a consistent look across all * browsers. * * There are other rules included in this stylesheet (with comments on each) * to handle other visual consistency issues. You do not need to use this * stylesheet, nor do you need to follow it exactly. You can make changes * anywhere you want to make things look the way you want to. Nothing here * _should_ break a layout if modified. *******************************************************************************/ ul, ol, dl, p, h1, h2, h3, h4, h5, h6 { /* pixels are used here, rather than ems, because I want a consistent * margin on the different headings. if I use ems, 1em for an h1 element * is much larger than 1em on an h6 element. I don't want this. */ margin-top: 10px; margin-bottom: 10px; padding-top: 0; padding-bottom: 0; } ul ul, ul ol, ol ul, ol ol { /* kill margins on sub-lists */ margin-top: 0; margin-bottom: 0; } h1 { font-size: 240%; } h2 { font-size: 180%; } h3 { font-size: 140%; } h4 { font-size: 100%; } h5 { font-size: 70%; } h6 { font-size: 50%; } a, a:link, a:visited, a:active { text-decoration: underline; } a:hover { /* because I like the visual feedback a user gets when they * mouse over a link and see the underline of the link * disappear. */ text-decoration: none; } code, pre { /* Make sure we're all using the same monospaced font for CODE * and PRE elements */ font-family: "Courier New", Courier, monospace; } label { /* It's all about the visual feedback. In this case, label * elements are usually clickable which then set focus on * their target. I want to show that to the user in a manner * they are used to and understand. */ cursor: pointer; } table { /* Some browsers won't carry the font size down into the * browser like they're suppose to. */ font-size: 100%; } td, th { /* I never like or use the default vertical centering "feature" * provided by tables. */ vertical-align: top; } body { /* I've seen several comments that setting the base font size to 100.1% * fixes some browser bugs. Which bugs? I don't know. I believe it's * to fix some rounding-error bugs that some browsers (Mozilla) are * prone to. It doesn't hurt anything, so I keep it here. */ font-size: 100.1%; } /******************************************************************************/