Standards Compliant Website Project

HTML 4.01 Templates

XHTML 1.0 and 1.1 Templates

HTML 4.01 Symbol Entities Reference

CSS Templates

The W3C Validation Services

Conditional Comments & Filters

Image Replacement Techniques

Miscellaneous Resources

“Give layout ” to elements

The source of most of Internet Explorer’s bugs comes from an IE-only property called layout. An element can either have layout or not, which determines how an element is rendered by the browser. Most of IE bugs can be squashed by giving layout to the offending element, which is done simply by assigning one of the following properties to that element:

JavaScript

JavaScript –local scripts

JavaScript –frameworks/libraries

Selected Content Management Systems & Blogging Engines

Tables and Forms

Sticky Footer

Solution by Steve Hatcher, http://www.cssstickyfooter.com. Works great. NOTE: No top or bottom margins or borders for these elements; if set, vertical scrollbar appears – use padding instead.

HTML:


<div id="wrap">
<div id="main">
<span>content or floated elements here</span>
</div>
</div>
<div id="footer">
<span>siteinfo</span>
</div>

CSS:


html, body, #wrap {height:100%;}
body > #wrap {height:auto;min-height:100%;}
#main {padding-bottom:140px;}/*must be same height as the footer*/
#footer {position:relative;margin-top:-140px;/*negative value of footer height*/
height:140px;clear:both;}
#main {overflow:hidden;}/*try this instead of clearfix, to clear any
floated elements inside the container*/
#main {height:1%;}/*for IE6*/

IE6 Bugs

Double-margin float bug in IE6

Add display:inline if floated elements have horizontal margins:

#element {float:left;margin-left:20x;display:inline;}

Three-pixel text jog bug in IE5-6


.myFloat {float:left;width:200px;}
p {margin-left:200px;}
.myFloat {margin-right:-3px;} /*IE6 only, if not image*/
img.myFloat {margin:0;} /*IE6 only, if image*/
p {height:1%;margin-left:0;} /*IE6 only*/

Duplicate character bug in IE6

Easiest solution is to remove comments from your HTML code (or set 3px negative right margin to the last floated element).

Alpha transparency PNG on IE5.5+/Win


#background {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true,sizingMethod='crop',src='myimage.png');background:none;}

Conditional code blocks for IE


<!--[if lte IE 6]>
<div class="ie">
</div>
<![endif]-->

Peek-a-boo bug in IE6

Some solutions:

Miscellaneous issues

Collapsing margins

#box {margin:10px;} p {margin:20px;}

The paragraphs’s 20-pixel top and bottom margins collapse with the 10-pixel margin on the div, forming a single 20-pixel vertical margin.

Solution:

Add transparent border or 1px of padding: #box {padding:1px;}

Layouts with negative margins

Simple 2-column liquid layout where the sidebar has a preset width and the content has a liquid width of 100%:

<div id="content">
<p>Main content</p>
</div>
<div id="sidebar">
<p>Sidebar</p>
</div>

#content {width:100%;float:left;margin-right:-200px;}

#sidebar {width:200px;float:left;}

To prevent #sidebar from overlapping the text inside #content, simply add:

#content p {margin-right:210px;}