Newbie Question about positioning with CSS

[kirstyb]

Hi,
I've been teaching myself CSS through a mixture of reading books and modifying
free scripts I've found online. Anyway, I've designed my website now and
everything was looking great on my monitor but when I uploaded it, it appeared
differently on the computers in the office that had different sized monitors or
used a different resolution to 1024 x 728.

I found out that this was largely due to the fact that I was using absolute
positioning not relative.

The page is [url]www.bandm.co.uk/Index.asp[/url]

The problem only occurred with the three content boxes in the centre of the
page (referenced as .toprow .middlerow and .bottomrow in my CSS file) I've
managed to change it so the top two appear as they should in all browsers now.

My problem is '.bottomrow'. With all three rows set at 'position:relative;'
the '.bottomrow' doesn't show at all in my browser. I've added a 'z-index' in
case it appears underneath '.middlerow' and have tried changing the percentage
of the 'top' value. The only way it appears is if I change the 'top' value to
'inherent;' but then it overlaps '.middlerow'.

Below is the external CSS that my page is referencing

/* CSS Document */

body {
color:#333;
background-color:white;
margin:20px;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
}
span {color:#FFFFFF;}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
color:#FFFFFF;
font-size:28px;
font-weight:900;
}
h2 {
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}
h3 {
margin:0px 0px 15px 0px;
padding:0px;
color:#999999;
font-size:28px;
font-weight:28px;
}
h4 {
font:bold 10px/12px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
p.footnotes {
font:9px/18px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
.body>p {margin:0px;}
.body>p+p {text-indent:30px;}
.Content>p {margin:0px;}
.Content>p+p {text-indent:30px;}


a.BodyLinks {
color:#000099;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a.BodyLinks:link {color:#000099;}
a.BodyLinks:visited {color:#000099;}
a.BodyLinks:hover {color:#FF9900;}

a.HeaderLinks {
color:#FFFFFF;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a.HeaderLinks:link {color:#FFFFFF;}
a.HeaderLinks:visited {color:#FFFFFF;}
a.HeaderLinks:hover {color:#FF9900;}


.body {
position:absolute;
width:1500px;
top:-2px;
Left:-1px;
height:40px;
background-color:#000099;
padding:10px;
z-index:4;
}

.toprow {
position:relative;
width:60%;
left:17%;
min-width:50%;
height:20%;
top:18%;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}

.middlerow {
position:relative;
top:20%;
left:17%;
width:60%;
min-width:50%;
height:80%;
min-height:40%;
border:1px solid black;
background-color:white;
padding:10px;
z-index:2;
}

.bottomrow {
position:relative;
top:inherent;
left:17%;
width:60%;
min-width:50%;
height:10%;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}

#navAlpha {
position:absolute;
width:130px;
top:0px;
left:-3px;
padding-top:120px;
padding-left:10px;
background-color:#EBE9E9;
z-index:2;


/* Here is the ugly brilliant hack that protects IE5/Win from its own
stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See [url]http://glish.com/css/hacks.asp[/url] for details. */
voice-family: "\"}\"";
voice-family:inherit;
width:128px;
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds
correct
length values to user agents that exhibit the parsing error exploited above
yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS
include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above).
*/
body>#navAlpha {width:128px;}

.awardcolumn {
position:absolute;
width:130px;
top:470px;
left:0px;
padding:10px;
z-index:2;
}


#navBeta {
position:absolute;
width:130px;
top:0px;
right:0px;
padding-top:120px;
padding-left:10px;
background-color:#EBE9E9;
z-index:3;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:168px;
}
/* Again, "be nice to Opera 5". */
body>#navBeta {width:168px;}

.spotlight {
position:absolute;
width:160px;
Height:auto;
top:278px;
right:0px;
background-color:#EBE9E9;
padding:10px;
z-index:4;
}


Is this something easy that I've missed or have I got it all wrong?

Thanks

Kirsty

[Murray *TMM*]

See answers on DW forum.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"kirstyb" <webforumsuser@macromedia.com> wrote in message
news:dqijus$eq7$1@forums.macromedia.com...

> Hi,
> I've been teaching myself CSS through a mixture of reading books and
> modifying
> free scripts I've found online. Anyway, I've designed my website now and
> everything was looking great on my monitor but when I uploaded it, it
> appeared
> differently on the computers in the office that had different sized
> monitors or
> used a different resolution to 1024 x 728.
>
> I found out that this was largely due to the fact that I was using
> absolute
> positioning not relative.
>
> The page is [url]www.bandm.co.uk/Index.asp[/url]
>
> The problem only occurred with the three content boxes in the centre of
> the
> page (referenced as .toprow .middlerow and .bottomrow in my CSS file)
> I've
> managed to change it so the top two appear as they should in all browsers
> now.
>
> My problem is '.bottomrow'. With all three rows set at
> 'position:relative;'
> the '.bottomrow' doesn't show at all in my browser. I've added a
> 'z-index' in
> case it appears underneath '.middlerow' and have tried changing the
> percentage
> of the 'top' value. The only way it appears is if I change the 'top'
> value to
> 'inherent;' but then it overlaps '.middlerow'.
>
> Below is the external CSS that my page is referencing
>
> /* CSS Document */
>
> body {
> color:#333;
> background-color:white;
> margin:20px;
> padding:0px;
> font:11px verdana, arial, helvetica, sans-serif;
> }
> span {color:#FFFFFF;}
> h1 {
> margin:0px 0px 15px 0px;
> padding:0px;
> color:#FFFFFF;
> font-size:28px;
> font-weight:900;
> }
> h2 {
> font:bold 12px/14px verdana, arial, helvetica, sans-serif;
> margin:0px 0px 5px 0px;
> padding:0px;
> }
> h3 {
> margin:0px 0px 15px 0px;
> padding:0px;
> color:#999999;
> font-size:28px;
> font-weight:28px;
> }
> h4 {
> font:bold 10px/12px verdana, arial, helvetica, sans-serif;
> margin:0px 0px 5px 0px;
> padding:0px;
> }
> p {
> font:11px/20px verdana, arial, helvetica, sans-serif;
> margin:0px 0px 16px 0px;
> padding:0px;
> }
> p.footnotes {
> font:9px/18px verdana, arial, helvetica, sans-serif;
> margin:0px 0px 16px 0px;
> padding:0px;
> }
> .body>p {margin:0px;}
> .body>p+p {text-indent:30px;}
> .Content>p {margin:0px;}
> .Content>p+p {text-indent:30px;}
>
>
> a.BodyLinks {
> color:#000099;
> font-size:11px;
> font-family:verdana, arial, helvetica, sans-serif;
> font-weight:600;
> text-decoration:none;
> }
> a.BodyLinks:link {color:#000099;}
> a.BodyLinks:visited {color:#000099;}
> a.BodyLinks:hover {color:#FF9900;}
>
> a.HeaderLinks {
> color:#FFFFFF;
> font-size:11px;
> font-family:verdana, arial, helvetica, sans-serif;
> font-weight:600;
> text-decoration:none;
> }
> a.HeaderLinks:link {color:#FFFFFF;}
> a.HeaderLinks:visited {color:#FFFFFF;}
> a.HeaderLinks:hover {color:#FF9900;}
>
>
> .body {
> position:absolute;
> width:1500px;
> top:-2px;
> Left:-1px;
> height:40px;
> background-color:#000099;
> padding:10px;
> z-index:4;
> }
>
> .toprow {
> position:relative;
> width:60%;
> left:17%;
> min-width:50%;
> height:20%;
> top:18%;
> border:1px solid black;
> background-color:white;
> padding:10px;
> z-index:1;
> }
>
> .middlerow {
> position:relative;
> top:20%;
> left:17%;
> width:60%;
> min-width:50%;
> height:80%;
> min-height:40%;
> border:1px solid black;
> background-color:white;
> padding:10px;
> z-index:2;
> }
>
> .bottomrow {
> position:relative;
> top:inherent;
> left:17%;
> width:60%;
> min-width:50%;
> height:10%;
> border:1px solid black;
> background-color:white;
> padding:10px;
> z-index:3;
> }
>
> #navAlpha {
> position:absolute;
> width:130px;
> top:0px;
> left:-3px;
> padding-top:120px;
> padding-left:10px;
> background-color:#EBE9E9;
> z-index:2;
>
>
> /* Here is the ugly brilliant hack that protects IE5/Win from its own
> stupidity.
> Thanks to Tantek Celik for the hack and to Eric Costello for publicizing
> it.
> IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
> declaration. The incorrect IE5/Win value is above, while the correct value
> is
> below. See [url]http://glish.com/css/hacks.asp[/url] for details. */
> voice-family: "\"}\"";
> voice-family:inherit;
> width:128px;
> }
> /* I've heard this called the "be nice to Opera 5" rule. Basically, it
> feeds
> correct
> length values to user agents that exhibit the parsing error exploited
> above
> yet get
> the CSS box model right and understand the CSS2 parent-child selector.
> ALWAYS
> include
> a "be nice to Opera 5" rule every time you use the Tantek Celik hack
> (above).
> */
> body>#navAlpha {width:128px;}
>
> .awardcolumn {
> position:absolute;
> width:130px;
> top:470px;
> left:0px;
> padding:10px;
> z-index:2;
> }
>
>
> #navBeta {
> position:absolute;
> width:130px;
> top:0px;
> right:0px;
> padding-top:120px;
> padding-left:10px;
> background-color:#EBE9E9;
> z-index:3;
> /* Again, the ugly brilliant hack. */
> voice-family: "\"}\"";
> voice-family:inherit;
> width:168px;
> }
> /* Again, "be nice to Opera 5". */
> body>#navBeta {width:168px;}
>
> .spotlight {
> position:absolute;
> width:160px;
> Height:auto;
> top:278px;
> right:0px;
> background-color:#EBE9E9;
> padding:10px;
> z-index:4;
> }
>
>
> Is this something easy that I've missed or have I got it all wrong?
>
> Thanks
>
> Kirsty
>