default css for browsers

[Xah Lee]

is there somewhere i can find the default css for browsers?

e.g. what's the usual rendering in terms of css for <p>, <ul> etc.

in particular, right now i'm interested in creating a style similar to
<ul> and <li>. Of course i can eyeball and come up with a css, but want
to be sure.

----------

a saparate question: do browers today actually render their
presentation thru a internal css?

Xah
xa*@xahlee.org
∑ http://xahlee.org/

[Spartanicus]

"Xah Lee" <xa*@xahlee.org> wrote:

is there somewhere i can find the default css for browsers?
No such thing. They all use different default styles.

That said, w3c published a sample default stylesheet
http://www.w3.org/TR/REC-CSS2/sample.html
e.g. what's the usual rendering in terms of css for <p>, <ul> etc.

in particular, right now i'm interested in creating a style similar to
<ul> and <li>.
Sounds dodgy.
a saparate question: do browers today actually render their
presentation thru a internal css?

Modern browsers typically yes.

--
Spartanicus

[Xah Lee]

Spartanicus wrote:

That said, w3c published a sample default stylesheet
http://www.w3.org/TR/REC-CSS2/sample.html

according to it, <li> is
li {display:list-item}

but that' doesn't seems to capture it. If in my html page i use

p.l {display:list-item}

it doesn't seems to have any effect.

currently i emulate li by:
p.l{margin-top:5px; margin-bottom:5px}

sample page:
http://xahlee.org/Periodic_dosage_di...nga_pemci.html

Xah
xa*@xahlee.org
∑ http://xahlee.org/

[Roedy Green]

On 2 Sep 2005 14:31:10 -0700, "Xah Lee" <xa*@xahlee.org> wrote or
quoted :

p.l {display:list-item}

The catch is p comes with baggage, including a display:block. You have
to fiddle to make sure your choice overrides.

A crude starting point would be:

p.l {display:list-item !important}
--
Canadian Mind Products, Roedy Green.
http://mindprod.com Again taking new Java programming contracts.

[kchayka]

Xah Lee wrote:

currently i emulate li by:
p.l{margin-top:5px; margin-bottom:5px}

http://xahlee.org/Periodic_dosage_di...nga_pemci.html

This begs the question: why don't you just use list markup instead of
faking it?

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Xah Lee]

> why don't you just use list markup instead of

faking it?
some personal reasons...

• with <li>, some browser will not copy the browser generated bullet
when doing the copy & paste.
• with my own list, i have more flexibility, for example, change my
bullet in tex directly without mucking with more style.
• with <li>, it needs <ul></ul>, which adds edting drudgery.
....

but the thing is, if CSS is complete and moder browsers use it
internally for presentation, there really should have css
representation of <li> style.

Xah
xa*@xahlee.org
∑ http://xahlee.org/
kchayka wrote: Xah Lee wrote:

currently i emulate li by:
p.l{margin-top:5px; margin-bottom:5px}

http://xahlee.org/Periodic_dosage_di...nga_pemci.html

This begs the question: why don't you just use list markup instead of
faking it?

[Roedy Green]

On 2 Sep 2005 15:46:47 -0700, "Xah Lee" <xa*@xahlee.org> wrote or
quoted :

• with <li>, it needs <ul></ul>, which adds edting drudgery.

Presumably though the indent works from <ul> tags, not the <li>, so I
would expect your <p class="l"> not to indent.

That busines of browsers chopping the bullets and numbering when you
copy paste is a real bear. I have wasted many hours in my life
restoring them.
--
Canadian Mind Products, Roedy Green.
http://mindprod.com Again taking new Java programming contracts.

[Richard Lewis]

Hi,

have a look at

http://www.meyerweb.com/eric/thought...ndoing-htmlcss

The gist is, if you're using Firefox, you can find a file on your system
called html.css
(in C:\Program Files\Mozilla Firefox\res and C:\Program
Files\Netscape\Netscape Browser\res
for me, but the files are exactly the same.) which contain default .css used
by the browser

<ul> and <li> are basically:

ul {
display: block;
list-style-type: disc;
margin: 1em 0;
-moz-padding-start: 40px;
-moz-counter-reset: -html-counter 0;
}

li {
display: list-item;
-moz-float-edge: margin-box;
}

I've not tried these, and I know nothing about mozilla proprietary
properties, but it looks
quite plausible.
There's also a lot of stuff to do with stuff nested inside of lists, eg
ul ul, ul ol, ul dir, ...

all very interesting. Go to the article for more info

:)

[Spartanicus]

"Xah Lee" <xa*@xahlee.org> wrote:

That said, w3c published a sample default stylesheet
http://www.w3.org/TR/REC-CSS2/sample.html
according to it, <li> is
li {display:list-item}

but that' doesn't seems to capture it. If in my html page i use

p.l {display:list-item}

it doesn't seems to have any effect.

Because there are other default styles that you've not set
p.l{display:list-item;margin-left:1em;padding-left:1em}
sample page:
http://xahlee.org/Periodic_dosage_di...nga_pemci.html

As I suspected this is abuse of CSS to try and hide incorrect markup.

--
Spartanicus

[Darin McGrew]

[attribution restored]

kchayka <us****@c-net.us> wrote:

why don't you just use list markup instead of
faking it?

Xah Lee <xa*@xahlee.org> wrote: some personal reasons...
[snip]
but the thing is, if CSS is complete and moder browsers use it
internally for presentation, there really should have css
representation of <li> style.

Sorry, but you seem to have a fundamental misunderstanding of what CSS is
supposed to be. CSS is optional. CSS provides optional presentation
suggestions that browsers may or may not use. The underlying markup must
make sense, or those who don't use your CSS (for whatever reason) will be
stuck with a mess.
--
Darin McGrew, mc****@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp.com, http://www.HTMLHelp.com/

"If at first you don't succeed, then plug it in and try again."

[Spartanicus]

Roedy Green <lo*****@mindprod.com.invalid> wrote:

p.l {display:list-item}

The catch is p comes with baggage, including a display:block. You have
to fiddle to make sure your choice overrides.

A crude starting point would be:

p.l {display:list-item !important}

Author normal style rules trump UA default styles in the cascade, so
there is no need for the !important

--
Spartanicus

[kchayka]

Xah Lee wrote:

kchayka wrote:

why don't you just use list markup instead of
faking it?
• with my own list, i have more flexibility, for example, change my
bullet in tex directly without mucking with more style.

So you think that changing the list marker/bullet on 20 individual lines
is somehow better than changing it once in the CSS? Uh, OK... I guess...
What happens when you want to change it in all pages?
• with <li>, it needs <ul></ul>, which adds edting drudgery.
Now that's silly. 2 lines isn't even worth mentioning, especially when
it is more correct markup than what you appear to be doing. You add far
more characters by adding list markers in each paragraph. That would be
drudgery for me.
but the thing is, if CSS is complete and moder browsers use it
internally for presentation, there really should have css
representation of <li> style.

I don't really understand what you're trying to say here, but no matter.
You can style both <ul> and <li> just as easily as <p>, in case you
don't care for the default list styling. And in your case, <li> is
semantically better.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Jukka K. Korpela]

Spartanicus <in*****@invalid.invalid> wrote:

"Xah Lee" <xa*@xahlee.org> wrote:

is there somewhere i can find the default css for browsers?
No such thing. They all use different default styles.

Besides, they have presentational idiosyncrasies that are not describable
in CSS, and they may have failed to present their default style sheet (real
or virtual) to the public. For example, for IE, we need to infer things
from the browser's behavior. It's more difficult than you might think,
since the rendering of an element depends on context. (For example,
vertical margins for elements may disappear if the element is the content
of a table cell - rather naturally, but it complicates things.)
That said, w3c published a sample default stylesheet
http://www.w3.org/TR/REC-CSS2/sample.html

That sample stylesheet makes obscure claims on describing carefully the
actual browser behavior _and_ on recommending how browsers should behave.
Don't rely on it at all, though you might use it as a checklist of things
that browsers _might_ do and you _might_ wish to do.

(Besides, CSS 2 is effectively dead and CSS 2.1 isn't born yet. Not
surprisingly, the sample style sheets in CSS 1, CSS 2, and CSS 2.1 are
all different, in essential ways.)

The morale is that when writing an author style sheet, you should be
prepared to anything reasonably imaginable in browsers' default style
sheets, and somewhat more. For example, if you would like to make the
indentation of list smaller than what browsers typically use, you should
set all of the following: padding-left and margin-left for the list element
(ul or ol) and for the list item elements (li). You cannot know, or you
should at least pretend you don't know, which of them a browser uses for
the indentation. So if you naively just set e.g. margin-left: 1.5em for
a ul element, you might actually _increase_ the nesting, on browsers that
by default use padding-left to create considerable indentation (and
default margin-left to zero).

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Quasimido CSS]

Roedy Green <lo*****@mindprod.com.invalid> in
news:l6********************************@4ax.com:

On 2 Sep 2005 14:31:10 -0700, "Xah Lee" <xa*@xahlee.org> wrote or
quoted :

p.l {display:list-item}
The catch is p comes with baggage, including a display:block. You have
to fiddle to make sure your choice overrides.

ah, baggage.
just coincidentally i recently solved a :hover problem when i editd the element description.
had been
p (etc)
became
a (etc)
this cleared up some characteristics that i refused to "reverse", even when I tried explicitly
"overriding" them in the styles
(yeah, this was a *really* annoying problem :-) )

A crude starting point would be:

p.l {display:list-item !important}

[Xah Lee]

Richard Lewis wrote:

http://www.meyerweb.com/eric/thought...ndoing-htmlcss
...
Thanks a lot! Very interesting. Quality answer.

Xah
xa*@xahlee.org
∑ http://xahlee.org/
Hi,
have a look at
http://www.meyerweb.com/eric/thought...ndoing-htmlcss

The gist is, if you're using Firefox, you can find a file on your system
called html.css
(in C:\Program Files\Mozilla Firefox\res and C:\Program
Files\Netscape\Netscape Browser\res
for me, but the files are exactly the same.) which contain default .css used
by the browser

<ul> and <li> are basically:

ul {
display: block;
list-style-type: disc;
margin: 1em 0;
-moz-padding-start: 40px;
-moz-counter-reset: -html-counter 0;
}

li {
display: list-item;
-moz-float-edge: margin-box;
}

I've not tried these, and I know nothing about mozilla proprietary
properties, but it looks
quite plausible.
There's also a lot of stuff to do with stuff nested inside of lists, eg
ul ul, ul ol, ul dir, ...

all very interesting. Go to the article for more info

:)