HTML and CSS: general site architecture and good practices

CSS organization: Base/ – reset.css (or normalize.css) – layout.css (any grid system you are throwing in goes here) – typography.css (your fonts stuff) – utilities.css (OOCSS stuff, things that may be easier to just define a class for instead of rules below, like .left { float: left}, or .mtl { margin-top: 20px } See this […]

HTML role attributes

Introduced as part of XHTML, they mark the functionality or orientation of a give content. Used by WAI-ARIA capable screen readers to deduct content from the page. Example: <div role=”banner”>This is my banner</div> This is supposed to be more semantic than <div class=”banner”> There are a bunch of roles that can be used (you can’t […]

On Charsets and other strange black sciences

This is basically the software representation of a given map of language characters. The English language, not having lots of different letters, can be represented by 8 byte construct, which give you about 256 characters. Enough to cover all the letters and punctuation signs. Most browsers and computer systems would default to this if not […]

CSS: make divs auto adjust automatically to different heights on the container div

Basically you put a clear:both at the bottom of the floated elements, to pull the height of the container div down: <html> <head> <style type=”text/css” media=”screen”> #container { background-color:#CCCC99; width:50%; } </style> </head> <body> <div id=”container”> <div id=”left” style=”float:left;background-color:#CCCCCC; width: 40px;”>Too much content it goes off the background of the container div, how do I […]

Browsers: IE problems and browser compatibility issues with IE

IE 6 floating elements that touch each other with a div border, the border of the container get double margin. If you specify 10 for each, you will get 20). The solution: zoom:1 or display:inline – floated elements will behave as blocks, even if you specify display:inline, but nonetheless it will at least fix this […]