[PLUG] External CSS vs in a <style> tag in the <head> section

Tue Dec 30 21:37:02 UTC 2008

I have some style code that works when it is in the <head> section of a 
web page, but not when it is in an external file. Shouldn't it work the 
same? The style code for the body, #sidebar, and #main sections appear 
to work correctly. Any idea why the parts between the body section and 
the #sidebar section are ignored when they are imported from an external 
file, but work correctly when they are inside <style></style> tags in 
the .html file?

Here's the current <head> section:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Winter Storm, December, 2008</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>

I copied the entire <style> section and put it in a file named 
style.css. I removed the <style></style> tags, before saving it.

Here's the contents of style.css:

/* Style Sheet for Comcast Site */

body {
  background: #EED;
  margin: 0;
  }

div.pic {
  float: left;
  height: 190px;
  width: 130px;
  padding: 0 5px;
  margin: 5px 3px;
  }
div.pic img {
  border: 1px solid;
  border-color: #444 #AAA #AAA #444;
  }
div.ls img {
  height: 96px;
  width: 128px;
  margin: 32px 0 0;
  }
div.pt img {
  height: 128px;
  width: 96px;
  margin: 0 16px;
  }
div.pic ul {
  margin: 0.25em 0 0;
  padding: 0;
  font: bold small Arial, Verdana, sans-serif;
  list-style: none;
  }
li.title {
  display: block;
  text-align: center;
  }

#sidebar {
  position: absolute;
    top: 32px;
  width: 130px;
  padding: 0;
  }

#main {
  position: fixed;
    top: 0;
    left: 5px;
  margin: 0 0 0 140px;
  }

-- 
Regards,

Dick Steffens
www.dicksteffens.com