I have been having a problem styling a page, which you can see live at my
test site:
Designer Page (http://home.ne.rr.com/thespar/)
(Ignore the missing pictures, which have not been uploaded.)
The page renders correctly in TopStyle and Dreamweaver 4, and also online in
my test website, i.e., the 5 successive navigation divs are correctly
rendered one after another.
The problem occurs when I preview the page in Dreamweaver MX 2004 or Front
Page 2000. In that case, the declarations "top: X%;" which appear in the 4
navigation divs (#s2-5), are ignored, resulting in placing all 5 navigation
divs on top of each other, all with "top: 0;"
Thanks in advance for your expert advice.
The relevant stylesheet is "side.css", which follows:
#left{ position: relative; }
#navigation{position: absolute; top: 0; left: 0; width:7.7em;
background-color: #930;}
#navigation2{position: absolute; top:20%; left: 0; width:7.7em;
background-color: #930;}
#navigation3{position: absolute; top:40%; left: 0; width:7.7em;
background-color: #930;}
#navigation4{position: absolute; top:60%; left: 0; width:7.7em;
background-color: #930;}
#navigation5{position: absolute; top:80%; left: 0; width:7.7em;
background-color: #930;}
#content{ margin-left: 7.7em; }
#sidelist
{padding: .3em 0em .1em 0em;
margin-left: 0;
background: #930;
width:7.7em;}
#sidelist li
{list-style: none;
margin: 0;
border-top: 1px solid #930;
text-align: left;}
#sidelist li a
{ display: block;
text-decoration: none;
background: #930;
padding: .35em 0.5em .35em 0em;
border-left: 1em solid #930;
font:bold 0.61em Verdana, Arial, Helvetica, sans-serif;}
#sidelist li a:link { color: #FFF; }
#sidelist li a:visited { color: #FFF;}
#sidelist li a:hover
{border-color: #FE3;
color: #FFF;
background: #332;}
The HTML markup follows. The only relevant part is the first one third, up
to the "content" div.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Vintage Clothing: Designer & Couture clothing</title>
<meta name="keywords" content="vintage clothing,designer vintage
clothing,couture,historic costume,designer fashion,antique apparel,Victorian
jewelry,estate jewelry,Kashmir shawls,Chinese shawls,piano shawls,estate
linens,lace,antiques,collectibles,textiles">
<meta name="description" content="Specializing in Fine Vintage
Clothing, Decorative Textiles, and Antique Jewelry for the
discriminating collector.">
<meta name="revisit-after" content="15 days">
<link rel="stylesheet" type="text/css" href="style_sheets/side.css">
<link rel="stylesheet" type="text/css" href="style_sheets/categories.css">
<base target="_self">
</head>
<body>
<div id="left">
<div id="navigation">
<ul id="sidelist">
<li><a href="Earlyall.htm" title="early clothing" target="_top">EARLY
</a></li>
<li><a href="victall.htm" title="Victorian clothing" target="_top">VICTORIAN
</a></li>
<li><a href="EdwardianVintageClothing.htm" title="Edwardian clothing"
target="_top">EDWARDIAN </a></li>
<li><a href="20sall.htm" title="1920's clothing" target="_top">1920's
</a></li>
<li><a href="30sall.htm" title="1930's-1950's clothing"
target="_top">1930's-1950's </a></li>
<li><a href="Designer_Vintage_Clothing.htm" title="designer clothing"
target="_top">DESIGNER </a></li>
<li><a href="Jewelry.htm" title="jewelry" target="_top">JEWELRY </a></li>
<li><a href="AntiqueTextiles.htm" title="textiles" target="_top">TEXTILES
</a></li>
<li><a href="shawlall.htm" title="shawls" target="_top">SHAWLS </a></li>
<li><a href="treasure hunt.htm" title="treasure hunt" target="_top">TREASURE
HUNT </a></li>
<li><a href="articlesall.htm" title="Articles" target="_top">ARTICLES
</a></li>
<li><a href="gallery.htm" title="Vintage Textile gallery" target="_top">THE
GALLERY </a></li>
<li><a href="mailto:Li***@vintagetextile.com" title="email contact">EMAIL
</a></li>
<li><a href="orderall.htm" title="orders" target="_top">TO ORDER </a></li>
<li><a href="index.html" title="home page" target="_top">HOME </a></li>
</ul>
</div>
<div id="navigation2">
<ul id="sidelist">
<li><a href="Earlyall.htm" title="early clothing" target="_top">EARLY
</a></li>
<li><a href="victall.htm" title="Victorian clothing" target="_top">VICTORIAN
</a></li>
<li><a href="EdwardianVintageClothing.htm" title="Edwardian clothing"
target="_top">EDWARDIAN </a></li>
<li><a href="20sall.htm" title="1920's clothing" target="_top">1920's
</a></li>
<li><a href="30sall.htm" title="1930's-1950's clothing"
target="_top">1930's-1950's </a></li>
<li><a href="Designer_Vintage_Clothing.htm" title="designer clothing"
target="_top">DESIGNER </a></li>
<li><a href="Jewelry.htm" title="jewelry" target="_top">JEWELRY </a></li>
<li><a href="AntiqueTextiles.htm" title="textiles" target="_top">TEXTILES
</a></li>
<li><a href="shawlall.htm" title="shawls" target="_top">SHAWLS </a></li>
<li><a href="treasure hunt.htm" title="treasure hunt" target="_top">TREASURE
HUNT </a></li>
<li><a href="articlesall.htm" title="Articles" target="_top">ARTICLES
</a></li>
<li><a href="gallery.htm" title="Vintage Textile gallery" target="_top">THE
GALLERY </a></li>
<li><a href="mailto:Li***@vintagetextile.com" title="email contact">EMAIL
</a></li>
<li><a href="orderall.htm" title="orders" target="_top">TO ORDER </a></li>
<li><a href="index.html" title="home page" target="_top">HOME </a></li>
</ul>
</div>
<div id="navigation3">
<ul id="sidelist">
<li><a href="Earlyall.htm" title="early clothing" target="_top">EARLY
</a></li>
<li><a href="victall.htm" title="Victorian clothing" target="_top">VICTORIAN
</a></li>
<li><a href="EdwardianVintageClothing.htm" title="Edwardian clothing"
target="_top">EDWARDIAN </a></li>
<li><a href="20sall.htm" title="1920's clothing" target="_top">1920's
</a></li>
<li><a href="30sall.htm" title="1930's-1950's clothing"
target="_top">1930's-1950's </a></li>
<li><a href="Designer_Vintage_Clothing.htm" title="designer clothing"
target="_top">DESIGNER </a></li>
<li><a href="Jewelry.htm" title="jewelry" target="_top">JEWELRY </a></li>
<li><a href="AntiqueTextiles.htm" title="textiles" target="_top">TEXTILES
</a></li>
<li><a href="shawlall.htm" title="shawls" target="_top">SHAWLS </a></li>
<li><a href="treasure hunt.htm" title="treasure hunt" target="_top">TREASURE
HUNT </a></li>
<li><a href="articlesall.htm" title="Articles" target="_top">ARTICLES
</a></li>
<li><a href="gallery.htm" title="Vintage Textile gallery" target="_top">THE
GALLERY </a></li>
<li><a href="mailto:Li***@vintagetextile.com" title="email contact">EMAIL
</a></li>
<li><a href="orderall.htm" title="orders" target="_top">TO ORDER </a></li>
<li><a href="index.html" title="home page" target="_top">HOME </a></li>
</ul>
</div>
<div id="navigation4">
<ul id="sidelist">
<li><a href="Earlyall.htm" title="early clothing" target="_top">EARLY
</a></li>
<li><a href="victall.htm" title="Victorian clothing" target="_top">VICTORIAN
</a></li>
<li><a href="EdwardianVintageClothing.htm" title="Edwardian clothing"
target="_top">EDWARDIAN </a></li>
<li><a href="20sall.htm" title="1920's clothing" target="_top">1920's
</a></li>
<li><a href="30sall.htm" title="1930's-1950's clothing"
target="_top">1930's-1950's </a></li>
<li><a href="Designer_Vintage_Clothing.htm" title="designer clothing"
target="_top">DESIGNER </a></li>
<li><a href="Jewelry.htm" title="jewelry" target="_top">JEWELRY </a></li>
<li><a href="AntiqueTextiles.htm" title="textiles" target="_top">TEXTILES
</a></li>
<li><a href="shawlall.htm" title="shawls" target="_top">SHAWLS </a></li>
<li><a href="treasure hunt.htm" title="treasure hunt" target="_top">TREASURE
HUNT </a></li>
<li><a href="articlesall.htm" title="Articles" target="_top">ARTICLES
</a></li>
<li><a href="gallery.htm" title="Vintage Textile gallery" target="_top">THE
GALLERY </a></li>
<li><a href="mailto:Li***@vintagetextile.com" title="email contact">EMAIL
</a></li>
<li><a href="orderall.htm" title="orders" target="_top">TO ORDER </a></li>
<li><a href="index.html" title="home page" target="_top">HOME </a></li>
</ul>
</div>
<div id="navigation5">
<ul id="sidelist">
<li><a href="Earlyall.htm" title="early clothing" target="_top">EARLY
</a></li>
<li><a href="victall.htm" title="Victorian clothing" target="_top">VICTORIAN
</a></li>
<li><a href="EdwardianVintageClothing.htm" title="Edwardian clothing"
target="_top">EDWARDIAN </a></li>
<li><a href="20sall.htm" title="1920's clothing" target="_top">1920's
</a></li>
<li><a href="30sall.htm" title="1930's-1950's clothing"
target="_top">1930's-1950's </a></li>
<li><a href="Designer_Vintage_Clothing.htm" title="designer clothing"
target="_top">DESIGNER </a></li>
<li><a href="Jewelry.htm" title="jewelry" target="_top">JEWELRY </a></li>
<li><a href="AntiqueTextiles.htm" title="textiles" target="_top">TEXTILES
</a></li>
<li><a href="shawlall.htm" title="shawls" target="_top">SHAWLS </a></li>
<li><a href="treasure hunt.htm" title="treasure hunt" target="_top">TREASURE
HUNT </a></li>
<li><a href="articlesall.htm" title="Articles" target="_top">ARTICLES
</a></li>
<li><a href="gallery.htm" title="Vintage Textile gallery" target="_top">THE
GALLERY </a></li>
<li><a href="mailto:Li***@vintagetextile.com" title="email contact">EMAIL
</a></li>
<li><a href="orderall.htm" title="orders" target="_top">TO ORDER </a></li>
<li><a href="index.html" title="home page" target="_top">HOME </a></li>
</ul>
</div>
</div>
<div id="content">
<h1>Designer Vintage Clothing <span class="at">at</span></h1>
