 |
|
|
|
|
|
| |
| |
|
|
|
|
| |
| |
|
|
>> Apparently simply setting
>>
>> h1 {display: inline;}
>>
>> somehow *doesn't* make <h1> display inline, but if you also make the
>> following <p> tag inline, the correct result is obtained. I have
>> absolutely no idea why the hell that works, and whether it works in
>> all browsers or whether it's just a Firefox bug.
>
> http://www.w3.org/TR/CSS2/visuren.html#display-prop
>
> It's "inline" in relation to previous element. But h1 in your code has
> no previous element. p has h1 as previous element, and thus get inlined
> next to h1 when it too gets display:inline.
Hmm, so why doesn't the next heading tag get inlined into the previous
paragraph?
>> (As an aside, IE7 seems totally unable to display this particular
>> XHTML page at well, which is weird...)
>
> no, weird is to expect IE to be able to display standards-compliant
> content. Sometimes it does, most times doesn't.
It's not that it displays it *wrong*, it just point-blank refuses to
open it at all. Like it doesn't understand what XHTML is or something...
--
http://blog.orphi.me.uk/
http://www.zazzle.com/MathematicalOrchid*
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
>> Turn off margins on *everything*? Isn't that a little OTT?
>
> yes, but does exactly what your example needed.
>
> In any case, it's very common to find that rule in most css files and
> then specify padding/margin per element in need.
Well, yes, I suppose the other possibility is to override *everything*,
so that I know that the spacing will be the same on all browsers, so I
only need to test it on one...
>> Um... JQuery is a library for writing JavaScript. How is that relevant
>> to building a static web page?
>
> You wanted a file tree to collapse or expand tree nodes and that is best
> served on the client via javascript.
Oh, right. I was planning to use JS to expand and collapse the tree, not
to actually *generate* it.
>> So... you transform the page on the client-side? Why in the name of
>> God would you do that?
>
> so you don't need to waste bandwidth?
Not really relevant here.
If you generate a static page, then if JS is unavailable for some
reason, the tree itself will at least display. You just won't be able to
collapse it. If you use JS to actually generate the tree, then with no
JS you see nothing. (And search engines can't index it either, because
they can't see client-side generated content. Not that *that* is
particularly relevant for this project either...)
> Think GMail:
I'm not building GMail. Thankfully!
--
http://blog.orphi.me.uk/
http://www.zazzle.com/MathematicalOrchid*
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Le 13/09/2010 21:56, Orchid XP v8 nous fit lire :
>>> Turn off margins on *everything*? Isn't that a little OTT?
>>
>> yes, but does exactly what your example needed.
>>
>> In any case, it's very common to find that rule in most css files and
>> then specify padding/margin per element in need.
>
> Well, yes, I suppose the other possibility is to override *everything*,
> so that I know that the spacing will be the same on all browsers, so I
> only need to test it on one...
You are far too optimistic.
(and even IE has a glitch mode: the very same document can be rendered
with either the standard html+css or the old html engine... all
triggered by some fancy first line... in doubt, it revert to old engine!)
If you keep feature to minimum, you have hope... but stay away of round
corner, shadows and other "new" things. I guess that even table is a
doomed tag. (and do not ask for fancy bullet in any list...)
And firefox might display an xml document when served by a server, but
not as a file:// (and if the xlt are not on the same server, it won't
allow it!)
And YMMV with each subversion of each browser!
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Orchid XP v8 escreveu:
>>> Apparently simply setting
>>>
>>> h1 {display: inline;}
>>>
>>> somehow *doesn't* make <h1> display inline, but if you also make the
>>> following <p> tag inline, the correct result is obtained. I have
>>> absolutely no idea why the hell that works, and whether it works in
>>> all browsers or whether it's just a Firefox bug.
>>
>> http://www.w3.org/TR/CSS2/visuren.html#display-prop
>>
>> It's "inline" in relation to previous element. But h1 in your code
>> has no previous element. p has h1 as previous element, and thus get
>> inlined next to h1 when it too gets display:inline.
>
> Hmm, so why doesn't the next heading tag get inlined into the previous
> paragraph?
because paragraphs are display:block by default?
--
a game sig: http://tinyurl.com/d3rxz9
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Orchid XP v8 escreveu:
> Oh, right. I was planning to use JS to expand and collapse the tree, not
> to actually *generate* it.
>
>>> So... you transform the page on the client-side? Why in the name of
>>> God would you do that?
>>
>> so you don't need to waste bandwidth?
>
> Not really relevant here.
>
> If you generate a static page, then if JS is unavailable for some
> reason, the tree itself will at least display.
I was thinking you were planning to generate a new tree server-side
everytime the user wanted to expand/collapse the tree.
You indeed can generate the tree server-side. What's the problem with
nested ul's again?
--
a game sig: http://tinyurl.com/d3rxz9
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
On 13/09/2010 10:14 PM, nemesis wrote:
> You indeed can generate the tree server-side. What's the problem with
> nested ul's again?
I want the other columns (e.g., timestamp, attributes, owner, etc.) to
line up vertically.
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
>> Hmm, so why doesn't the next heading tag get inlined into the previous
>> paragraph?
>
> because paragraphs are display:block by default?
True - but that still doesn't explain how the spacing is still correct.
(I.e., there's more space around a heading than there is around a
paragraph.)
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
On 13/09/2010 09:15 PM, Le_Forgeron wrote:
> You are far too optimistic.
Well that's officially a first! ;-)
> (and even IE has a glitch mode: the very same document can be rendered
> with either the standard html+css or the old html engine... all
> triggered by some fancy first line... in doubt, it revert to old engine!)
Yes, all modern browsers appear to do this. If there's no declaration
saying what version of HTML/XHTML/XML this document is, the browser goes
into "quirks mode", where it attempts to emulate the broken behaviour of
obsolete browsers, which old web pages sometimes depend on. If you put
in all the proper declarations, you get standards-compliance mode. (And
if you don't put in those declarations, the W3C validator complains
bitterly.)
The puzzling thing is that W3C designed it so you can't just write a
line that says "this is XHTML v1". You have to put in half a dozen lines
reiterating this information...
> And firefox might display an xml document when served by a server, but
> not as a file:// (and if the xlt are not on the same server, it won't
> allow it!)
So far, Firefox has displayed everything I've asked of it. The same
cannot be said for IE...
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
And lo On Sun, 12 Sep 2010 13:21:32 +0100, Orchid XP v8 <voi### [at] dev null>
did spake thusly:
> OK, here's a couple of little questions that somebody here might know
> the answer to...
<snip>
> Is there some way I can style it so that it shows up more like
>
> Introduction
> (Show/hide)
>
>
> ...real content...
.h1 {margin-bottom:0}
> or even
>
> Introduction (Show/hide)
>
>
> ...real content...
As nemesis states
.h1 {display: inline}
> If so, how do I do it?
>
>
>
> 2. I want to build a file tree where you can collapse or expand tree
> nodes. The obvious way to do this is with the <ul> element. However, I
> also want each file to have attributes, a creation date, and so forth,
> and all these columns should line up vertically. The obvious way to do
> that is with a table. But it can't be a table and a list at the same
> time!
>
> I could use nested tables I suppose, but nested tables are EVIL! Is
> there some more semantically-transparent way that I can do this?
>
> Root 2009-09-12 Ahsc
> Resources 2009-09-10 Ahsc
> Main.css 2009-09-10 Ahsc
> Main.js 2009-09-10 Ahsc
> Packages 2009-09-12 Ahsc
> ansi-terminal 2009-09-12 Ahsc
> ...
Other than using absolute positioning why not:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
ul, li {list-style-type: none; margin: 0px; padding: 0px;}
span {width: 100px; display:inline-block;}
.indent{margin-left: 100px;}
.col1 {margin-left: 200px;}
.col2 {margin-left: 100px;}
</style>
</head>
<body>
<ul>
<li><span>Root</span><span
class="col1">2009-09-12</span><span>Ahsc</span></li>
<ul class="indent">
<li><span>Resources</span><span
class="col2">2009-09-10</span><span>Ahsc</span></li>
<ul class="indent">
<li><span>Main.css</span><span>2009-09-10</span><span>Ahsc</span></li>
<li><span>Main.js</span><span>2009-09-10</span><span>Ahsc</span></li>
</ul>
<li><span>Packages</span><span
class="col2">2009-09-12</span><span>Ahsc</span></li>
<ul class="indent">
<li><span>ansi-terminal</span><span>2009-09-12</span><span>Ahsc</span></li>
</ul>
</ul>
</ul>
</body>
</html>
Works in IE7, Firefox, Opera and Chrome. I mean technically you don't need
the ul li as you're indenting manually, but it does keep it tidy both in
code and for text readers.
--
Phil Cook
--
I once tried to be apathetic, but I just couldn't be bothered
http://flipc.blogspot.com
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
>> Is there some way I can style it so that it shows up more like
>>
>> Introduction
>> (Show/hide)
>>
>>
>> ...real content...
>
> .h1 {margin-bottom:0}
Wouldn't that mean that the margin between the header and the real
content would now be incorrect?
>> or even
>>
>> Introduction (Show/hide)
>>
>>
>> ...real content...
>
> As nemesis states
> .h1 {display: inline}
Yeah, that's what I went with ultimately.
> Other than using absolute positioning why not:
>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml">
> <head>
> <style>
> ul, li {list-style-type: none; margin: 0px; padding: 0px;}
> span {width: 100px; display:inline-block;}
> .indent{margin-left: 100px;}
> .col1 {margin-left: 200px;}
> .col2 {margin-left: 100px;}
> </style>
> </head>
> <body>
> <ul>
> <li><span>Root</span><span
> class="col1">2009-09-12</span><span>Ahsc</span></li>
> <ul class="indent">
> <li><span>Resources</span><span
> class="col2">2009-09-10</span><span>Ahsc</span></li>
> <ul class="indent">
> <li><span>Main.css</span><span>2009-09-10</span><span>Ahsc</span></li>
> <li><span>Main.js</span><span>2009-09-10</span><span>Ahsc</span></li>
> </ul>
> <li><span>Packages</span><span
> class="col2">2009-09-12</span><span>Ahsc</span></li>
> <ul class="indent">
> <li><span>ansi-terminal</span><span>2009-09-12</span><span>Ahsc</span></li>
> </ul>
> </ul>
> </ul>
> </body>
> </html>
>
> Works in IE7, Firefox, Opera and Chrome. I mean technically you don't
> need the ul li as you're indenting manually, but it does keep it tidy
> both in code and for text readers.
I always try to design my pages so that if you totally disable all CSS,
it still displays sensibly. It might not be pretty, but it's readable.
Then I apply CSS to make it pretty.
Not sure you need to use ".indent"; why not just "li ul" or something?
Anyway, absolute positioning seems to work fine, but for the minor
detail that I need to figure out how wide the columns are supposed to be...
Also, whenever I try to open an XHTML document in IE (v7), it asks me
what application I want to use it open it with, and defaults to Firefox.
I can't seem to convince it to open it. The best I can do is get it to
display a blank page.
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
|
|
