Constructing the layout for web-based applications

[Michael Schuerig]

In my experience most available books and web publication on CSS are
related to web page/site design. Little attention is payed to the
design and construction of web-based application for data management.
Yes, of course, every book on CSS and web design has a chapter on forms
and possibly lists, the same goes for sites such as A List Apart. But,
in general, coverage is disappointing -- if you're looking for help,
that is. Regarding design aspects, GUI design guidelines by Apple et
al. can be helpful.

However, there's little help when it comes to constructing the target
design out of HTML markup and CSS. My best attempt at it, as part of a
framework on top of Ruby on Rails, can be seen here

http://www.schuerig.de/michael/boilerplate/

I'm mostly pleased with the layout as it is presented by
standards-compliant browsers. Unfortunately, they are only a minority,
especially when it comes to corporate desktop computers. Thus, as it
is, the usefulness of my stuff is regrettably restricted. Of course, I
want to make it work on Internet Explorer, too, but I'm having a hard
time finding information or sample code (HTML/CSS) that helps me with
this task.

Michael

--
Michael Schuerig There is no matrix,
mailto:michael@ schuerig.de only reality.
http://www.schuerig.de/michael/ --Lawrence Fishburn

[Jim Moe]

Re: Constructing the layout for web-based applications

Michael Schuerig wrote:[color=blue]
>
> http://www.schuerig.de/michael/boilerplate/
>
> I'm mostly pleased with the layout as it is presented by
> standards-compliant browsers. Unfortunately, they are only a minority,
> especially when it comes to corporate desktop computers. [...]
>[/color]
Perhaps you could enlighten us what the differences in page rendering
are between IE and everyone else. I see no discernalbe difference.
If cross-browser compatibility is a concern, I suggest using HTML 4.01
Strict rather than XHTML loose. Presentation is the most consistent for
4.01 Strict.
If you insist on XHTML, delete the "<?xml ...>" line (it confuses IE),
and serve the page as "Content-type: application/xhtml+xml". There are
other issues as well and they are covered in Appendix C of the XHTML spec
<http://www.w3.org/TR/xhtml1/#guidelines>.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Michael Schuerig]

Re: Constructing the layout for web-based applications

Jim Moe wrote:
[color=blue]
> Michael Schuerig wrote:[color=green]
>>
>> http://www.schuerig.de/michael/boilerplate/
>>
>> I'm mostly pleased with the layout as it is presented by
>> standards-compliant browsers. Unfortunately, they are only a
>> minority, especially when it comes to corporate desktop computers.
>> [...]
>>[/color]
> Perhaps you could enlighten us what the differences in page
> rendering
> are between IE and everyone else. I see no discernalbe difference.[/color]

I take it you've only looked at the description page. Have a look at the
(almost) live demo pages.

http://www.schuerig.de/michael/boilerplate/demo/list_tasks.html

http://www.schuerig.de/michael/boilerplate/demo/form_task.html

http://www.schuerig.de/michael/boilerplate/demo/list_employees.html

http://www.schuerig.de/michael/boilerplate/demo/form_employee.html

If they render correctly -- i.e. roughly the same as the screenshots --
on your version of IE, I'm on cloud nine. Unfortunately, chances are
very slim.
[color=blue]
> If cross-browser compatibility is a concern, I suggest using HTML
> 4.01
> Strict rather than XHTML loose. Presentation is the most consistent
> for 4.01 Strict.[/color]

I haven't yet decided on the trade-offs. As XHTML 1.1 Strict my pages
pass the W3C validator (generated, not necessarily the demos). As HTML
4.01 Strict I get erros related to improper nesting.

Michael

--
Michael Schuerig The more it stays the same,
mailto:michael@ schuerig.de The less it changes!
http://www.schuerig.de/michael/ --Spinal Tap, The Majesty of Rock

[Spartanicus]

Re: Constructing the layout for web-based applications

Jim Moe <jmm-list.AXSPAMGN@s ohnen-moe.com> wrote:
[color=blue]
> If you insist on XHTML, delete the "<?xml ...>" line (it confuses IE),
>and serve the page as "Content-type: application/xhtml+xml".[/color]

The latter does a bit more than confuse IE.

--
Spartanicus

[Spartanicus]

Re: Constructing the layout for web-based applications

Michael Schuerig <michael@schuer ig.de> wrote:
[color=blue]
>As XHTML 1.1 Strict my pages
>pass the W3C validator (generated, not necessarily the demos).[/color]

Serving XHTML 1.1 as text/html violates w3c guidelines.
[color=blue]
>As HTML 4.01 Strict I get erros related to improper nesting.[/color]

Then fix that.

--
Spartanicus

[Jim Moe]

Re: Constructing the layout for web-based applications

Michael Schuerig wrote:[color=blue]
>
> I take it you've only looked at the description page. Have a look at the
> (almost) live demo pages.
> http://www.schuerig.de/michael/boile...ist_tasks.html
>[/color]
You have a number of errors in boilerplate.css .
When boilerplate.css is prevented from loading, the page looks the same
in IE and Mozilla. So it is your CSS that is breaking IE.
You are using a number of elements of CSS that IE does not comprehend.
IE is mostly CSS1 compliant, and sprinkles in a few CSS2 elements it deems
worthy. Things like "#menu > ul" are a mystery to IE. Use no non-alpha
characters besides "." and "#".
There are a large number of Javascript warnings from the main page.

"scriptaculous" ?

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Michael Schuerig]

Re: Constructing the layout for web-based applications

Jim Moe wrote:
[color=blue]
> Michael Schuerig wrote:[color=green]
>>
>> I take it you've only looked at the description page. Have a look at
>> the (almost) live demo pages.
>> http://www.schuerig.de/michael/boile...ist_tasks.html
>>[/color]
> You have a number of errors in boilerplate.css .
> When boilerplate.css is prevented from loading, the page looks the
> same
> in IE and Mozilla. So it is your CSS that is breaking IE.
> You are using a number of elements of CSS that IE does not
> comprehend.
> IE is mostly CSS1 compliant, and sprinkles in a few CSS2 elements it
> deems worthy. Things like "#menu > ul" are a mystery to IE. Use no
> non-alpha characters besides "." and "#".[/color]

Yes, there are errors. display:inline-block is not yet in any finalized
CSS recommendation. It is in the CSS2.1 working draft. I don't see how
to do without inline-block (or its Gecko-equivalent
display:-moz-inline-box).

Yes, I know that IE is mostly CSS1 compliant.

Knowing these things is part of the problem statement. It helps, of
course, to clearly articulate what the problem is. Currently, I'm
looking for solutions to get what I already have to work with IE.
[color=blue]
> There are a large number of Javascript warnings from the main page.[/color]

There is no JavaScript on the main page at all. The demo pages use
JavaScript copiously.
[color=blue]
> "scriptaculous" ?[/color]

Excuse me? I'm not sure what you are trying to say. In order to achieve
successful communication you would have to be a little more explicit.

Scriptaculous is a set of JavaScripts: <http://script.aculo.us/>


Michael

--
Michael Schuerig Most people would rather die than think.
mailto:michael@ schuerig.de In fact, they do.
http://www.schuerig.de/michael/ --Bertrand Russell

[Jim Moe]

Re: Constructing the layout for web-based applications

Michael Schuerig wrote:[color=blue][color=green]
>>
>> You have a number of errors in boilerplate.css .[/color]
>
> Yes, there are errors. display:inline-block is not yet in any finalized
> CSS recommendation. It is in the CSS2.1 working draft. I don't see how
> to do without inline-block (or its Gecko-equivalent
> display:-moz-inline-box).
>[/color]
You cannot have IE compatibility and use non-IE features. You must dumb
down your CSS to match IE.[color=blue]
>[color=green]
>> There are a large number of Javascript warnings from the main page.[/color]
>[/color]
Oops. It is the list_tasks.html page.


--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Alan J. Flavell]

Re: Constructing the layout for web-based applications

On Fri, 26 Aug 2005, Jim Moe wrote:
[color=blue]
> You cannot have IE compatibility and use non-IE features.[/color]

That depends on what you understand by "compatibility" . If you design
for graceful fallback on lesser browsers, IE will happily reveal
itself as a lesser browser. Users aren't in the habit of viewing your
pages on several browsers and awarding marks for identity of
rendering: what they want is convenient access to your /content/
(although it has to be admitted that all too many pages are designed
solely on considerations set out by the sponsor and the designer, with
precious little thought for the end user. Quite what use that is,
is left as an exercise for the student...).
[color=blue]
> You must dumb down your CSS to match IE.[/color]

I can't agree. If you design for graceful fallback, you can get even
better results on WWW-conforming browsers, while still getting more
than adequate results on that lesser browser, as well as on a wide
range of other browsing situations.

Whereas those who design only for the lesser browser get - at best -
poor results on www-compatible browsers - all too often, web pages
that simply don't work at all on them. So unless you're being bribed
to reject anyone who cares about the browser that they use, I'd
recommend graceful fallback.

[Spartanicus]

Re: Constructing the layout for web-based applications

Jim Moe <jmm-list.AXSPAMGN@s ohnen-moe.com> wrote:
[color=blue][color=green]
>> Yes, there are errors. display:inline-block is not yet in any finalized
>> CSS recommendation. It is in the CSS2.1 working draft. I don't see how
>> to do without inline-block (or its Gecko-equivalent
>> display:-moz-inline-box).
>>[/color]
> You cannot have IE compatibility and use non-IE features. You must dumb
>down your CSS to match IE.[/color]

display:inline-block is supported by IE.

--
Spartanicus

[Christoph Päper]

Re: Constructing the layout for web-based applications

Spartanicus:[color=blue]
> display:inline-block is supported by IE.[/color]

Half-heartedly, though.

[Jim Moe]

Re: Constructing the layout for web-based applications

Alan J. Flavell wrote:[color=blue]
>[color=green]
>>You must dumb down your CSS to match IE.[/color]
>
> I can't agree. If you design for graceful fallback, you can get even
> better results on WWW-conforming browsers, while still getting more
> than adequate results on that lesser browser, as well as on a wide
> range of other browsing situations.
>[/color]
Okay, my own limitations are showing then.
Nevertheless, the OP's CSS is so over IE's head that IE does not even
bother to display some of the content; not a graceful fallback. The OP
will have to start stripping out features until he finds which parts IE
stumbles over.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Michael Schuerig]

Re: Constructing the layout for web-based applications

Jim Moe wrote:
[color=blue]
> Michael Schuerig wrote:[color=green][color=darkred]
>>>
>>> You have a number of errors in boilerplate.css .[/color]
>>
>> Yes, there are errors. display:inline-block is not yet in any
>> finalized CSS recommendation. It is in the CSS2.1 working draft. I
>> don't see how to do without inline-block (or its Gecko-equivalent
>> display:-moz-inline-box).
>>[/color]
> You cannot have IE compatibility and use non-IE features. You must
> dumb down your CSS to match IE.[/color]

I know and I knew before, but that's not the interesting part. What I
didn't know, still don't know, and why I asked for advice in the first
place is: how?

Michael

--
Michael Schuerig You can twist perceptions
mailto:michael@ schuerig.de Reality won't budge
http://www.schuerig.de/michael/ --Rush, Show Don't Tell

[Leonard Blaisdell]

Re: Constructing the layout for web-based applications

In article <deocrk$ih1$1@n ewsreader3.netc ologne.de>,
Michael Schuerig <michael@schuer ig.de> wrote:
[color=blue]
> I know and I knew before, but that's not the interesting part. What I
> didn't know, still don't know, and why I asked for advice in the first
> place is: how?[/color]

Search for "CSS IE Bugs" in google. Eric Meyer used to maintain a CSS
compatibility chart, but I can't find a recent version. It probably got
too unwieldy to maintain. The search may not answer your question, but
it'll give you an idea of your problem.

leo

--
<http://web0.greatbasin.net/~leo/

[Jim Moe]

Re: Constructing the layout for web-based applications

Michael Schuerig wrote:[color=blue][color=green]
>>
>> You cannot have IE compatibility and use non-IE features. You must
>> dumb down your CSS to match IE.[/color]
>
> I know and I knew before, but that's not the interesting part. What I
> didn't know, still don't know, and why I asked for advice in the first
> place is: how?
>[/color]
I've mentioned at least 4 different areas for you to explore. Which of
these (IE bugs, Javascript errors/warnings, CSS validation errors, CSS
features IE does not support, use of non-standard features) is difficult
to understand?

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)