css question, blockquote/li tags

[Spagman]

hi guys, im using the blockquote tag to dictate a different font colour, and
inside it, the li tag to do a list with a custom gif as a bullet.

can i adjust the indent amount that the li tag uses by default?

please see the attached pic for a description of what i am after, below is
the css im am currently using

blockquote {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #EBF1E0;
list-style-position: outside;
list-style-image: url(../navimages/bullet.gif);
list-style-type: square;
left: 9px;
}

then for the bullet points im just using the li tag to start a list.

any advice appreciated

image : http://www.xboxworld.com.au/images/misc/li_tag.gif

 

[Spagman]

actually this is the code;

blockquote {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #EBF1E0;
list-style-position: outside;
list-style-image: url(../navimages/bullet.gif);
list-style-type: square;
}

the one in my first post had some stuff i was messing with. if anyone can
help positioning the bullet points that would rock.

Spagman

 

[brucie]

in post: <

hi guys, im using the blockquote tag to dictate a different font colour,

BLOCKQUOTE is for long quotations (block-level content)
http://www.w3.org/TR/html401/struct/text.html#edef-BLOCKQUOTE

and inside it, the li tag to do a list with a custom gif as a bullet.
can i adjust the indent amount that the li tag uses by default?

yes by using margins and paddings on the <li> after specifying them as 0

please see the attached pic

please don't attach anything

font-family: Verdana, Arial, Helvetica, sans-serif;

specify once in your body css and inheritance will usually populate it
through the rest of the document.

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

font-size: 11px;

unreadably small and use % to specify font sizes 100% the smallest or
don't specify a size at all so its the visitors preferred default size

list-style-position: outside;

the pic below shows inside; not outside;

list-style-image: url(../navimages/bullet.gif);
list-style-type: square;

list-style-type not needed. delete it

left: 9px;

only applies to positioned elements, delete it. use margins/paddings

image : http://www.xboxworld.com.au/images/misc/li_tag.gif

http://moreshit.usenetshit.info/a-ul-li-margin-thingy.shit

 

[Spagman]

thanks. basically i was using blockquote so i could just control the colour
of the text within that area simply and easily. but i guess now i can apply
that to the <li> tag and avoid using blockquote.

and yer, your method of using padding etc on <li> will fix an issue that im
seeing in Mozilla as well.

thanks for the sample URL, i will redo my css the way you have done it
there.


--
-Spagman



in post: <

hi guys, im using the blockquote tag to dictate a different font colour,

BLOCKQUOTE is for long quotations (block-level content)
http://www.w3.org/TR/html401/struct/text.html#edef-BLOCKQUOTE

and inside it, the li tag to do a list with a custom gif as a bullet.
can i adjust the indent amount that the li tag uses by default?

yes by using margins and paddings on the <li> after specifying them as 0

please see the attached pic

please don't attach anything

font-family: Verdana, Arial, Helvetica, sans-serif;

specify once in your body css and inheritance will usually populate it
through the rest of the document.

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

font-size: 11px;

unreadably small and use % to specify font sizes 100% the smallest or
don't specify a size at all so its the visitors preferred default size

list-style-position: outside;

the pic below shows inside; not outside;

list-style-image: url(../navimages/bullet.gif);
list-style-type: square;

list-style-type not needed. delete it

left: 9px;

only applies to positioned elements, delete it. use margins/paddings

image : http://www.xboxworld.com.au/images/misc/li_tag.gif

http://moreshit.usenetshit.info/a-ul-li-margin-thingy.shit

 

[Spagman]

http://www.xboxworld.com.au/previews/preview.php?idPreview=419

Looking loads better, thanks heaps! It was much too indented earlier.

Now it displays better in Mozilla than it does in IE for some reason though


--
-Spagman



thanks. basically i was using blockquote so i could just control the colour
of the text within that area simply and easily. but i guess now i can apply
that to the <li> tag and avoid using blockquote.

and yer, your method of using padding etc on <li> will fix an issue that im
seeing in Mozilla as well.

thanks for the sample URL, i will redo my css the way you have done it
there.


--
-Spagman



in post: <

hi guys, im using the blockquote tag to dictate a different font colour,

BLOCKQUOTE is for long quotations (block-level content)
http://www.w3.org/TR/html401/struct/text.html#edef-BLOCKQUOTE

and inside it, the li tag to do a list with a custom gif as a bullet.
can i adjust the indent amount that the li tag uses by default?

yes by using margins and paddings on the <li> after specifying them as 0

please see the attached pic

please don't attach anything

font-family: Verdana, Arial, Helvetica, sans-serif;

specify once in your body css and inheritance will usually populate it
through the rest of the document.

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

font-size: 11px;

unreadably small and use % to specify font sizes 100% the smallest or
don't specify a size at all so its the visitors preferred default size

list-style-position: outside;

the pic below shows inside; not outside;

list-style-image: url(../navimages/bullet.gif);
list-style-type: square;

list-style-type not needed. delete it

left: 9px;

only applies to positioned elements, delete it. use margins/paddings

image : http://www.xboxworld.com.au/images/misc/li_tag.gif

http://moreshit.usenetshit.info/a-ul-li-margin-thingy.shit

 

[brucie]

in post: <

thanks.

you're welcome, please don't toppost, it upsets the little voices.

How am I supposed to post my replies in a newsgroup?:
http://allmyfaqs.com/faq.pl?How_to_post

basically i was using blockquote so i could just control the colour
of the text within that area simply and easily.

blockquote is for quoting chunks of text. apply the styles you want
direct to the elements (one of many options for targeting styles).

p{... style for all <p>s ...}
li{... style for all <li>s ...}
..blah{... style for only something that has the class of 'blah' ...}

e.g: <div class="blah">stuff</div>

etc etc etc

5 Selectors
http://www.w3.org/TR/REC-CSS2/selector.html

css tutorials and other fun 'n giggly css stuff:
http://www.css.nu/
http://www.mako4css.com/
http://www.richinstyle.com/
http://www.blazonry.com/css/
http://www.w3schools.com/css/
http://www.websitetips.com/css/
http://www.htmlhelp.com/reference/css/
http://www.mezzoblue.com/css/cribsheet/
http://www.pageresource.com/dhtml/indexcss.htm
http://www.webpageworkshop.co.uk/main/css_index
http://old.climbtothestars.org/coding/cssbasic/
http://www.htmlcenter.com/tutorials/index.cfm/css/
http://www.freewebmastertips.com/php/content.php3?aid=48
http://www.canit.se/~griffon/web/writing_stylesheets.html
http://www.utoronto.ca/ian/books/xhtml2/exerpt/css-4a.html
http://www.greytower.net/en/archive/articles/tsutsumi.html
http://www.intranetjournal.com/articles/200101/csstutorial1a.html
http://webmonkey.com/authoring/stylesheets/tutorials/tutorial1.html

 

[Toby Inkster]

hi guys, im using the blockquote tag to dictate a different font colour, and
inside it, the li tag to do a list with a custom gif as a bullet.

Please don't abuse the blockquote element. Blockquote should only be used
when you are quoting stuff. Also, you don't mention using <ul> -- you
ought to.

<ul class="special">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

ul.special {
margin: 0; padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
color: #EBF1E0;
list-style-position: inside;
list-style-image: url(../navimages/bullet.gif);
list-style-type: square;
}
ul.special li {
margin: 0.25em 0; padding: 0;
}

 

[Spagman]

hi guys, im using the blockquote tag to dictate a different font colour, and
inside it, the li tag to do a list with a custom gif as a bullet.

Please don't abuse the blockquote element. Blockquote should only be used
when you are quoting stuff. Also, you don't mention using <ul> -- you
ought to.

<ul class="special">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

ul.special {
margin: 0; padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
color: #EBF1E0;
list-style-position: inside;
list-style-image: url(../navimages/bullet.gif);
list-style-type: square;
}
ul.special li {
margin: 0.25em 0; padding: 0;
}

 

[Toby Inkster]

yer originally i was using <ul>, cant remember why i started using
blockquote. and why shouldnt i abuse blockquote? how can you abuse a html
tag?

From Webster's Revised Unabridged Dictionary (1913) [web1913]:
| Abuse \A*buse"\, n. [F. abus, L. abusus, fr. abuti. See {Abuse},
| v. t.]
| 1. Improper treatment or use; application to a wrong or bad
| purpose; misuse; as, an abuse of our natural powers; an
| abuse of civil rights, or of privileges or advantages; an
| abuse of language.
|
| Liberty may be endangered by the abuses of liberty,
| as well as by the abuses of power. --Madison.

The proper use of <blockquote> is for marking up large quotations. Any
other use (e.g. indenting lists) is improper use -- hence abuse.

 

[David Dorward]

yer originally i was using <ul>, cant remember why i started using
blockquote. and why shouldnt i abuse blockquote? how can you abuse a html
tag?

The same way you abuse anything...

http://dictionary.reference.com/search?q=abuse

Saying "This is a quotation" and "I want all quotations to be rendered in
blue" when you mean "This isn't a quotation, but I want it rendered in
blue" is an abuse of the markup which claims "This is a quotation".

 

[rf]

element

The proper use of <blockquote> is for marking up large quotations. Any
other use (e.g. indenting lists) is improper use -- hence abuse.

Which is explicitly mentioned in the spec.
http://www.w3.org/TR/html4/struct/text.html#h-9.2.2

<blockquote>
Note. We recommend that style sheet implementations provide a mechanism for
inserting quotation marks before and after a quotation delimited by
BLOCKQUOTE in a manner appropriate to the current language context and the
degree of nesting of quotations.

However, as some authors have used BLOCKQUOTE merely as a mechanism to
indent text, in order to preserve the intention of the authors, user agents
should not insert quotation marks in the default style.

The usage of BLOCKQUOTE to indent text is deprecated in favor of style
sheets.
</blockquote>

The abuse of blockquote has stuffed up the intention and implementation of
the element.

 

[Spagman]

yer originally i was using <ul>, cant remember why i started using
blockquote. and why shouldnt i abuse blockquote? how can you abuse a html
tag?

The same way you abuse anything...

http://dictionary.reference.com/search?q=abuse

Saying "This is a quotation" and "I want all quotations to be rendered in
blue" when you mean "This isn't a quotation, but I want it rendered in
blue" is an abuse of the markup which claims "This is a quotation".

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is



geepers. and while this goes on behind the scenes in the html code, the end
user is unaware and wouldnt probably give a poo that you used the incorrect
code reglardless.

but indenting the text is the reason i originally started using blockquote,
at the time not knowing what its real purpose was. but yer, i should be
using <ul>

thanks everyone

--Spagman

 

[Els]

yer originally i was using <ul>, cant remember why i
started using blockquote. and why shouldnt i abuse
blockquote? how can you abuse a html tag?

The same way you abuse anything...
[snip]

--
David Dorward <http://blog.dorward.me.uk/>
<http://dorward.me.uk/>
Home is where the ~/.bashrc is
[snip]

thanks everyone

Please set your newsreader to use > or | at the beginning of the
lines of posts you respond to, it makes it a lot easier to
distinguish between what you wrote and what the previous poster
wrote.

 

[brucie]

in post: <

Please set your newsreader to use > or | at the beginning of the
lines of posts you respond to, it makes it a lot easier to
distinguish between what you wrote and what the previous poster
wrote.

i agree. spagmans replies are lost in the sig with my DNUT
http://moreshit.usenetshit.info/screencap09384.png [9k]

 

[Samuël van Laere]

http://moreshit.usenetshit.info/a-ul-li-margin-thingy.shit

Hey Brucie,

How come the .shit extension works in my browser?
Or even beter how is it done?


Regards,
Samuël van Laere

 

[brucie]

in post: <

How come the .shit extension works in my browser?

because its real shit

Or even beter how is it done?

author shit

or

AddType text/html .shit
AddCharset iso-8859-1 .shit

in a .htaccess file.

 

[Els]

in post: <

Please set your newsreader to use > or | at the beginning
of the lines of posts you respond to, it makes it a lot
easier to distinguish between what you wrote and what the
previous poster wrote.

i agree. spagmans replies are lost in the sig with my DNUT
http://moreshit.usenetshit.info/screencap09384.png [9k]

That's funny, it would have looked like that in Xnews too, but
Spagman's reply got rid of the space after the -- of David's
post, so it's rendered like regular text.

 

[brucie]

in post: <

i agree. spagmans replies are lost in the sig with my DNUT
http://moreshit.usenetshit.info/screencap09384.png [9k]

That's funny,

i though the colors make it look pretty, i dunno about funny

it would have looked like that in Xnews too, but Spagman's reply got
rid of the space after the -- of David's post, so it's rendered like
regular text.

my DNUT fixes broken OE sig separators

 

[Els]

in post: <

i agree. spagmans replies are lost in the sig with my
DNUT http://moreshit.usenetshit.info/screencap09384.png
[9k]

That's funny,

i though the colors make it look pretty, i dunno about
funny

Funny colours often look pretty, imho.

my DNUT fixes broken OE sig separators

You wouldn't have a link to a DNUT version that doesn't require
a 10mm drill, would you?

 

[brucie]

in post: <

You wouldn't have a link to a DNUT version that doesn't require
a 10mm drill, would you?

but half the fun is installing it, getting it wrong and then trying
again on the other side.