Overriding CSS can be a pain


One of the difficulties with Drupal is that with so many modules needed to make a good site you can end up with a dozen or more different CSS files. On occasions when you need to tweak the CSS to match a specific design, or fix something for IE6, it can take quite a while to dig down to the exact definition you need. You might try throwing random snippets of CSS at the problem to try to make it go away, but they usually won't work.

What I've found is that to successfully override CSS you have to repeat the exact same definition as the original, no matter how obtuse it my seem. So if you want to override one simple paragraph you may have to assign some pretty strange CSS, eg.:

* html .span-6 {margin-right: 5px;}

If that's what is already being used, then that's what you have to do to override it.

It may be a bit frustrating, but following that simple guideline has saved my bacon several times.

Insanely easy tabbed web pages with Prototype


I came across this today when trying to find an easier way to present a six-part form in a Rails project - a tabbed interface system built upon Prototype (an integral part of Rails). Called Control.Tabs it makes tabbed interfaces a synch to do: simply add an unordered list containing links to the blocks containing your to-be-tabbed content, and add a line of JavaScript to start the ball rolling - that's it! Some of the examples given on the site take it even further, including building an image gallery, and I've used it to build a series of form pages into one page complete with back/forwards buttons, all without refreshing the page. Good stuff, and well worth the time for any Rails developer to try using.

IE6 and the min-height CSS attribute


There's a really useful attribute in CSS called min-height that lets you set the minimum height an element should be displayed as; this is often used to make two boxes appear the same height even if one has less content than the other. Well, Firefox, Opera and Safari support it but Internet Explorer 6 and older don't. Luckily there's a really simple work-around for it, you simply add a defintion to your CSS that browsers other than IE will ignore and set the height to the same as the min-height, e.g.:
/* for standards-compliant browsers */
.bigbox {
width: 300px;
padding: 2px;
border: 1px solid #000;
min-height: 200px;
height: auto;
/* for Internet Explorer */
* .bigbox {
height: 200px;
Thanks Stu.

List bullet colors, a CSS annoyance


Something I've been asked to do several times over my career is to have a list in HTML with the bullet show up as a different color to the text. Unfortunatley the HTML & CSS standards don't allow this without some shoe-horning. You basically have two options:

  • Use an image
  • Set the color on the list that you want the bullets to be, then add another element within the LI (list item) that contains all the content and set its color to what the text should be.

The problem with the first option is that you have a separate file to download, the problem with the second is that you have to add erroneous tags for something that IMHO should be part of the standard.


Subscribe to CSS