Roundup of best ways to do common things in CSS

CSS Rollover images
Changing a background image on hover causes the browser to load it when its rolled over, which results in a long pause and a blank space where your buttons meant to be.
The simplest way to avoid this is this Pixy method - putting your button state images in the one image and moving that back and forth on hover states. Dont know what they mean by a flicker in IE, its seems fine in IE7.
http://wellstyled.com/css-nopreload-rollovers.html
A more complex method is here
http://www.alistapart.com/articles/sprites/

Li class active in CSS menu - but menu and head is a php include - solution

You including the main navigation menu on all pages using and .inc file and you also want to have the menu highlight to show which page its on. You could
• do this by giving the body an ID and CSS styles for each body ID=active or something. BUT my body tag is in an include called head.inc - so it cant be unique on every page.

you could give the ul containing the menu a unique id on every page and then your has the code below- note - I think it can't be and .inc file anymore, it must be changed to be called .php because its actually executing php inside the menu include now, not just including plain HTML. ALSO - watch out for the " " marks, i don't think they're meant to be the fancy curly ones but the plain ones - retype the code to be safe rather than copypasting.


VARIATION - You can also change the menu code slightly to make the active page not linkable at all - this will further make the current page stand out from the other menu options. Here is an example of the code you would use for the links:

ahh cant work out how to paste code without it becoming html - go to the linked page for now

Recent finds and fixes typography and jquery fades

OS X and type rendering of knockout text (white text on a black background)

Normal body text in this situation on a mac looks bold, because of the anti-aliasing engine going overboard on knockout text. 

/*text-shadow: 0 0 0 #000;*//*makes light coloured text look thinner in safari see http://24ways.org/2006/knockout-type */

Except theres nothing like that for Firefox. So Im using a lighter font family which is installed by default in macs. 

font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;

and hoping it dosnt look too think with people who have PCs and that font. 

JQuery fades side effect on Firefox 2 on a mac for type anti-aliasing. Or why on my Jquery gallery pages does the text suddenly look rubbish until I mouse over it?

/*-moz-opacity: 0.9999; *//*For Ffox 2.0 mac - Jquery fades on a page turn off its text anti-aliasing on that page. This style turns it off permanently so the problem isn't obvious. Double bonus of making knockout text not as heavy on os x. BUT - its makes a peekaboo bug on mac FF2&3 happen to Quicktime / Flash content so it cant be used.  */

This seemed like a good fix until I checked a page with embeded quicktime and it was making the video display a peek-a-boo type bug when your mouse went near it. Ive read this also happens with Flash content (or your SIFR!). 

IE7 cleartype (anti-aliasing) being turned off by Jquery

Theres also a similiar and just a shit problem that happens on IE7 to cleartype, in that the cleartype (IEs versions of anti-aliasing for web text) gets switched off when its part of your fading gallery (on mine text on the page is ok, just text thats being faded up with the gallery images looks rubbish). Aparently a fix is:

Assign a background colour to the bit thats being faded / the containing element of the text (but this isnt a solution for me because that area needs to be transparent (have no background assigned). 

this could also be a fix

http://groups.google.com/group/jquery-en/browse_thread/thread/221169cf3a03d32e/51326b4726541831?lnk=gst&q=text+anti-aliasing#51326b4726541831
> But for IE7 you need to remove the opacity filter after the  
> animation completes:
> $('#myDiv').fadeIn(function() {
> if ($.browser.msie)
> this.style.removeAttribute('filter');
> });

IE 6 div with class applied weirdness / bug - only applies first class styles in css source order

quick noteabout IE6 and having a div that has a class applied to it as in the html below. 

HTML is

CSS is

#adivoneverypage {its styles}

#adivoneverypage.aclassforacertainpage{

special styles for just one unique page- as a class -but inheriting 'base' styles from above that are common to allpages with this div. (Mainly just to reduce repetition in the CSS file)

}

#adivoneverypage.aclassforacertainpage2{

styles for a different unique page to above- as a class -but inheriting 'base' styles from #adivoneverypagethat are common to allpages with this div. 

}

#adivoneverypage.aclassforacertainpage3{

special styles for a different unique again page to above- as a class -but inheriting 'base' styles from #adivoneverypagethat are common to allpages with this div. 

}

so the problem being - that in IE6 -it only applies the special class styles which come first in the source order of the CSS, and none after that!!! its as if these special styles just arent there, IE6 STOPS reading the styling after the first one is applied. You can test by copy pasting the last special class style and putting that first (after the #adivoneverypage styles) in the CSS source order. Then its styles will be seen by IE6 - but not the ones below it. 

My fix to try is NOT USING class selectors on DIVS to make specific changes, but having just a unique div on every page and repeat the same a few times in the css instead of once and having all the classes inherit it. 

so the HTML is instead:

CSS is 

#adivforacertainpage {its styles}

and for each page have unique div IDs. Which is a shame because sometimes these divs on each page are practically identical except for maybe a bit of different padding is necessary for a certain page, or something like that, but otherwise they are the same size, have the same margins, positioning etc etc, so its a shame to have to repeat the CSS over and over again. 

Vertical Centering a fixed width and height website using CSS

Testing out CSS vertical centering methods for a fixed width / height website - have been using horizontal centering via auto margins for ages but vertical centering is necessary for some upcoming work.

A good explanation of historical methods and tutorial:
http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/
FIXED HEIGHT CENTERING
Live example - a simple method using a negative margin floated div like a spacer to do it. it also centers the background image which is great.
http://www.pmob.co.uk/search-this/center2.htm

CENTERING WHEN NO FIXED HEIGHT
Another method thats a bit more complex that works for if the div you want to center has no fixed height. Its uses display:table and some IE fixes.
http://www.pmob.co.uk/pob/vertical-center4.htm

Remember background can be centered vertically too, like this:
background:#000 url(images/vertbkrnd.jpg) repeat-x center center fixed;
and apparently need also body height 100% like:
html,body{
height:100%;
margin:0;
padding:0;
}

and a note - it dosnt have to be exactly centered, it could be say 30% from the top to be more compositionally nice.

Inspiration sites

Lists many sites with new good design etc
http://www.cssartillery.com/