Posted By


dividespace on 10/21/06

Tagged


Statistics


Viewed 75 times
Favorited by 0 user(s)

visual_consistencies.css


/ Published in: CSS
Save to your folder(s)

visual_consistencies.css : 2005.09.07 : Ruthsarian Layouts


Copy this code and paste it in your HTML
  1. @charset "iso-8859-1";
  2.  
  3. /*******************************************************************************
  4. * visual_consistencies.css : 2005.09.07 : Ruthsarian Layouts
  5. * -----------------------------------------------------------------------------
  6. * Font sizes on heading elements and the margin/padding applied to these
  7. * same elements will vary from browser to browser. This is an attempt to pull
  8. * the font sizes and spacing together for a consistent look across all
  9. * browsers.
  10. *
  11. * There are other rules included in this stylesheet (with comments on each)
  12. * to handle other visual consistency issues. You do not need to use this
  13. * stylesheet, nor do you need to follow it exactly. You can make changes
  14. * anywhere you want to make things look the way you want to. Nothing here
  15. * _should_ break a layout if modified.
  16. *******************************************************************************/
  17.  
  18. ul, ol, dl, p, h1, h2, h3, h4, h5, h6
  19. {
  20. /* pixels are used here, rather than ems, because I want a consistent
  21. * margin on the different headings. if I use ems, 1em for an h1 element
  22. * is much larger than 1em on an h6 element. I don't want this.
  23. */
  24. margin-top: 10px;
  25. margin-bottom: 10px;
  26. padding-top: 0;
  27. padding-bottom: 0;
  28. }
  29. ul ul, ul ol, ol ul, ol ol
  30. {
  31. /* kill margins on sub-lists
  32. */
  33. margin-top: 0;
  34. margin-bottom: 0;
  35. }
  36. h1
  37. {
  38. font-size: 240%;
  39. }
  40. h2
  41. {
  42. font-size: 180%;
  43. }
  44. h3
  45. {
  46. font-size: 140%;
  47. }
  48. h4
  49. {
  50. font-size: 100%;
  51. }
  52. h5
  53. {
  54. font-size: 70%;
  55. }
  56. h6
  57. {
  58. font-size: 50%;
  59. }
  60. a, a:link, a:visited, a:active
  61. {
  62. text-decoration: underline;
  63. }
  64. a:hover
  65. {
  66. /* because I like the visual feedback a user gets when they
  67. * mouse over a link and see the underline of the link
  68. * disappear.
  69. */
  70. text-decoration: none;
  71. }
  72. code, pre
  73. {
  74. /* Make sure we're all using the same monospaced font for CODE
  75. * and PRE elements
  76. */
  77. font-family: "Courier New", Courier, monospace;
  78. }
  79. label
  80. {
  81. /* It's all about the visual feedback. In this case, label
  82. * elements are usually clickable which then set focus on
  83. * their target. I want to show that to the user in a manner
  84. * they are used to and understand.
  85. */
  86. cursor: pointer;
  87. }
  88. table
  89. {
  90. /* Some browsers won't carry the font size down into the
  91. * browser like they're suppose to.
  92. */
  93. font-size: 100%;
  94. }
  95. td, th
  96. {
  97. /* I never like or use the default vertical centering "feature"
  98. * provided by tables.
  99. */
  100. vertical-align: top;
  101. }
  102. body
  103. {
  104. /* I've seen several comments that setting the base font size to 100.1%
  105. * fixes some browser bugs. Which bugs? I don't know. I believe it's
  106. * to fix some rounding-error bugs that some browsers (Mozilla) are
  107. * prone to. It doesn't hurt anything, so I keep it here.
  108. */
  109. font-size: 100.1%;
  110. }
  111.  
  112. /******************************************************************************/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.