HTML - Kit : resources for web developers Box Model Hack Boxtest Here is a sample div with class "boxtest". It has 20px border, 30px padding, and 300px width. The total width including borders and padding should be 400px. User agents which misinterpret the CSS1 box model by placing border and padding inside the specified width would result in a total width of only 300px, and a content width of only 200px. The red and blue bars below are there for comparison. Content Here is a sample div with class "content". This div is styled almost identically to the "boxtest" div: with one important addition. This div (including its borders) should also be as wide as the blue bar, even in IE5/Windows and IE5.5/Windows. In addition, we add one more rule immediately following the above style rule, to help out UAs which support CSS2 selectors and the CSS box model, but have the same parsing bug as IE5.x/Windows mentioned above. This paragraph has class="ruletest" and thus should be colored blue. Addendums Avoid the unnecessary ? Since the ? Semantic XHTML See Also
Writing maintainable code Three years ago, I gave my first talk at Yahoo! entitled, Maintainable JavaScript (slides). The point of the talk was to encourage people to use more rigor in their JavaScript coding. What is maintainable code? In the presentation, I said that maintainable code has the following qualities: UnderstandableIntuitiveAdaptableExtendableDebuggable I’d also now like to add “Testable” as a sixth quality of maintainable code. Confusing code doesn’t embody these qualities and makes everyone’s job harder. It’s hard to uncover confusing code without context. Anyone who’s worked with me knows my passion for code reviews, as I believe they are the best way to not only catch more esoteric issues but also as a way to socialize best practices within a group. Confusing JavaScript Confusing code comes in many forms but has an overriding quality: it’s hard to tell if it’s intentional or a mistake. This code looks innocuous enough. How do you make it into good code? This code is much less confusing. JSLint
Web Page Design for Designers - Colour The next couple of pages are about palettes. Colour palettes were very important in the early days of the Web when most people used monitors that could only display 256 colours or less. These systems are now becoming increasingly rare and the dithering problems associated with restricted palettes are gradually disappearing. Popular statistics sites now show that the instance of 8-bit monitors has dropped below 10% of total Web users. Having said that, having thousands of colours to choose from can be very confusing. If you don't really care about the ins and outs of 8-bit palettes, you can skip this section and go to a page about the more practical aspects of colour theory. What you see on this page depends on which colour depth your monitor is set to. In 16-bit or 24-bit, all the images will look about right with only subtle differences. If your monitor is set to 8-bits (256 colours), the results will vary from 'slightly dithered' to 'totally wrong'. Beyond 8-bits But beware! Note.
W3Clove :: validate your whole website with one click! (woo hoo!) An Introduction To Object Oriented CSS (OOCSS) - Smashing Coding