One situation might be in displaying a place name. Say for instance that place name had to be rendered in block that has a width of 200px, with a height that can flex as necessary to accomodate the content. This won’t be a problem in 99.9% of situations, but what happens if the place name is Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch?! Yes this place does exist! In cases like this you might want to apply a special class name, or maybe dynamically adjust the font-size so that it fits within the allowed container. The consequences of not defending against this situation might be that the layout behaves unpredicatably, breaks, or perhaps some of the word could be hidden by the overflow property in the CSS being set to hidden or something.

So, should you find yourself in a situation where you need to measure the height and width of a text element, this code might help you:

HTML

<p id="place-name"> Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</p>

CSS

#place-name{
    position: absolute;
    height: auto;
    width: auto;
}

JavaScript

var oPlaceName = document.getElementById("place-name");
if (oPlaceName){
	var iHeight = oPlaceName.clientHeight + 1;
	var iWidth = oPlaceName.clientWidth + 1;
	if (iWidth > 200){
		//Deal with the long text.
	}
}

I have prepared a quick standalone example should you want to see this in action.

A place name might have been a bad example, but it could have quite easily have been any other type of field who’s length or height you might want explicit control over. Other applications of this that I can think of quickly could be adjusting the font-size of headings so that they never wrap, perhaps adjusting letter spacings so that they have aligned edges, or whatever else the designers .psd file shocks you with! With a clever implementation, this sort of thing could be achieved without the user even noticing, but that’s a job for someone else!

• possess rules that clash, or are made redundant by rules that you already have in place
• control aspects of the module administration that a user would never see
• cater for features that the module provides that you don’t need, or haven’t activated
• offer browser and device support that is not part of the site requirements
• you have themed a modules mark-up, thus rendering its own stylesheet obsolete

Generally there is no easy way, or no way at all to disable these stylesheets from the admin or module settings.

If you took a typical Drupal setup with a Zen starter theme and add about 10 of the popular modules, it wouldn’t be unthinkable for the number of stylesheets to breach the 20 mark! 20 stylesheets!

Even before you start adding your own stylesheets...

I know that the stylesheets can be cached and served as one file, but when you’re debugging the CSS and adding new sections to a site of any real size, you will inevitably end up playing specificity wars and having to reset rule properties more often than you’d like. This all leads to bloated CSS that is a pain to debug and maintain.

To overcome this in the past and regain some sort of control over what CSS ends up on the site, I have adopted a code butchers approach and taken to ripping out the line seen below in the page.tpl.php file, and then just manually adding the stylesheets in the html.

print $styles; //bye, bye

That’s a problem solved, but another problem created in that sometimes you do actually want a modules stylesheet to be used. Determining the CSS file location(s) that a module uses can be difficult, especially when there are configuration options within a module that force different sets of stylesheets to be used such as in the popular fivestar module.

I’m sure there are probably better, cleaner ways to achieve this, but what I do now is cull the Zen starter theme.info of all superfluous stylesheets and then add the phptemplate_preprocess_page function within the template.php file with code that removes the remaining unwanted stylesheets, like so:

function phptemplate_preprocess_page(&$vars){
	//Get the loaded stylesheets as an array
	$stylesheets = drupal_add_css();
 
	//Remove the default style sheets
	unset($stylesheets['all']['module'] ['modules/aggregator/aggregator.css']);
	unset($stylesheets['all']['module'] ['modules/node/node.css']);
	unset($stylesheets['all']['module'] ['modules/system/defaults.css']);
	unset($stylesheets['all']['module'] ['modules/system/system.css']);
	unset($stylesheets['all']['module'] ['modules/system/system-menus.css']);
	unset($stylesheets['all']['module'] ['modules/taxonomy/taxonomy.css']);
	unset($stylesheets['all']['module'] ['modules/user/user.css']);
 
	//Remove some of the popular module stylesheets - add / remove your own here
	unset($stylesheets['all']['module'] ['sites/all/modules/cck/modules/fieldgroup/fieldgroup.css']);
	unset($stylesheets['all']['module'] ['sites/all/modules/cck/theme/content-module.css']);
	unset($stylesheets['all']['module'] ['sites/all/modules/date/date.css']);
	unset($stylesheets['all']['module'] ['sites/all/modules/filefield/filefield.css']);
	unset($stylesheets['all']['module'] ['sites/all/modules/link/link.css']);
 
	//Set the styles
	$vars['styles'] = drupal_get_css($stylesheets);
}

This function will do the trick for all of the Drupal system stylesheets and a few of the popular modules. There is a big drawback to all this stylesheet optimisation of course, which is you’ll notice that your admin area falls apart and becomes completely unusable due to the fact that the supporting stylesheets aren’t present. To overcome this is simple in most cases – you just need to set your administration theme (Administer -> Site Configuration -> Administration theme) to use a different theme and all module stylesheets will be pulled in – I usually go for the comforting shades of Garland.

Dots appearing around an image after you click it

All you need to do to fix it is set the outline property of the anchor element to zero, like so:

a{outline:0};

Happy days.

When you have a lot of text within the value attribute of a button, it renders something like this:

<input type="button" value="A lot of descriptive text on a button" />

If you then reduce the width of the button with a bit of css, you get cropped button text like so:

<input type="button" value="A lot of descriptive text on a button" style="width:100px;" />

To wrap the text on the button isn’t immediately obvious, you might try altering the display property, but it probably won’t occur to you to try the following css rule:

white-space:normal;

Which will produce something like:

<input type="button" value="A lot of descriptive text on a button" style="width:100px; white-space:normal;" />

Now ain’t that great! It doesn’t work in IE6 by the way, so you might need a plan B…

If you can make do without wrapping the text on the button, you should check out this method to make prettier buttons.