I try. I really, really try to use CSS and like it and make it work. But
just when I think I've got it, it breaks my heart.

Could some kind soul explain to me why this isn't working?

http://www.phormation.net/demo/

I think it's a pretty straightforward layout. The problem is the padding
on the #Content DIV. IE takes each line of the paragraph and makes it a
separate object; applies the left padding to the first line, and applies
the right padding as left padding in the next DIV. (I've exxagerated the
padding for purposes of illustration)

http://img.villagephotos.com/p/2006-1/1140460/wtfie.gif

NS makes the padding into separate objects above and below the #Content
DIV:

http://img.villagephotos.com/p/2006-1/1140460/wtfns.gif

Opera and FF do pretty much the same thing:

http://img.villagephotos.com/p/2006-1/1140460/wtfop.gif
http://img.villagephotos.com/p/2006-1/1140460/wtfff.gif

Am I wrong? This is a pretty simple layout, isn't it? I tried removing
the #JSNote DIV, just in case that was doing something funky, but the
problem remained. In fact, I'm using the main stylesheet elsewhere with
no problem; I just wanted to add a few things here.

--
Alan Little
Phorm PHP Form Processor
http://www.phorm.com/

And lo, Alan Little didst speak in alt.www.webmaster:

CSS is not something you need to pound at to make it work. Start simple;
separate your stylesheets into sections, one for all the header styles,
one for the body styles on a certain subset of pages which look similar.
Include these files only when you need them.

There is a lot of CSS baggage hanging around in the first declared
stylesheet which never gets used in this example. Clear out what isn't
being used first; distill the problem to the bare elements required. This
will greatly help determine the cause.

In this case, the problem isn't your stylesheet at all, but with your
Javascript. At the bottom of the demo page there is this line of script:

document.getElementById("Content").style.display=" inline";

You may think that this means the *content* of the <DIV ID="Content">
should display as inline text, when really you are telling the *whole
element* to display as inline content. This includes modifying the
borders, padding and margins to behave like an inline element such as
<img> or <span>.

Change the line above to:

document.getElementById("Content").style.display=" block";

And your layout will regain some sanity in all browsers.

Grey

--
The technical axiom that nothing is impossible sinisterly implies the
pitfall corollary that nothing is ridiculous.
- http://www.greywyvern.com/orca#sear - Orca Search: Full-featured spider
and site-search engine

Alan Little wrote:

I would start by fixing the errors in the CSS.
Check the Warnings as well.
<http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.phormation.net/demo/>

"san-serif" is not a generic font, but sans-serif is. No quotes. When
there are mistakes in the CSS, browsers are free to reject it.

There is also something strange that I have not seen before.
<http://validator.w3.org/check?verbose=1&uri=http%3A//www.phormation.net/demo/>
" Tentatively passed validation " Heh, tentatively?

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

Can you describe this better? I don't understand what you mean, even
with the screen shots.

Did you consider using the <noscript> ... </noscript> element?

--
-bts
-Warning: I brake for lawn deer

On Wed, 08 Mar 2006 10:48:03 -0500
GreyWyvern <spam@greywyvern.com> opined:
the result as you go along. Moreover, Quanta will check syntax of
both CSS and your html with "tidy."

--
Displayed Email Address is a SPAM TRAP
Our DNSRBL -
Eliminate Spam: http://www.TQMcube.com
Multi-RBL Check: http://www.TQMcube.com/rblcheck.php
Zombie Graphs: http://www.TQMcube.com/zombies.php

"Alan Little" <alan@n-o-s-p-a-m-phorm.com> wrote in message
news:Xns9780672125944alanphormcom@216.196.97.131.. .
Don't get that trouble with tables.

"Martin Price" <mNO_SPAMprice767@yahoo.com> wrote in news:x3FPf.28645
$bw1.25320@newsfe2-win.ntli.net:

Nope. You get different troubles with tables.



--
Karl Groves
http://karlcore.com
http://chevelle.karlcore.com

Accessibility Discussion List: http://smallerurl.com/?id=6p764du

Carved in mystic runes upon the very living rock, the last words of
Beauregard T. Shagnasty of alt.www.webmaster make plain:

Doh! I knew that. I must have copied that from an older file. I'm
learning....

I've seen that before; it gives that message when there's no character
encoding specified.

If you take a look at the IE screen shot, compared to the others, you'll
see that IE is treating each line as a separate element -- each line has
a separate border. The left-padding is applied only to the first line,
and the right-padding is pushing over the first line of the Footer div
(the copyright line).

I hadn't thought of that, though I'd still have to have the JS to un-hide
the content.

--
Alan Little
Phorm PHP Form Processor
http://www.phorm.com/

Carved in mystic runes upon the very living rock, the last words of
GreyWyvern of alt.www.webmaster make plain:

That's an interesting idea. This is the first time I've ever even used
more that one stylesheet; I usually just have everything in one.

It's used in other parts of the site, and a lot of it will eventually be
used here; I just started building the demo when I ran into this problem.

Doh! I knew that. That's what I get for copying and pasting from other
projects, without sufficient checking. Thanks.

--
Alan Little
Phorm PHP Form Processor
http://www.phorm.com/

"Karl Groves" <karl@NOSPAMkarlcore.com> wrote in message
news:Xns978085DDCA057karlkarlcorecom@216.196.97.13 6...
LOL

Touche, mon ami!