Common Coding Problems with HTML and CSS - Part One

By: John Gallant , Holly Bergevin ,

Page 1 of 2

Set for printing

Next

The progression of a coder learning to use CSS typically follows a predictable path. It generally starts with some study of basic CSS principals, followed by experimentation with simple pages, and then perhaps an attempt to convert an existing page to use only CSS for layout and presentation. It usually isn't too long before "difficulties" begin to crop up. Perhaps some positioning doesn't work correctly in one browser, or the styles are mysteriously absent, or floated images are nowhere to be found. In any case, frustration is often the result, and frantic searching often fails to turn up the solution to the dilemma.

Because certain problems seem to turn up again and again on CSS forums, we have collected the most common of these into a handy list in the hope of somewhat reducing the "frustration factor" of working with CSS. This is not a complete listing by any means, nor are the issues exhaustively examined. The goal here is to make people aware of the problems so many others have encountered, and guide them toward the solutions that work.

So without further ado, we present part one of the "Gotchas" list.

FOUC: Flash of Unstyled Content

Internet Explorer for Windows will sometimes display a page momentarily without the styles applied. Then suddenly, the styles pop into view. This is caused when the styles are linked to the page using the  @import  method. When this is done, it appears that IE/Win does not wait until the styles arrive from their @imported location, but displays the HTML immediately without the styles. Once the styles finally do load, they are applied to the page.

The way to prevent this is by having at least one <link> element in the head element of the page. When IE sees a <link> element, it waits until all remote files arrive before rendering the page. It's not necessary for the <link> to have a target file. Just the presence of the <link> element is enough. A  <script>  element in the document head will also eliminate the problem.

This problem does not occur when the styles are embedded in the source.

Opera 7+ always shows the Flash Of Unstyled Content for every page that has remote styles. Nothing can be done about this, but no doubt the Opera team will eventually get tired of hearing complaints and do something to fix it. Until then we just have to live with the problem in Opera.

Media Type Glitches

Using the various available media types allows a style sheet to be used to display a web page based on the device that is displaying it, such as a computer screen, printer, handheld device, etc. Two methods are available; the first is to specify the target medium from within a style sheet by use of  @import  or  @media  rules.

<style type="text/css">
@import url(screen.css) screen;
/* "screen" defines the medium that gets these styles */
 
@media print {
/* style sheet for print goes here */
}
</style>

The other way is to use the media attribute within the  <link>  element.

<link rel="stylesheet" type="text/css"
media="print, handheld" href="foo.css">

For details see: Introduction to media types (http://www.w3.org/TR/REC-CSS2/media.html) in the W3C specifications.

This feature has only recently gained proper support, but bugs still remain in Internet Explorer. The main bug is that IE6 and below fail to recognize a media value when it is used within an @import rule. However, IE6 does work fine with the @media rule, and a media attribute in a  <style>  element embedded within the document head section also causes no problems for IE6.

MIME Types

MIME stands for Multi-purpose Internet Mail Extensions. MIME types are a standard way of classifying file types for programs such as Web servers and browsers, and all have a list of MIME types so that they can transfer files of the same type in the same way, regardless of the operating system.

When a server serves a page linked to a remote CSS file, the style sheet having an extension of  .css  is served with a defined MIME type, normally "text/css". However servers are sometimes wrongly set to serve the  .css  files as "text/plain" or perhaps "text/html". When the CSS file for a standards-compliant page (one using a complete doctype) is served with an improper MIME type, Gecko-based browsers will ignore the remote style sheet and present the page without those styles, instead of the beautiful creation that is expected.

One way to solve this problem is to contact the server administrator and get the MIME type for  .css  set to the correct "text/css". For Apache servers, another possible solution is to include an  .htaccess  file in the root directory of your site, containing this line:

AddType text/css .css

That will allow the  .css  to be served as "text/css". If your server administrator has disabled the use of the .htaccess file, you will need to contact him, or her, to make the correct MIME type change.

Page 1 of 2 1 2 Next


download
Download Support Files


Downloads are disabled during your trial period.


Keywords
CSS, FOUC, media types, MIME types, white space, XML prolog, html validation, CSS validation, the cascade, @import, text size bug, pseudo-class, pseudo-classes, styling links, anchors, browser bugs, CSS bugs