Shadow effect with relative positioning

[Nik Thomas]

I'm beginning to redesign my site to move away from table-based layouts, and
to incorporate a decent amount of cross-browser reliability, graceful
degradation and standards compliance.

I have used the index page at www.loyalwatcher.com/cssindex4.htm to try and
work through as many issues as possible before converting the rest of the
site. This page validates as html 4.01 strict and the CSS at
www.loyalwatcher.com/main.css passes the W3C validator.

When testing the page using Dan Vine's Safari Emulator, the shadowed text
appears in two lines, and the colours aren't as suggested. Is this method
not reliable (and is there an alternative), or do I just need to tweak my
CSS?

Any comments on html/CSS structure or site design also welcomed.

TIA

Nik

--
I wish to be dissociated from your interpretation of my opinions

[Barbara de Zoete]

On Tue, 4 Jan 2005 16:15:32 -0000, Nik Thomas <nik.thomas> wrote:

www.loyalwatcher.com/cssindex4.htm

No answer to your question, but go see
<http://home.wanadoo.nl/b.de.zoete/_test/loyalwatcher.png>. See how the menu on
the left side of your page drops to below all other content? Is this how you
want the page to be?

(WinXP Opera7.54)

--
,-- --<--@ ---- PretLetters: 'woest wyf', met vele interesses: -----------.
| weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html> |
| webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html> |
| zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html> |
`----------------------------------------------------- --<--@ ------------'

[Spartanicus]

"Nik Thomas" <nik.thomas> wrote:

I have used the index page at www.loyalwatcher.com/cssindex4.htm to try and
work through as many issues as possible before converting the rest of the
site. This page validates as html 4.01 strict and the CSS at
www.loyalwatcher.com/main.css passes the W3C validator.

When testing the page using Dan Vine's Safari Emulator, the shadowed text
appears in two lines, and the colours aren't as suggested. Is this method
not reliable (and is there an alternative), or do I just need to tweak my
CSS?
Creating a shadow effect this way is silly, it requires 2 content
instances of "Loyal Watcher". Use an image for fancy headers, provide
the text as alt content, and wrap it in an appropriate header markup.
Using 2 h1's is rarely proper markup.
Any comments on html/CSS structure or site design also welcomed.

The way you used immediately followed the h1's with an h2 is imo bad
form, the h2 content belongs in the h1.

The header div seems superfluous, style the h1 instead.

The new page falls apart in Opera, the blue background doesn't look good
imo, the yellow/white on white text in the webring box is impossible to
read.

Specifying a windows charset is not very nice.

--
Spartanicus

[Nik Thomas]

Spartanicus.exe failed a Turing test with

Creating a shadow effect this way is silly, it requires 2 content
instances of "Loyal Watcher". Use an image for fancy headers, provide
the text as alt content, and wrap it in an appropriate header markup.
Using 2 h1's is rarely proper markup.
Noted.

Any comments on html/CSS structure or site design also welcomed.
The way you used immediately followed the h1's with an h2 is imo bad
form, the h2 content belongs in the h1.

Noted.
The header div seems superfluous, style the h1 instead.
Okay - I think it's probably from an earlier test where I had
<Header><Nav><Content>. I'll look at that.
The new page falls apart in Opera,
Nuts. This is a bit of a lunchtime-at-work hobby and I can't install any
other browsers (NN4.6 is helpfully provided in addition to IE5.5). I'd
hoped to avoid any issues by having a relatively simple structure and using
valid html. Is the reason for this one that you can explain to me easily?
the blue background doesn't look
good imo, the yellow/white on white text in the webring box is
impossible to read.
Hmm, I'm seeing Navy on Gray, which is what I had intended. Any ideas why
this might be?

Specifying a windows charset is not very nice.

Noted. A quick google suggests ISO-8859-1 might be better?

--
I wish to be dissociated from your interpretation of my opinions

Few men think, but all have opinions.

[Nik Thomas]

Barbara de Zoete.exe failed a Turing test with

See how
the menu on the left side of your page drops to below all other
content? Is this how you want the page to be?

No, I'd rather hoped to have the navigation and content side-by-side. :-(

Is this to do with IE and Opera interpreting the

div.Leftnav {
position:absolute;
left:1em;
top:10px;
}

to be with reference to different 'absolute' reference points? If it is,
changing the order to <LeftNav><Header><Main> should sort it out, but leaves
the source-ordering screwy?

Nik
--
I wish to be dissociated from your interpretation of my opinions

Few men think, but all have opinions.

[Gus Richter]

Nik Thomas wrote:

When testing the page using Dan Vine's Safari Emulator, the shadowed text
appears in two lines, and the colours aren't as suggested. Is this method
not reliable (and is there an alternative), or do I just need to tweak my
CSS?

Technically speaking: The colors look ok to me. I suggest that you place
your Drop Shadow within a relatively positioned wrapper and place your
two items (z-index is not needed) absolutely within the wrapper this way
with values to your liking:

..wrapper {position:relative;top:20px;height:70px;text-align:center;}
..titleshadow {position:absolute;top:4px;left:3px;color:#992222; width:100%;}
..title {position:absolute;top:0;left:0;color:white;width: 100%;}

<div class=wrapper>
<div class="titleshadow"><h1>Loyal Watcher</h1></div>
<div class="title"><h1>Loyal Watcher</h1></div>
</div>

And place the following item separately next:
<h2 class="center">The Magazine of CURNU Alumni Society</h2>
With this in your stylesheet:
..center {text-align:center;}

You also have to fix up a lot more on the site.

--
Gus

[Spartanicus]

"Nik Thomas" <nik.thomas> wrote:

The new page falls apart in Opera,

Nuts. This is a bit of a lunchtime-at-work hobby and I can't install any
other browsers (NN4.6 is helpfully provided in addition to IE5.5). I'd
hoped to avoid any issues by having a relatively simple structure and using
valid html. Is the reason for this one that you can explain to me easily?

Case, LeftNav in the html, Leftnav in the css.

the blue background doesn't look
good imo, the yellow/white on white text in the webring box is
impossible to read.

Hmm, I'm seeing Navy on Gray, which is what I had intended. Any ideas why
this might be?

Untested: check class case?

Specifying a windows charset is not very nice.

Noted. A quick google suggests ISO-8859-1 might be better?

Should be fine.

--
Spartanicus

[Nik Thomas]

Gus Richter.exe failed a Turing test with

You also have to fix up a lot more on the site.

Thanks, Gus. Do you mean there are major issues with the cssindex4 page, or
within the rest of the site? If the latter, then yes, there's plenty to
keep me busy.

Nik

--
I wish to be dissociated from your interpretation of my opinions

Few men think, but all have opinions.

[Nik Thomas]

Spartanicus.exe failed a Turing test with

Is the reason for this one
that you can explain to me easily?

Case, LeftNav in the html, Leftnav in the css.

Thank you, I'd forgotten that was a requirement.

the blue background doesn't look
good imo, the yellow/white on white text in the webring box is
impossible to read.

Hmm, I'm seeing Navy on Gray, which is what I had intended. Any
ideas why this might be?

Untested: check class case?

The main class elements are okay, but there are a number of case issues to
resolve in the css, so I'll sort these out and see if it fixes anything.

Thanks for you time.

Nik
--
I wish to be dissociated from your interpretation of my opinions

Few men think, but all have opinions.

[Gus Richter]

Nik Thomas wrote:

Gus Richter.exe failed a Turing test with

You also have to fix up a lot more on the site.

Thanks, Gus. Do you mean there are major issues with the cssindex4 page, or
within the rest of the site? If the latter, then yes, there's plenty to
keep me busy.

I focused on the drop shadow portion, but the impression I got was that
the page was unfinished and needed work. I may be wrong.

--
Gus