Showing posts with label overriding. Show all posts
Showing posts with label overriding. Show all posts

Monday, October 4, 2010

Overriding Base Styling with Classes

/* Default styling for paragraphs */
p {
color:#F00;
font-size:12px;
}
/* Use this style to turn anything light gray */
.bleached {
color:#CCC;
}
All paragraphs will still be red by default, but this can still be overridden when necessary
by identifying an element with the bleached class, as in this (X)HTML:
<p>This paragraph has red text.</p>
<p class="bleached">This paragraph has light gray text.</p>
The second paragraph will now be light gray, as the color declaration in bleached overrides
the red. Note that the paragraph is still rendered 12 pixels high, as bleached does not redefine
font-size. Add a font-size declaration in bleached, and that value will override the original
size for all paragraphs identified with class="bleached".

Friday, October 1, 2010

Alt text overriding title text

Problem: If you have an image with alt text nested inside a link that has a title element,
the title element will be overridden. This is largely due to Internet Explorer wrongly displaying
the content of the alt attribute as a tooltip.


Solution: The only way around this problem is to duplicate the title attribute and place a
copy of it within the img element. This is superfluous markup, but it fixes the issue in
Internet Explorer and does not adversely affect other web browsers.
<a href="sunset.html" title="Click to view a larger image"><img
å title="Sunset in Reykjav&iacute;k" src="sunset.jpg" alt="Sunset in
å Reykjav&iacute;k" width="400" height="300" /></a>