static void

CSS Hacks

• CSS Discuss links
• 3 column CSS layout
• 53 different css techniques

voice-family:"\"}\"";
voice-family:inherit;
property:value;

\width: 140px; /*all can read this (do not use \font) -
 you can use * html hack with this*/
w\idth: 100px; /*IE5 cannot read this, but IE6 + can*/

* html

body>div

Left and right align

<div> 
<div style="float:right;width:50%;text-align:right;">
On the right </div>
On the left </div>

The right float has to precede the left in source code order.

Or...with correct source order, with the container having overflow (auto or hidden) to clear the floats...

<div style="overflow: hidden;width: 100%"> 
<div style="float:left;">On the left </div>
<div style="float:right;">On the right </div>
</div>

If you have a center section, you'll need explicit widths.

<div style="overflow: hidden;width: 100%"> 
<div style="float:left;width:30%">On the left</div>
<div style="float:left;width:30%;text-align:center">In the center</div>
<div style="float:right;">On the right</div>
</div>

Centering

Farewell <CENTER> and <div align="center">, deprecated in HTML 4.0 strict.

Inline text (in a <p> or <td>) can be centered by text-align:center.

Centered p

But block content (tables, divs) should be centered in css by setting the left and right margin to auto.

IE (including 6) does not obey this, but incorrectly applies the text-align command for its container (a div wrapper). Note that <TD> table cells will also be centered unless another rule overrides the inheritance. The outer wrapper is a non-semantic hack but it's necessary for IE (alternative: use a transitional DTD with table align="center", which doesn't inherit the alignment to cells but is so much nicer).

CSS modal popup

This css

.modalBackground {
    filter: Alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4; /*x-browser*/
    width: 100%; height: 100%; 
    background-color: #ccc;
    position: absolute;
    z-index: 50;
    top: 0px; left: 0px;
}
.modalPopUp {
    position: absolute;
    width: 300px;
    left: 50%; top: 50%; /*center of page*/
    z-index: 75; /*higher zindex so ontop*/
}

Font CSS

Most users have no idea how to change their default font-size. The default (font-size:medium) is usually 14px. A font-size of 12px is ideal for most webpages. In Mozilla and Opera, this equates to the small absolute keyword; in IE it is x-small. IE does not allow users to override pixel font-sizes (although absolute keywords will scale). This script (from the Dive Into Mark script) has a css-hiding technique for NN4 (the /*/*/ ) and for IE5 (Tantek's voice-family hack), to set all browsers.

body, td, p {
font-size: 12px;
}
/*/*/a{}
body,td,p {
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
}
html>body p {
    font-size: small;
}
/* */

IE :hovers

IE (up to 6) only supports :hovers on anchors (a:hover). FF, IE7+, Safari and Opera support it on everything, which is great for menus (li) and table effects (tr). You can emulate it in IE 6 with a behaviour. - body { behavior:url("csshover.htc");}.

The IE-only htc file parses the stylesheet for hovers. The rule is modified to have an onHover class. The DOM elements found by the rule are changed to attachEvent (IE, not DOM addEventListener) for onmouseover and onmouseout to change the class:

function HoverElement(element) {
 element.attachEvent('onmouseover', 
  function() { element.className += ' onHover'; });
 element.attachEvent('onmouseout', 
  function() { 
element.className = element.className.replace(/ onHover/g, '');
});
}

Here is a simpler case with no behaviour, just script, a named id and an onHover rule. See nested lists below.

//in window.onload
var obj= document.getElementById("doHover");
addHover(obj, "li");
function addHover(obj, tagname) {
if (document.attachEvent) { //ie only
 var taglist= obj.getElementsByTagName(tagname);
 for (var i=0; i < taglist.length; i++) { HoverElement( taglist[i] ); }
} //if (document.attachEvent)
}

External links icons

A CSS rule to mark up external links (beginning with http). This only works with Moz/Safari. Grabbed from the web, origin lost in time.

/* Add an external-link icon to absolute links 
(w3c attribute selectors)*/
a[href^="http:"] {
background: url(externallink.gif) right center no-repeat;
padding-right: 12px;
}

Horizontal lists

• List 1
• List 2
• List 3

/* no bullets */
ul li {list-style:none;}

• List 1
• List 2
• List 3

li {
margin-left: 10; 
margin-bottom: 10; 
border-right: #c0c0c0 2px solid;
padding: 2px 15px 5px;
display:inline;
}

From Suckerfish dropdowns (A List Apart)

• List 1
  • 1.1
  • 1.2
  • 1.3
• List 2
  • 2.1
  • 2.2
  • 2.3

The (IE only) javascript part. A named id is grabbed, and all LI elements are assigned an onmouseover/onmouseout. This is the same as the IE :hovers described above (it only does direct children, and sets the onmouseover directly, not via attachEvent).

startList = function() {
 if (document.all&&document.getElementById) {
  navRoot = document.getElementById("nav");
  for (i=0; i < navRoot.childNodes.length; i++) {
   node = navRoot.childNodes[i];
   if (node.nodeName=="LI") {
    node.onmouseover=function() {mu.addClass(this,"over");}
    node.onmouseout=function() {mu.removeClass(this,"over");}
   }
  }
 }
}
window.onload=startList;

The css part. Uses a named id (#nav). The hover rule has two selectors- the w3c :hover version, and the IE classname (.over) version. The horizontal list items are floated, rather than inline, so needs a clear:both afterwards.

#nav li ul { /*normal state- nested ul are hidden*/
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0.5em 0 1em 0;
  /*overlap the top menu*/
  margin-top:-2px; 
        /*without this, onmouseout can fire in the margin*/
  margin-left:-12px;
}
 /*on hover (or class "over") show the nested ul */
#nav li:hover ul, #nav li.over ul {display: block;}
#nav li { /*these lists are floated, rather than inline*/
  float: left;
  position: relative;
  width: 10em;
  text-align: center;
  background-color: white;
  border: 1px solid #ddd;
  border-width: 1px 0;
}
#nav li>ul {
  top: auto;
  left: auto;
}
#nav li li { /*don't float nested listitems*/
  display: block;
  float: none;
  border: 1px solid #ddd;
}

Max-width, min-width for IE 6

Use IE-only stylesheet expressions

max-width: 800px;
width:expression(document.body.clientWidth > 800? "800px": "auto" );

To enable css validation:

<!--[if ie]>
<style type="text/css">
.box2 {
width: expression(document.body.clientWidth > 800? "800px": "auto");
}
</style>
<![endif]-->

Selectors