By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,879 Members | 1,859 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,879 IT Pros & Developers. It's quick & easy.

Position {top: X%;} problem

P: n/a
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>
Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
On Fri, 11 Jun 2004 20:18:54 GMT, "CMAR" <cm***@yahoo.com> wrote:
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/)
It's easier if you give the URL of the actual page concerned.
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.
Which browser?
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.


How to approach these problems:
- first validate your HTML and CSS;
- then view the page using Mozilla and/or Opera (which have far fewer
bugs than IE).

If this doesn't give you sufficient clues, get back to us. I don't know
about Dreamweaver, but if a valid page renders as you want in Mozilla
and erroneously in Front Page, then it's about a 99.9% probability of
being a Front Page bug.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #2

P: n/a
CMAR wrote:
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;"


I have had a few differences when previewing in DW MX 2004 than when I
view online. I came to the conclusion that this was a DW bug, and so
long as it works online in all browsers correctly, then I can ignore the
DW preview bugs
Jul 20 '05 #3

P: n/a
Thanks, Ian, and Steven, for the posts.
Using "Preview in browser" to check either IE6 or Navigator 7, the page
does not render correctly in either DW MX 2004 or Front Page 2000. It looks
fine in Top Style and, as you can see, on my test site.
So it remains a mystery.
Cheers, CMA

"Ian Watts" <iw****************@ntlworld.com.and.this> wrote in message
news:yw*************@newsfe1-gui.server.ntli.net...
CMAR wrote:
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;"


I have had a few differences when previewing in DW MX 2004 than when I
view online. I came to the conclusion that this was a DW bug, and so
long as it works online in all browsers correctly, then I can ignore the
DW preview bugs

Jul 20 '05 #4

P: n/a
The live site is http://home.ne.rr.com/thespar/designerNx.htm

The page renders fine there, despite the fact that the markup incorrectly
uses id="sidelist" multiple times, instead of only once, as allowed by CSS.

The problem is that when previewing in browser (IE6 and Navigator 7) in DW
MX 2004 or FP2000, the navigation <div>s are stacked one toop of each other.

I tried switching the "sidelist" style to a class ,but that didn't help the
problem: displaying incorrectly with the nav <divs> stacked on top of one
another, instead of following one another (according to declarations
"top"X%;").

I suspect that the solution may be to use contextual selectors but I am
not sure what they should be.

Cheers, CMA
Jul 20 '05 #5

P: n/a
On Sun, 13 Jun 2004 01:38:48 GMT, "CMAR" <cm***@yahoo.com> wrote:
The live site is http://home.ne.rr.com/thespar/designerNx.htm

The page renders fine there, despite the fact that the markup incorrectly
uses id="sidelist" multiple times, instead of only once, as allowed by CSS.

The problem is that when previewing in browser (IE6 and Navigator 7) in DW
MX 2004 or FP2000, the navigation <div>s are stacked one toop of each other.

I tried switching the "sidelist" style to a class ,but that didn't help the
problem: displaying incorrectly with the nav <divs> stacked on top of one
another, instead of following one another (according to declarations
"top"X%;").

I suspect that the solution may be to use contextual selectors but I am
not sure what they should be.


It looks like your problem is that you are positioning the elements x%
down the 'left' div, but the left div doesn't have any size, and 40% of
0 is 0.

I suggest you try removing the positioning from the navigation divs and
float them instead, and give 'left' an explicit width.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.