Implementing hanging bullets with CSS
According to Mark Boulton’s article Five simple steps to better typography – part 2, the text in bulleted lists should be left-aligned with the surrounding text; this is rarely the case on the web, but is easily achievable by using the following CSS style:
1 ul { 2 list-style-position: outside; 3 margin-left: 0px; 4 }
Reset CSS rules to render HTML identically in all browsers
These CSS rules remove most, if not all, browser specific styles from common HTML elements. Your page will look almost identical in all browser when using these CSS rules. Note that this is a combination of Tantek Celik’s undohtml.css and YUI ’s reset.css.
1 /** START BLATANT RIP FROM Tantek Celik's undohtml.css */ 2 3 /* link underlines tend to make hypertext less readable, 4 because underlines obscure the shapes of the lower halves of words */ 5 :link,:visited { text-decoration:none } 6 7 /** END BLATANT RIP FROM Tantek Celik's undohtml.css */ 8 9 /** START BLATANT RIP FROM YUI's reset.css */ 10 11 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 12 margin:0; 13 padding:0; 14 } 15 table { 16 border-collapse:collapse; 17 border-spacing:0; 18 } 19 fieldset,img { 20 border:0; 21 } 22 address,caption,cite,code,dfn,em,strong,th,var { 23 font-style:normal; 24 font-weight:normal; 25 } 26 ol,ul { 27 list-style:none; 28 } 29 caption,th { 30 text-align:left; 31 } 32 h1,h2,h3,h4,h5,h6 { 33 font-size: 1em; 34 font-weight:normal; 35 } 36 q:before,q:after { 37 content:''; 38 } 39 abbr,acronym { 40 border:0; 41 } 42 43 /** START BLATANT RIP FROM YUI's reset.css */
Elastic 2 column XHTML and CSS layout
This is a slight modification of Roger Johansson’s code that I found while reading this article. I’ve modified the code to use ems instead of pixels—Mike Jolley has written about why ems are preferrable over pixels.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 4 <head> 5 <title></title> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <meta name="description" content=""/> 8 <style type="text/css"> 9 * { 10 font-size:95%; 11 font-family: georgia,'Times',serif; 12 } 13 14 body { 15 min-width:62em; 16 } 17 18 #wrap { 19 margin:0 auto; 20 width:60em; 21 border: 1px solid blue; 22 } 23 24 #content { 25 float:left; 26 width:40em; 27 border: 1px solid blue; 28 } 29 30 #sidebar { 31 float:right; 32 width:19em; 33 border: 1px solid blue; 34 } 35 36 #footer { 37 clear:both; 38 border: 1px solid blue; 39 } 40 </style> 41 </head> 42 <body> 43 <div id="wrap"> 44 <div id="header"> 45 Header 46 </div> 47 <div id="nav"> 48 Navigation 49 </div> 50 <div id="content"> 51 Content 52 </div> 53 <div id="sidebar"> 54 Sidebar 55 </div> 56 <div id="footer"> 57 Footer 58 </div> 59 </div> 60 </body> 61 </html>
Improve page load times by combining JavaScript and CSS files
Add cache => true to combine JavaScript and CSS files and improve page load times.
See changeset 6164 for more information
1 <%= stylesheet_link_tag 'all', :cache => true %> 2 <%= javascript_include_tag :defaults, :cache => true %>