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 […]
Category Archives: HTML
HTML: coding email newsletters
Golden rules: 1) Make sure width and height is set in each td and img tags in the email: not on the table! but on each cell. 2) Every image is set to display:block. Also, if relevant, put an alt attribute as 40% of email readers won’t download the actual image. Also, whenever possible, user […]
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 […]
Web design: Standard screen resolution
1024×768, at least 20% users have this one, and lots of users have above that.
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 […]
DOM (Document Object Model)
It is an abstract, internal representation browsers keep of the page loaded, with all the elements integrating it and the order they were loaded, so it is disposable to JavaScript for further manipulation. It is a convention of the World Wide Web Consortium (W3C) that browsers follow.
CSS Browser conditionals for IE
Example of how IE support conditionals that narrow the code to only a specific browser and version: <!–[if gte IE 5]> <style type=”text/css”> Your code here <![endif]–>
favicon.ico
It shows as an image on the browser address bar. The ico image needs to be on the root server directory. Note that this file is really sticky when it comes to cache, meaning that if you hit your site and then edit and upload a new version, the old version will display even after […]
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 […]