Hi,

I am having some trouble using css correctly and I was wondering if a
subscriber to this newsgroup might be able to offer some suggestions.

The problem refers to the page

http://www.gloworms.org.uk/index.htm

My intention was to put the whole page in a dark box which sits on a
white background. Inside the box I have a corner picture, a title
banner, a menu bar and a main text area which I want to position using
position:absolute. The trouble is, the text in the main text area runs
outside the dark box (you can see this by scrolling down - the text is
white against a white background because of the problem, but there are
a few links which are coloured).

What I would really like to know is:
How can I tell the dark box to stretch so it goes behind all of the
main text area (even though I can't predict the size of the text area
in advance).

Please reply if you have any opinions on my conundrum.

best wishes,

Colin

"Mr Colin J Cotter" <colin@erebus.ese.ic.ac.uk> skrev i meddelandet
news:Pine.LNX.4.44.0401281153440.25085-100000@erebus.ese.ic.ac.uk...[color=blue]
> Hi,
>
> I am having some trouble using css correctly and I was wondering if[/color]
a[color=blue]
> subscriber to this newsgroup might be able to offer some[/color]
suggestions.[color=blue]
>
> The problem refers to the page
>
> http://www.gloworms.org.uk/index.htm
>
> My intention was to put the whole page in a dark box which sits on a
> white background. Inside the box I have a corner picture, a title
> banner, a menu bar and a main text area which I want to position[/color]
using[color=blue]
> position:absolute. The trouble is, the text in the main text area[/color]
runs[color=blue]
> outside the dark box (you can see this by scrolling down - the text[/color]
is[color=blue]
> white against a white background because of the problem, but there[/color]
are[color=blue]
> a few links which are coloured).
>
> What I would really like to know is:
> How can I tell the dark box to stretch so it goes behind all of the
> main text area (even though I can't predict the size of the text[/color]
area[color=blue]
> in advance).
>
> Please reply if you have any opinions on my conundrum.
>[/color]

First, why are you using doctype XHTML 1.0 Strict for your page? It's
hard to learn that at the same time as learning CSS :-)

As it is, your page don't validate for any XHTML
(http://tinyurl.com/ys2u7 ) Try to fix the errors and perhaps also the
doctype to HTML 4.01 You may find the errors in CSS easier after that.

BTW I have been lurking on this group for some time, and this is my
first posting. I have learned a lot from the regulars and hope to be
able to contribute more in the future. But I guess it will be some
questions also :-)

--
/Arne (Sweden)
(I hope my English is good enough so you can understand my writings
:-=

Mr Colin J Cotter wrote:[color=blue]
> Hi,
>
> I am having some trouble using css correctly and I was wondering if a
> subscriber to this newsgroup might be able to offer some suggestions.
>
>[/color]

I just wanted to pass on some suggestions that I have received from
various people.

1. Indent your HTML so that it is obvious how you have nested your divs

2. Validate your CSS to get rid of errors at

http://jigsaw.w3.org/css-validator/

(yours has a couple)

I have found that when following these suggestions, many problems
disappear. This group has been invaluable in helping me with a few
problems (a newbie myself). If looking at my page will help, then feel
free at

http://members.lycos.co.uk/churchrevival/index.php
http://members.lycos.co.uk/churchrevival/test.css

Hope that helps (it may not), but there are plenty here who can, much
better than I.

Ian

> First, why are you using doctype XHTML 1.0 Strict for your page? It's[color=blue]
> hard to learn that at the same time as learning CSS :-)[/color]
To be honest, I am using it because that is what a book told me to do.
I've hacked out the invalid bits and left the rest.
I've fiddled with the css a bit too, and now I seem to get closer to what
I want but I see a bit gap at the bottom. I guess this might be a problem
to investigate myself rather than troubling newsgroups about it...[color=blue]
> BTW I have been lurking on this group for some time, and this is my
> first posting. I have learned a lot from the regulars and hope to be
> able to contribute more in the future. But I guess it will be some
> questions also :-)[/color]
Well thankyou for replying to my message.

-cjc

On Wed, 28 Jan 2004 13:53:27 +0000, Ian Watts
<iwatts.remove.this@ntlworld.com.and.this> wrote:

[color=blue]
> http://jigsaw.w3.org/css-validator/[/color]

OP would do well to bookmark that page as well as

http://validator.w3.org/

and use them often. First best thing I ever learned about web authoring.

> 1. Indent your HTML so that it is obvious how you have nested your divs
Thanks for suggesting, I do that with all my other kinds of programming,
who knows why I didn't do it for HTML![color=blue]
> 2. Validate your CSS to get rid of errors at
> http://jigsaw.w3.org/css-validator/[/color]
Thanks, I repaired the errors.[color=blue]
> I have found that when following these suggestions, many problems
> disappear. This group has been invaluable in helping me with a few
> problems (a newbie myself). If looking at my page will help, then feel
> free at
> http://members.lycos.co.uk/churchrevival/index.php
> http://members.lycos.co.uk/churchrevival/test.css[/color]
Looks very good, unfortunately doesn't quite cover what I want to do. I
suspect my problem is something to do with positioning of nested divs.

-Colin

On Wed, 28 Jan 2004 11:54:17 +0000, Mr Colin J Cotter
<colin@erebus.ese.ic.ac.uk> wrote:
[color=blue]
>I am having some trouble using css correctly and I was wondering if a
>subscriber to this newsgroup might be able to offer some suggestions.
>
>The problem refers to the page
>
>http://www.gloworms.org.uk/index.htm
>
>My intention was to put the whole page in a dark box which sits on a
>white background. Inside the box I have a corner picture, a title
>banner, a menu bar and a main text area which I want to position using
>position:absolute. The trouble is, the text in the main text area runs
>outside the dark box (you can see this by scrolling down - the text is
>white against a white background because of the problem, but there are
>a few links which are coloured).
>
>What I would really like to know is:
>How can I tell the dark box to stretch so it goes behind all of the
>main text area (even though I can't predict the size of the text area
>in advance).[/color]

Your problem is that you want the background to adjust to the content -
thus requiring it to be in the main flow - but have absolutely
positioned things, thus taking them out of the main flow.

My own approach for this layout would be to drop the absolute/relative
positioning, and use floats for the banjo and the menu. Other people may
have other suggestions.

You can also simplify a few things. For example, take out all the
"background-color:transparent;" settings - AFAIK you only ever need to
specify that if you are specifying color at the same time, or if you
need to override another setting higher up the cascade.

Similarly you can drop most of your class="menu" attributes in your
HTML: just set it once on the DIV. Then specify the formatting of links
in that DIV with '.menu A' in your stylesheet, and so on.

HTH

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

It seems "Stephen Poley" wrote in
comp.infosystems.www.authoring.stylesheets:[color=blue]
>You can also simplify a few things. For example, take out all the
>"background-color:transparent;" settings - AFAIK you only ever need to
>specify that if you are specifying color at the same time, or if you
>need to override another setting higher up the cascade.[/color]

Any known issues with this? My style sheet is at
http://www.acad.sunytccc.edu/instruct/sbrown/screen.css

I want links to be the same color in different regions of the pages,
but the different regions have different background colors. So I
have a:link, a:visited, a:hover, a:active, and a[name] selectors
with color and background, then the same five selectors as
descendants of .maintitle, then the same five as descendants of h1,
etc etc etc. I could sweep all that away and just have the five
plain selectors for a, if "transparent" were safe, but I think I
read somwehere that it's not.

I tried googling
background transparent problem group"*.stylesheets
and got lots of hits but the first dozen or so didn't answer my
question.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

Thanks for your helpful reply.[color=blue]
> Your problem is that you want the background to adjust to the content -
> thus requiring it to be in the main flow - but have absolutely
> positioned things, thus taking them out of the main flow.[/color]
Aha - this I did not know. Thankyou.[color=blue]
> My own approach for this layout would be to drop the absolute/relative
> positioning, and use floats for the banjo and the menu. Other people may
> have other suggestions.[/color]
Great suggestion. OK, I have done that, and it looks like we are nearly
there. The only thing that I need to change now is I want the main1 div to
go to the right-hand edge of the background div, and start from the same
place on the left all the way down. What I mean is that I want the
"column" below the menu div to be empty. How can I achieve this?

When I have this all sorted out I will make a post explaining what I did a
bit more clearly - maybe this will help some other people too.

-Colin

Stan Brown <the_stan_brown@fastmail.fm> writes:[color=blue]
> etc etc etc. I could sweep all that away and just have the five
> plain selectors for a, if "transparent" were safe, but I think I
> read somwehere that it's not.[/color]

Netscape 4 interprets it as #0a000a and 'inherit' as #00e000 if you
count that as a problem. I laughed/cried a lot when I worked out why.

--
Chris

Chris Morris wrote:
[color=blue]
> Stan Brown <the_stan_brown@fastmail.fm> writes:
>[color=green]
>>etc etc etc. I could sweep all that away and just have the five
>>plain selectors for a, if "transparent" were safe, but I think I
>>read somwehere that it's not.[/color]
>
>
> Netscape 4 interprets it as #0a000a and 'inherit' as #00e000 if you
> count that as a problem. I laughed/cried a lot when I worked out why.[/color]

It wouldn't be parsing the first seven characters, ignoring/zeroing any
non-hex digits, would it? I wonder if anyone's tried to find a word
which generates an appropriate colour?

--
Michael
m r o z a t u k g a t e w a y d o t n e t

Michael Rozdoba <mroz@nowhere.invalid> wrote:[color=blue]
>Chris Morris wrote:[color=green]
>>
>> Netscape 4 interprets it as #0a000a and 'inherit' as #00e000 if you
>> count that as a problem. I laughed/cried a lot when I worked out why.[/color]
>
>It wouldn't be parsing the first seven characters, ignoring/zeroing any
>non-hex digits, would it? I wonder if anyone's tried to find a word
>which generates an appropriate colour?[/color]

Dunno about appropriate but... this is a long time Netscape behaviour
and I had a friend who used to (we're talking back in the NS 1.1 or NS
2 days) set his bgcolor, text, link, etc. colours on <body> by using
obscenities that just happened to produce the desired colours. Ah,
students days, cheap beer, free Internet access and low standards of
humour.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

On Thu, 29 Jan 2004 16:51:13 +0000, Michael Rozdoba <mroz@nowhere.invalid>
wrote:
[color=blue]
> Chris Morris wrote:
>[color=green]
>> Stan Brown <the_stan_brown@fastmail.fm> writes:
>>[color=darkred]
>>> etc etc etc. I could sweep all that away and just have the five plain
>>> selectors for a, if "transparent" were safe, but I think I read
>>> somwehere that it's not.[/color]
>>
>>
>> Netscape 4 interprets it as #0a000a and 'inherit' as #00e000 if you
>> count that as a problem. I laughed/cried a lot when I worked out why.[/color]
>
> It wouldn't be parsing the first seven characters, ignoring/zeroing any
> non-hex digits, would it? I wonder if anyone's tried to find a word
> which generates an appropriate colour?
>[/color]


If your theory is true, in Netscape 'color: souffle;' would be awfully
green. I don't think I'm ordering that at the Netscape Cafe...

Steve Pugh wrote:[color=blue]
> Michael Rozdoba <mroz@nowhere.invalid> wrote:[/color]

[netscape colours]
[color=blue][color=green]
>>It wouldn't be parsing the first seven characters, [snip] ?[/color][/color]
[color=blue]
> Dunno about appropriate but... this is a long time Netscape behaviour
> and I had a friend who used to (we're talking back in the NS 1.1 or NS
> 2 days) set his bgcolor, text, link, etc. colours on <body> by using
> obscenities that just happened to produce the desired colours. Ah,
> students days, cheap beer, free Internet access and low standards of
> humour.[/color]

LOL. Low standards? That sounds positively sophisticated for students. I
might have to pay http://browsers.evolt.org/?navigator/ a visit.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

It seems "Chris Morris" wrote in
comp.infosystems.www.authoring.stylesheets:[color=blue]
>Stan Brown <the_stan_brown@fastmail.fm> writes:[color=green]
>> etc etc etc. I could sweep all that away and just have the five
>> plain selectors for a, if "transparent" were safe, but I think I
>> read somwehere that it's not.[/color]
>
>Netscape 4 interprets it as #0a000a and 'inherit' as #00e000 if you
>count that as a problem. I laughed/cried a lot when I worked out why.[/color]

Sigh. Thanks.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

Stan Brown wrote:[color=blue]
>
> I want links to be the same color in different regions of the
> pages, but the different regions have different background colors.
> So I have a:link, a:visited, a:hover, a:active, and a[name]
> selectors with color and background, then the same five selectors
> as descendants of .maintitle, then the same five as descendants of
> h1, etc etc etc. I could sweep all that away and just have the five
> plain selectors for a, if "transparent" were safe, but I think I
> read somwehere that it's not.[/color]

Correct, it is not safe. Using transparent can lead to the same
problems as not setting a background color at all.

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

Neal <neal413@spamrcn.com> writes:[color=blue]
> On Thu, 29 Jan 2004 16:51:13 +0000, Michael Rozdoba[color=green]
> > Chris Morris wrote:[color=darkred]
> >> Netscape 4 interprets [transparent] as #0a000a and 'inherit' as
> >> #00e000 if you count that as a problem. I laughed/cried a lot
> >> when I worked out why.[/color]
> >
> > It wouldn't be parsing the first seven characters, ignoring/zeroing
> > any non-hex digits, would it? I wonder if anyone's tried to find a
> > word which generates an appropriate colour?[/color][/color]

Well, I thought so. However...
[color=blue]
> If your theory is true, in Netscape 'color: souffle;' would be awfully
> green. I don't think I'm ordering that at the Netscape Cafe...[/color]

Well, I tested this
http://www.dur.ac.uk/c.i.morris/ns4.html

Souffle appears to be a shade of cyan, closer to souffff, I think.
Obviously this isn't solely what's going on...

--
Chris

Chris Morris <c.i.morris@durham.ac.uk> wrote:[color=blue]
>Neal <neal413@spamrcn.com> writes:[/color]
[color=blue][color=green]
>> If your theory is true, in Netscape 'color: souffle;' would be awfully
>> green. I don't think I'm ordering that at the Netscape Cafe...[/color]
>
>Well, I tested this
>http://www.dur.ac.uk/c.i.morris/ns4.html
>
>Souffle appears to be a shade of cyan, closer to souffff, I think.[/color]

Comes out as #00FFE0 (yes E0 not 0E, so cyan like Chris reports) for
me. Odd that.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

Chris Morris wrote:[color=blue]
>
> Netscape 4 interprets it as #0a000a and 'inherit' as #00e000 if you
> count that as a problem. I laughed/cried a lot when I worked out
> why.[/color]

I keep trying to work this out, but cannot (despite reading followups
to the post I quoted here). Care to share?

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

Brian <usenet3@julietremblay.com.invalid-remove-this-part> writes:[color=blue]
> Chris Morris wrote:[color=green]
> > Netscape 4 interprets it as #0a000a and 'inherit' as #00e000 if you
> > count that as a problem. I laughed/cried a lot when I worked out
> > why.[/color]
>
> I keep trying to work this out, but cannot (despite reading followups
> to the post I quoted here). Care to share?[/color]

The rule that works for these (though acts unexpectedly for souffle,
so perhaps it's not the whole story) is

inherit =:
i Well, it must be a hash, colours start with hashes
n Not a hex digit, call it 0
h Not a hex digit, call it 0
e E
r Call it 0
i Call it 0
t Call it 0
inherit = #00e000

transparent
#0a000a
(and ignore the rest, colour codes are seven characters)

--
Chris

Chris Morris wrote:[color=blue]
>[color=green][color=darkred]
>>> Netscape 4 interprets it as #0a000a and 'inherit' as #00e000 if
>>> you count that as a problem. I laughed/cried a lot when I
>>> worked out why.[/color][/color][/color]

I laughed so hard, I nearly cried! ;-)
[color=blue]
> inherit =:
> i Well, it must be a hash, colours start with hashes
> n Not a hex digit, call it 0
> h Not a hex digit, call it 0
> e E
> r Call it 0
> i Call it 0
> t Call it 0
> inherit = #00e000
>
> transparent
> #0a000a
> (and ignore the rest, colour codes are seven characters)[/color]

rotfl. Wow, I almost pity the clown who wrote that code!

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/