Controlling text on screen

Having pixel precision of your text on screen can be a fiddly task, especially across a complex site where there are data tables, forms and lists etc. Here are some of the css rules that can help you along the way to styling and controlling your text.

CSS Rules (not exhaustive):

• font-family (sans-serif;)
• font-style (italic; oblique; normal;)
• font-variant (italic; normal;)
• font-weight (normal; bold; bolder; lighter; 100;)
• font-stretch (normal; wider; narrower; ultra-condensed;)
• font-size (keywords; length; percentage;)
• text-indent (length; percentage;)
• text-align (left; right; center; justify;)
• text-decoration (none; underline; overline;)
• letter-spacing (normal; length;)
• word-spacing (normal; length;)
• text-transform (capitalize; uppercase; lowercase; none;)

Read the rest of this entry »

Empty div’s - the IE problem

I came across this when I was trying to style a div with a background image I had designed. . . Sounds easy huh? Well the problem wasn’t the background image it was the height of the div! A margin of space seemed to appear and screw up my design. In FireFox it looks sweet, but IE did not like it at all. This one really irritated me, so as not to forget it I thought I would post it on here.

Read the rest of this entry »