CSS archive
Articles, examples and tutorials relating to web development using Cascading Style Sheets.
First-letter bugginess
Recently I made some changes to the typography of subheadings on this site: I made them all uppercase and for the h2s I used the first-letter pseudo class to give the first letter a larger font-size (150%).
Rescinding the reset
For a while now I’ve been using some sort of ‘reset’ for my stylesheets. At first it was the global reset which involves zeroing out padding and margins on all elements by with the universal selector, e.g., * { margin: 0; padding: 0 }. Later I read about the problems this can cause for form elements and so have been using Eric Meyer’s Reset CSS.
Legends of Style Revised
When I wrote the original article on how to achieve cross-browser consistency when styling form legends, I noted that there was a bug in the way Firefox handled legends which required an additional div to be wrapped around the fieldset with positioning and other styling applied to the div rather than the fieldset. The bug appears to still have not been resolved, but as Thierry Koblenz pointed out in the comments on the original article, there is a way to achieve the same effect across browsers that doesn’t require the additional div.
HTML/CSS newbie FAQs
After spending a while on web development forums, you start to see the same questions being asked regularly. So here I’m going to answer some of these common beginner questions and hopefully save me typing answers out repeatedly in the future because I can just refer the poster to here or copy it myself. 
Wasting the inheritance
No I’m not going to talk about Paris Hilton (although she may not have so much to waste anymore now her grandfather has decided to give $US2.3 billion to charity ;)), what I want to talk about today is something that I’ve seen cropping up quite a lot on my travels through sites and code (usually via requests for help on forums) and that is a lack of understanding about CSS inheritance.
HTML image no preload rollovers
Recognise this?
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('example','','/images/example_company_on.png',1)">
<img src="/images/example_company_off.png" alt="Example company" name="example" width="326" height="167"></a>
Chances are you do. Even if you don’t own a copy of Dreamweaver, it’s likely you would have come across the code it outputs for creating image rollovers in your travels looking at the code of other sites.
New article on Search-This
I’ve just written an article on a technique which can be used with column layouts which has been published on Search-This: Two Column Layout With A Twist.
I’ve been a subscriber to the site for a while (a lot of its contributors and readers also frequent Sitepoint) and a regular commenter, but this is my first published article. Search-This also publishes a range of articles dealing with the spectrum of web development topics, so it’s worth checking out.
Centering a dropdown menu
Recently, I needed to create a centered version of the Suckerfish dropdown menu and realised that some significant modifications were going to be needed. This is because the method for getting the top level list items to sit in a row, on the same horizontal plane, is to use float: left. However, when you float elements, you can’t centre them unless you give them a width and use auto left and right margins.
Legends of style
UPDATE: following on from comments by Thierry Koblenz, I have written an update to this article. The techniques described below will still work in different browsers, but the new article explains how it can be achieved with a little less mark-up.
It’s a well-established fact that achieving cross browser consistency when styling form controls is an “exercise in futility”
. And one of those elements that just won’t play ball is the <legend> tag.
Dropdown low down
Dropdowns (horizontal) or flyout (vertical) menus abound on websites and come in many different flavours. They are also put together in a number of different ways, some done with javascript, some with ‘pure’ CSS and some a mixture of both.
