Muffin Research Labs » CSS

CSS2 text-decoration and child elements

Stuart Colville — Mon, 09 Mar 2009 00:40:00 +0000

Take the following code; will the text in the span be underlined?





	
	Span Underline Test
	


    This is underlined. Is this underlined?

Chances are you’ll be thinking (like I did) that the text within the span won’t be underlined but you’d be wrong. Really – try it for yourself.

Finding the behaviour odd I dug up the specs for text-decoration.

This property describes decorations that are added to the text of an element. If the property is specified for a block-level element, it affects all inline-level descendants of the element. If it is specified for (or affects) an inline-level element, it affects all boxes generated by the element. If the element has no content or no text content (e.g., the IMG element in HTML), user agents must ignore this property.

What it doesn’t say is whether inline elements can override the behaviour, though as the spec states this isn’t an inheritable value and it would seem this is why the rule for the span has no effect.

Perhaps unsurprisingly Firebug also mis-interprets the value of the span making the assumption that text-decoration can be overriden. (Update 03/04/09: Bug raised)

The good news is ie6/7, firefox, safari and opera are all consistent in their handling of this oddity.

Create your own Google Talk Theme using CSS

Stuart Colville — Mon, 17 Apr 2006 19:17:14 +0000

Not so long ago Google Talk received an update which included theme support, now I don’t know about you, but in my humble opinion the default themes weren’t all that great. The good new is that the themes are created with CSS so this means that you can copy an existing theme and modify it to get something that is more to your taste.

To get started you need to copy an existing theme, so choose one as a starting point. Before you can do that you will need to create a directory called “chat” in the following location (Where [PROFILE NAME] is your changed to the name of your user profile, this is the same as the user your login to windows as):

C:\Documents and Settings\[PROFILE NAME]\Local Settings\Application Data\Google\Google Talk\themes\user\

Next copy the theme you wish to base yours on to here:

C:\Documents and Settings\[PROFILE NAME]\Local Settings\Application Data\Google\Google Talk\themes\user\chat\

Rename the chat theme folder you have just copied across to the name of your choice. This name will show up in the themes menu. Edit the themes CSS file ([ThemeName]\Contents\Resources\main.css) and then test your theme.

To get you started here’s a theme I made earlier called MuffinResearch. To use it just uppack the theme to this directory:

C:\Documents and Settings\[PROFILE NAME]\Local Settings\Application Data\Google\Google Talk\themes\user\chat\

As you are editing the themes all you have to do is re-select your theme in the drop-down to check the styles you have modified.

CSS Drop Column Layout

Stuart Colville — Tue, 07 Feb 2006 00:05:00 +0000

Simon Collison posted an article about his new fixed width 3-column layout which is made possible with a dash of javascript to alter the layout based on the resolution of the client’s window. For more on Simon’s layout see this post. Tim referred to my site in the comments on Collylogic saying that my site covered the same functionality without requiring javascript. So this post is a more detailed explanation on how my layout works.

When I created this site I wanted to have 4 columns which are all fixed width. The idea was that if you resized the window then the columns would drop down when there wasn’t enough room. To explain in greater detail here is a visual:

To achieve the desired effect I am using floats. A natural property of a floated element is to drop down when there isn’t enough room until there is enough space. This means that the column on the furthest right will drop when the window is re-sized. One of the issues with this would be if the primary content column was not high enough the displaced column would wrap underneath it. To combat this undesired effect I have used a wrapper with a left margin to ‘hold’ the 3 smaller columns to the right of the primary content.

Limitations

There are a couple of limitations with this technique. The 4th (quaternary) column will drop underneath the 2nd (secondary) column if the 2nd (secondary) column is the same height or less tall than the 3rd (Tertiary) column.

A min-width was set on the body so that a horizontal scroll-bar will appear if the window is resized below 770px. This doesn’t work in IE and neither does the proprietary expression.

The demos

The following demos are grossly over simplified but give you an idea of how this layout works.

Update: Richard Rutter has written up a concise round up of related layouts in response to Colly’s original post.

A Belorussian translation of this post has been kindly provided by Amanda Lynn

Partial Image Replacement

Stuart Colville — Sun, 29 Jan 2006 01:41:11 +0000

Recently Tim was looking for opinions on the most semantic way to mark up the title and strapline of an author’s website that he is working on. The text looked something like this; Stuart Colville, Author of "I’m a big fat monkey" (Note: this is a fictitious title).

Now the question was, how should the strapline (Author of “I’m a big fat monkey”) be marked up in a meaningful way? After a while of talking it through I suggested that the best way would be to including the strapline in with the heading as they have a relationship to one another. To move the strapline out of the h element would destroy the relationship. So the mark-up ended up looking like this:

Stuart Colville, Author of "I'm a big fat monkey"

The Experiment

Now I was then interested to know if you could use image replacement to replace the h1 whilst leaving the span on screen as text. I tried a little experiment and came up with the following CSS:


  #content h1
  {
    text-indent: -3000px;
    overflow: hidden;
    background: url(scolville.gif) no-repeat;
    height: 100px;
    position: relative; /* optional: remove this if you need to position the span relative to the page rather than relative to the h1 */
  }

  #content h1 span
  {
    text-indent: 0;
    position: absolute;
    top: 75px;
    left: 50px;
    font-style: italic;
    font-size: 80%;
  }

Using the original Phark method I replaced the text within the h1 with a ‘tasty’ logo and then to counter the text-indent I used absolute positioning on the span thus moving back into view. Now this looked to be the answer first of all but this didn’t work at all in IE. After a little futher experimentation I ended up zeroing the text-indent first and used absolute positioning to move the span into position.

Example

The results can be viewed here in this example and works in IE6, Opera, Firefox and Safari.

Update: Tim made a useful suggestion to add "position:relative" to the h1 so that the span is relative to that rather than to the page. I have updated the code to reflect this change.

Table showcase site

Stuart Colville — Thu, 01 Sep 2005 21:11:55 +0000

Chris Heilmann has come up with the great idea of a CSS table showcase to show off different table designs.

Being the enthusiastic chap I am, I’ve contributed my own table design entitled ‘Grey suits you sir!’ I’m pretty sure this site will be a useful resource as it grows into the future.

Classes on the body tag

Stuart Colville — Thu, 16 Jun 2005 00:26:41 +0000

In Doug Bowman’s second @media presentation he mentioned utilising classes on the body element to be able to affect the layout of the entire page. This simple technique uses descendant selectors in such a way that an entire page layout can be altered by adding or changing a class applied to the body tag.

For example visualise the following (simplified) stylesheet


  #maincontent {
    float : left
  }

  #secondarycontent  {
    float  : right
  }

  .home #maincontent {
    float  : right
  }

  .home #secondarycontent  {
    float  : left
  }

Assuming maincontent and secondarycontent are two divs, by adding the class ‘home’ to the body tag (), the two columns could be reversed. When you think about it, this method can be used to radically change the entire site layout with only one change to the markup and without requiring extra stylesheets. It’s this exact method used to alter the look of each of the sections on Doug’s site http://www.stopdesign.com

A beginner’s guide to CSS hack avoidance

Stuart Colville — Tue, 10 May 2005 19:04:39 +0000

Whilst working on some CSS designs recently I realised that by zeroing the padding and margin of various elements in I was avoiding my pages having major differences when viewed in different browsers. Often these differences in rendering are caused by the default styles applied to pages by the browser. It’s these styles that come into play whenever you view a page without a stylesheet.

Once you learn how to use CSS hacks if you are at all inclined to be lazy you might find yourself utilising CSS hacks even when there’s no real need. So before you use that hack you must ask yourself the question is there an easier way?

To illustrate the point I knocked up a quick page to test out the theory that all browsers are different before you even start to apply CSS rules. In addition here is an screenshot to show the difference side-by-side for IE 6.0, Firefox, and Opera 8.0.

As you can clearly see there’s a need to reset the styles so that when you apply your stylesheet all browsers are starting from the same place. One way to do this would be to use global rules on all of the tags that you are going to use. Like so:


  p, h1, h2, h3, h4, h5, h6, ul, ol, fieldset, form {
      margin  : 0;
      padding : 0;
  }

In doing this you will have to then specify the paddings and margins on each element that you are styling manually. Which is no big deal, however, you could specify a global rule including your own defaults and work forward from that:


  p, h1, h2, h3, h4, h5, h6, ul, ol, fieldset, form {
      margin  : 1em 0 0 0;
      padding : 0;
  }

Alternatively for browsers that understand it you could create a global rule for all elements like so:


*  {
      margin  : 0;
      padding : 0;
  }

Thus saving you from having to add each element separately. See the links below for more on this method.

Now before anyone comments that I haven’t followed this advice completely myself, well that’s true but I’ve only implemented this where I thought it most important, how far you go with this is entirely up to you!

Now before I posted this article I did a quick google to see if anyone’s been here before I have, and there are a couple of articles that touch on the same area, so kudos goes to them for their endeavours.