Hello,
I have a problem with entering html into the text field
of one my exhibitions. The direct link to the area in
question is
Rainer Nowak Illustration
I want to have an unordered list in the text of
one of my exhibitions. I'd like the list to show
square bullets.
I entered this sample code in the text-field:
<ul style="list-style-type:square;"> <li>content 1</li> <li>content 2</li></ul>But all I get is a list without the square bullets.
Why?
Because in your css file it has a property list-style:none. However, if you take it off, your site menu will have bullets as well. You can give it a separate class, and style it in your css.
Try list-style, not list-style-type, maybe that's the problem?
Thanks ntlk for your advice.
list-style instead of list-style-type doesn't
make any difference, unfortunately.
Defining classes in the css-file is still a
mystery to me. I do not have any clue yet as
to how the css-code ought to look in my case.
Moreover, I was of the impression that css-commands
entered directly into the html-tags would always
override commands of an external css-file.
That must have been a wrong assumption of mine.
Anyway, I will further look into the css-matter or
search for a workaround.
Of course, any more advice would be much appreciated.
It's the correct assumption. Have you searched on Google for more and better info about CSS?
Thank you Vaska for your reply. However, if my previous assumption is
right (inline style overrides an external style) why don't I get the bullets?
Via google I found this confirmation of my assumption:
http://www.w3schools.com/CSS/css_howto.asp
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the tag, or in an external style sheet, or in a browser (a default value).
Note: If the link to the external style sheet is placed after the
internal style sheet in HTML , the external style sheet will
override the internal style sheet!
I don't understand the note at the end, however. Maybe that is the
key to solving my problem. I'll investigate further.
Hey nowrain:
1st to your problem: the margins of your are being overridden by this declaration in your stylesheet: * { margin: 0; padding: 0; }
Changing that is likeley to give you major headaches, so the easiest way to fix this is to add:
ul style="list-style: square; list-style-position: inside"
By default most(all?) browsers use list-style-position: outside; causing you to loose your bullets.
another option would be to add the margin inline as well:
list-style: square; margin-left: 10px;
As for the note at the end of the WC3 spec,
it´s just saying that normally An internal stylesheet in the head of the document will override any external stylesheets, except if the external stylesheet is called after the internal one. like so:
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">.some class {padding: 0 20px; }</style><link rel="stylesheet" href="http://yoursite.com/pathto/style.css" type="text/css" media="screen" /> </head>where normally the external stylesheet would be called before the internal styles.
Thank you very much, blameme.
Your advice was very helpful.
The list-style-position: inside
got the bullets to show up.
This thread has been closed, thank you.