five divs

[Ivo]

Hello,

I have some pages which are close to pixel perfect in Win/IE6 in quircks
mode with text-size set to "smaller", but not at all on other systems. In
Mozilla clicking a link scrolls the page to the top before a second click
loads the link. On a Mac the page is only gray :-(.

What I am trying to achieve can be best described as four divs surrounding
the main content. In terms of z-indeces, the top is higher than the left is
higher than the bottom is higher than the right is higher than the top. All
divs should have their own independant scrollbar in case of overflow.

See
<URL: http://4umi.com/test.htm?doctype=no >
<URL: http://4umi.com/test.htm?doctype=401loose >
where styles can be tested interactively.

Does anyone have an idea to make this work cross-browser and
standards-compliant?
Thanks,
Ivo

[Tim]

On Sat, 24 Jul 2004 18:24:19 +0200,
"Ivo" <[e-mail]> posted:

I have some pages which are close to pixel perfect in Win/IE6 in quirks
mode with text-size set to "smaller", but not at all on other systems.

Quick answer: You're trying to use a browser in *BROKEN* mode. This means
it's not playing by the rules, and neither are you. You cannot expect
anything else to play by the rules, either (emulating the broken behaviour
you're expecting from MSIE, or the proper rules about how it should be
done).

Solution: Try and get what you want working with IE *NOT* in quirks mode,
and using strict HTML, then you'll have more luck.

There's far too much on those pages for many of us to want to try and
decrypt what you're doing or trying to do, certainly not to do that for
free. Start running your source through error checkers and validators
like: <http://validator.w3.org/> & <http://jigsaw.w3.org/css-validator/>,
and fix up the problems it finds. Once you get rid of ALL of them, you
stand more chance of acheiving what you're after.

--
If you insist on e-mailing me, use the reply-to address (it's real but
temporary). But please reply to the group, like you're supposed to.

This message was sent without a virus, please delete some files yourself.

[Ivo]

"Tim" wrote

"Ivo" <[e-mail]> posted:

I have some pages which are close to pixel perfect in Win/IE6 in quirks
mode with text-size set to "smaller", but not at all on other systems.
Quick answer: You're trying to use a browser in *BROKEN* mode. This

means it's not playing by the rules, and neither are you. You cannot expect
anything else to play by the rules, either (emulating the broken behaviour
you're expecting from MSIE, or the proper rules about how it should be
done).

Solution: Try and get what you want working with IE *NOT* in quirks mode,
and using strict HTML, then you'll have more luck.

Well thanks. This is exactly what I am doing.
Here are the results:
<URL: http://4umi.com/test.htm?doctype=401loose >
This Page Is Valid HTML 4.01 Transitional!
<URL: http://4umi.com/test.htm?doctype=401strict >
This Page Is Valid HTML 4.01 Strict!

But the margins, borders, scrollbars etc. are all in the wrong places. Only
in broken mode do they behave the way I want. I know about the different box
models but only the old version seems to make sense.
Thanks,
Ivo

[Tim]

Tim wrote:

Solution: Try and get what you want working with IE *NOT* in quirks mode,
and using strict HTML, then you'll have more luck.

"Ivo" <[e-mail]> posted:
Well thanks. This is exactly what I am doing.
Here are the results:
<URL: http://4umi.com/test.htm?doctype=401loose >
This Page Is Valid HTML 4.01 Transitional!
<URL: http://4umi.com/test.htm?doctype=401strict >
This Page Is Valid HTML 4.01 Strict!

But the margins, borders, scrollbars etc. are all in the wrong places. Only
in broken mode do they behave the way I want. I know about the different box
models but only the old version seems to make sense.

I really can't see what you're trying to do, the examples are too obscure.
And I'm sure I'm not the only one (I don't see a plethora of other replies,
or any at all). Trying your pages in a Mozilla based browser just looks
plain weird, MSIE no better. We can't see what you're trying to do, we
can't see your browser, stick a screenshot somewhere.

And we can't know what's in your mind, a better description is needed.
Your original one didn't really make a great deal of sense to me. Maybe
some of your problems are to do with the scripting you've used. I don't do
scripting. Remember that "pixel perfection" is an impossible goal with
HTML, and even attempting it can cause more problems than you'll forsee.

--
If you insist on e-mailing me, use the reply-to address (it's real but
temporary). But please reply to the group, like you're supposed to.

This message was sent without a virus, please delete some files yourself.

[Ivo]

"Tim" wrote

Tim wrote:

We can't see what you're trying to do, we
can't see your browser, stick a screenshot somewhere.
URL of a pixelperfect screenshot:
< http://4umi.com/web/css/ccstest.jpg >
Testpage again:
< http://4umi.com/test.htm >
And we can't know what's in your mind, a better description is needed.
Your original one didn't really make a great deal of sense to me. Maybe
some of your problems are to do with the scripting you've used. I don't do scripting. Remember that "pixel perfection" is an impossible goal with
HTML, and even attempting it can cause more problems than you'll forsee.

I know, and that is why I was so surprised at first when (in IE quirks mode)
it just did exactly what I had in mind. That led me to believe it shouldn't
be too difficult in other modes and browsers too...

Another attempt at a description:
A main content area, with its own scrollbar, surrounded by a top bar, a
footer bar, and side panes left and right. The right pane should start at
the top (go 'over' the top bar) and the left pane should start below the top
bar but go all the way to the bottom (go 'over' the bottom bar).
In ASCII art:
+-------------+
|----------| |
| | | |
| | | |
| | | |
| |----------|
+-------------+

For example in IE quirks mode, the main area has a scrollbar against the
side of the right pane, where one would expect it, but in standards mode it
is hidden behind the right pane and I can't get it back in place.
Any help would be much appreciated,
Ivo

[Alec Nasher]

"Ivo" <[e-mail]> wrote

A main content area, with its own scrollbar, surrounded by a top bar, a
footer bar, and side panes left and right. The right pane should start at
the top (go 'over' the top bar) and the left pane should start below the
topbar but go all the way to the bottom (go 'over' the bottom bar).
In ASCII art:
+-------------+
|----------| |
| | | |
| | | |
| | | |
| |----------|
+-------------+

What you want is not possible with CSS. The fact that IE quirks does it
nevertheless means nothing ;-) These mutual interdependencies you describe
are still only possible with tables:

<table>
<tr>
<td colspan="2"> Top </td>
<td rowspan="2"> Right </td>
</tr>
<tr>
<td rowspan="2"> Left </td>
<td> Centre </td>
</tr>
<tr>
<td colspan="2"> Bottom </td>
</tr>
</table>

It does make you wonder about the limits of CSS as a language.
--
Alec

[Claire Tucker]

On Wed, 28 Jul 2004 01:24:35 +0200, "Alec Nasher" <[e-mail]>
wrote:

"Ivo" <[e-mail]> wrote

+-------------+
|----------| |
| | | |
| | | |
| | | |
| |----------|
+-------------+
What you want is not possible with CSS.

[snip]It does make you wonder about the limits of CSS as a language.

Really?

<html>
<head>
<title>A Wacky Layout</title>
<style type="text/css">
body {
background: #000000;
color: #ffffff;
}
#main {
background: #ffffff;
color: #000000;
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
overflow: scroll;
}
#top, #left, #bottom, #right {
background: #000000;
color: #ffffff;
position: absolute;
}
#top, #bottom {
width: 90%;
height: 10%;
}
#left, #right {
width: 10%;
height: 90%;
}
#top {
top: 0;
left: 0;
}
#bottom {
bottom: 0;
right: 0;
}
#left {
left: 0;
top: 10%;
}
#right {
right: 0;
top: 0;
}
</style>
</head>
<body>
<div id="top">
<h1>A Wacky Layout</h1>
</div>
<div id="main">
<p>Blah blah blah</p>
</div>
<div id="left">
<ul>
<li>About</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div>
<div id="right">
<p>Find out more about xyz at pqr.</p>
</div>
<div id="bottom">
<address>This page is maintained by Joe Shmoe.</address>
</div>
</body>
</html>
There's a start. It needs work to make it pretty, and I skipped a few
good practices to make this overly-long example a bit shorter, but it
certainly creates the layout the original poster wanted in Opera,
Mozilla and Internet Explorer for Windows.

Also, if I click the "Author/User Mode Toggle" button in Opera, the
page becomes a nice, sensible, linear document, helped by the order
the different sections appear in the markup.

The question remains, of course, why you'd want a layout like this in
the first place. I'm sure the original poster has his reasons, though.
:)

All the best,
-Claire

Note: the above code contains the minimum necessary to accompany my
point. It's not intended to be a general example of recommended
HTML/CSS practices.