Friday, October 7, 2011

Fixed a CSS bug - text-decoration does not cascade.

A new visitor of my site emailed me with some comments, which I appreciate.
I always try to improve my site, but it became too large (over 350 pages) to review every page manually.. and sometimes changes on one page have an effect on other pages.

The remark was that links were difficult to see in articles as they looked the same as the regular text.

That wasn't correct - I know that in my CSS I define links to be dark blue and underlined.
Checked it with different browsers, different versions, and yes the remark was correct; It seems there's a bug in Firefox and also in some IE versions, depending on compatibility mode.

For the layout of my website I use CSS (cascading style sheets). This is a file that is referenced from every page on my site, that describes how html elements that make up the website look like.
If I want to change the red, white and yellow/orange background on my site into other colors, this is one change I have to do in this file and it's immediately changed for all pages.
Style sheets are cascading - you can put html elements inside others and they will inherit all settings from their parent element unless it's overruled at a lower level.

Now it seems there's a bug with this inheritance/cascading for the text-decoration property of links.
I set text-decoration:none;  on links at high level in the page layout.
This is to prevent the language links, footer links and others to not show up in blue and underlined, like links look like by default. Also on the homepage all large titles are links, but they don't look that way - as I want them to look like large titles.

On a lower level in the html layout, there's a box that contains the actual text of the article (the yellow looking background, which is inside the large white box). There I overrule with text-decoration:underline on links. And that did not work.
Seems there's a bug and once you set text-decoration on a div, nested divs will keep this layout, even if you overrule it.

I fixed it by not setting the text-decoration:none at the highest level anymore. Luckily when I made the layout for this site I put enough containers around each part (language select, footer, topper, main content, menu linsk, ..) so I can set the properties for each div and span tag individually. With a few changes in the css (and none in the html pages of each article) it should look fine now.
Header/footer and main page do not show links as underlined, but within text of articles they should be dark blue and underlined.
The css file is cached on your browser, so if you have visited my site a few days ago you have to refresh once on a page with Ctrl-F5 to see the change.

No comments:

Post a Comment