426 Chapter 23 – Cascading Style SheetsStyle Sheet Tips and Tricks
Web Design in a Nutshell, eMatter EditionStyle Sheet Tips and Tricks
Style Sheet MIME Types
Some authors have reported trouble with gettting their ISPs to correctly serve up
CSS files. Apparently, with some Web servers,.cssis mapped to the MIME-type
x-application/css, or “Continuous Slide Show,” instead of the MIME-type
text/css. The style sheet gets mangled into something else. If you find you’re
having this problem, you’ll need to contact your ISP and explain the problem.
Because.cssis now an IANA-registered MIME-type, service providers really have
no excuse for not supporting it for style sheets. If they refuse to fix it and style
sheets are a necessary part of your site, you may have to consider switching ISPs.Creating a Drop Cap
Although a pseudo-element called :firstletter exists, it is not very well
supported as of this writing. In the meantime, you can create a drop cap using a
<span> to isolate the first letter of the paragraph.
Thefloatproperty also has spotty support. Thewidthproperty was added to
the following example in order to get float to work with Internet Explorer (and it
still doesn’t function properly on a Mac). Without thefloatproperty, the capital
letter will stand taller than the rest of the line, which may still be an acceptable
effect. Figure 23-9 shows a drop cap created with the following style sheet code.
<STYLE TYPE="text/css">
<!--
.dropcap { font: bold 200% sans-serif;
color: teal;
width: 24pt;
float: left; }
-->
</STYLE><P><SPAN CLASS="dropcap">F</SPAN> or those frustrated...</P>Specifying Text Size in Pixels
One of the great frustrations in designing web pages is that fonts are rendered so
differently from platform to platform, especially with regards to point size. The
same point size will be rendered much larger on a PC than on a Mac, making it
difficult to anticipate how much type will fit on the page. (See “Why Specifying
Type is Problematic” in Chapter 3,Web Design Principles for Print Designers.)Figure 23-9: Drop cap created with float property