By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,090 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

css direct style ok, indirect no work

P: n/a
i wont used three styles in the element of a list;
i have does so:

<ul>
<li> ............................. </li> first style
<li> <p> .....................</p> </li> 2 style
<li> <p class:"mystile">..... </p> </li> 3 style
...
</ul>
the call to class
not function, no work

<ul>
<li> ............................. </li> first style
<li> <p> ..........................</p> </li>
<li> <p style="background:blue>..... </p> </li>
...
</ul>

insert direct
this ok

Why?
How i can resolve ?

thank you

Jul 20 '05 #1
Share this Question
Share on Google+
13 Replies


P: n/a
arreeess <no**@yyyy.yy> wrote:
i wont used three styles in the element of a list;
i have does so:

<ul>
<li> ............................. </li> first style
<li> <p> .....................</p> </li> 2 style
<li> <p class:"mystile">..... </p> </li> 3 style
class="mystile"
...
</ul>
the call to class
not function, no work


Naturally.

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ter le premier point de mon adresse de courriel.
Jul 20 '05 #2

P: n/a


<ul>
<li> ............................. </li> first style
<li> <p> .....................</p> </li> 2 style
<li> <p class:"mystile">..... </p> </li> 3 style

class="mystile"

...
</ul>
the call to class
not function, no work

Naturally.


excuse me, my error of text send
really is:
<li> <p class="mystile">..... </p> </li> 3 style

not function, why?
Jul 20 '05 #3

P: n/a


arreeess wrote:
i wont used three styles in the element of a list;
i have does so:

<ul>
<li> ............................. </li> first style
<li> <p> .....................</p> </li> 2 style
<li> <p class:"mystile">..... </p> </li> 3 style
...
</ul>

excuse me, my error of text send
really is:
<li> <p class="mystile">..... </p> </li> 3 style

so, the call to class
not function, no work

<ul>
<li> ............................. </li> first style
<li> <p> ..........................</p> </li>
<li> <p style="background:blue>..... </p> </li>
...
</ul>

insert direct
this work, this is ok

Why?
How i can resolve ?

thank you


Jul 20 '05 #4

P: n/a
arreeess <no**@yyyy.yy> wrote:
excuse me, my error of text send


You have been excused. Now, if you wish to get help with your problem,
you will post the URL of your problem page, instead of (mis)copying
arbitrary snippets of code. I did not start searching all of .yy domain
to find your page, especially since .yy does not exist _yet_ (there was a
hint here).

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #5

P: n/a
You have been excused. Now, if you wish to get help with your problem,
you will post the URL of your problem page, instead of (mis)copying
arbitrary snippets of code. I did not start searching all of .yy domain
to find your page, especially since .yy does not exist _yet_ (there was a
hint here).


oh (excuse still) i am a newbie, i haven't page online, i try only in local.
can you help me however.
the code is simple:

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx

<html>
<head>

<title> Doc </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
@import url(style_marg_padd.css);
@import url(style_color_list.css);
@import url(style_color_p.css);
</style>
</head>
<body class="marg_padd_0">
<div id="navcontainer003">
<ul id="navlist003">
<li><a href="#"> 001 </a></li>
<li><a href="#"> 002 </a></li>
<li><a href="#"> 003 </a></li>
<li><p style="background:Black"> 004 </p></li>
<li ><p class="color_element_p"> 005 </p></li>
<li><a href="#"> 006 </a></li>
<li><p> 007 </p></li>
<li><a href="#"> 008 </a></li>
</ul>
</div>
</body>
</html>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx
style="background:Black" function
class="color_element_p" no function
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxx
STYLESHEETS:

first stylesheet

---style_marg_padd.css---
..marg_padd_0 {margin:0px; padding:0px;}
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxx

2nd stylesheet
---style_color_list.css---

#navcontainer003
{width:10%;}
#navcontainer003 ul li p
{
display: block;
background-color: silver;
color:red;
margin:0;
padding: 5px 5px 5px 20px; /*distanzio la scritta dentro il blocco a*/
border-bottom: 1px solid #eee;
}

#navcontainer003 a
{
display: block;
padding: 5px 5px 5px 20px; /*distanzio la scritta dentro il blocco a*/
background-color: #8B4513;
border-bottom: 1px solid #eee;
}

#navcontainer003 a:link, #navlist003 a:visited
{
color: aqua;
text-decoration: none;
}

#navcontainer003 a:hover
{
background-color: #0000CD;
color: #fff;
}
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxx
third stylesheet

---style_color_p.css----
..color_element_p {background:Black;}


Jul 20 '05 #6

P: n/a
arreeess <no**@yyyy.yy> wrote:
oh (excuse still) i am a newbie, i haven't page online, i try only in
local.


You are not excused. Please keep using a forged From line until you have
a clue.

(If you cannot upload a document onto a Web server, why are you asking in
a www group? Just a rhetoric question.)

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #7

P: n/a
What browser are you using? @import doesn't work in Netscape 4.x.

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ter le premier point de mon adresse de courriel.
Jul 20 '05 #8

P: n/a
in style_color_list.css you define:
#navcontainer003 ul li p
{
display: block;
background-color: silver;
color:red;
margin:0;
padding: 5px 5px 5px 20px; /*distanzio la scritta dentro il blocco a*/
border-bottom: 1px solid #eee;
}

Then in style_color_p.css you re-define the background color as such:
.color_element_p {background:Black;}


The reason its not coloring it is due to the rules of cascading. Your first
Definition of the background color has more weight because you have one ID.
Thus to fix it you need to change the style code in style_color_p.css to be:

#navcontainer003 .color_element_p {background:Black;}
Once you do that, the problem will be fixed.

Sincerely,
The Master
arreeess <no**@yyyy.yy> wrote in message news:<Y_***********************@news4.tin.it>...
You have been excused. Now, if you wish to get help with your problem,
you will post the URL of your problem page, instead of (mis)copying
arbitrary snippets of code. I did not start searching all of .yy domain
to find your page, especially since .yy does not exist _yet_ (there was a
hint here).


oh (excuse still) i am a newbie, i haven't page online, i try only in local.
can you help me however.
the code is simple:

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx

<html>
<head>

<title> Doc </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
@import url(style_marg_padd.css);
@import url(style_color_list.css);
@import url(style_color_p.css);
</style>
</head>
<body class="marg_padd_0">
<div id="navcontainer003">
<ul id="navlist003">
<li><a href="#"> 001 </a></li>
<li><a href="#"> 002 </a></li>
<li><a href="#"> 003 </a></li>
<li><p style="background:Black"> 004 </p></li>
<li ><p class="color_element_p"> 005 </p></li>
<li><a href="#"> 006 </a></li>
<li><p> 007 </p></li>
<li><a href="#"> 008 </a></li>
</ul>
</div>
</body>
</html>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx
style="background:Black" function
class="color_element_p" no function
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxx
STYLESHEETS:

first stylesheet

---style_marg_padd.css---
.marg_padd_0 {margin:0px; padding:0px;}
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxx

2nd stylesheet
---style_color_list.css---

#navcontainer003
{width:10%;}
#navcontainer003 ul li p
{
display: block;
background-color: silver;
color:red;
margin:0;
padding: 5px 5px 5px 20px; /*distanzio la scritta dentro il blocco a*/
border-bottom: 1px solid #eee;
}

#navcontainer003 a
{
display: block;
padding: 5px 5px 5px 20px; /*distanzio la scritta dentro il blocco a*/
background-color: #8B4513;
border-bottom: 1px solid #eee;
}

#navcontainer003 a:link, #navlist003 a:visited
{
color: aqua;
text-decoration: none;
}

#navcontainer003 a:hover
{
background-color: #0000CD;
color: #fff;
}
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxx
third stylesheet

---style_color_p.css----
.color_element_p {background:Black;}

Jul 20 '05 #9

P: n/a
> The reason its not coloring it is due to the rules of cascading. Your first
Definition of the background color has more weight because you have one ID.
Thus to fix it you need to change the style code in style_color_p.css to be:

#navcontainer003 .color_element_p {background:Black;}
Once you do that, the problem will be fixed.

Sincerely,
The Master


ok thank you

so I can to have more style for the element in the list

<ul>
<li> ............................. </li> first style
<li> <p> .....................</p> </li> 2 style
<li> <p class:"mystile_01">..... </p> </li> 3 style
<li> <p class:"mystile_02">..... </p> </li> 4 style
<li> <p class:"mystile_03">..... </p> </li> 5 style
...
</ul>
another solution can to be:

<ul>
<li > .................................. </li> first style
<li class:"mystile_01" > ............... </li> 2 style
<li class:"mystile_02" > ............... </li> 3 style
<li class:"mystile_03" > ............... </li> 4 style
...
</ul>
that you think, it is good solution?
and is preferable to use class or ID within tag li ?

have you other solution for to apply more styles to elements in the list ?
Jul 20 '05 #10

P: n/a
On Sun, 13 Jun 2004 09:47:05 GMT, arreeess <no**@yyyy.yy> wrote:
so I can to have more style for the element in the list [...] <li><p class:"mystile_01">..... </p></li> 3 style


Sigh; get a clue will you?

<p class:"mystile_01">..... </p>
<p class="mystile-01">..... </p>
--------^--------^

Element attribute value assignment is indicated by a '=' character.

NEVER! use underscores '_' in class attribute values, if you want to
use those values as _reliable_ CSS selectors. Replace with a dash '-'.

--
Rex

Jul 20 '05 #11

P: n/a
ok thank you

so I can to have more style for the element in the list

<ul>
<li> ............................. </li> first style
<li> <p> .....................</p> </li> 2 style
<li> <p class="mystile_01">..... </p> </li> 3 style
<li> <p class="mystile_02">..... </p> </li> 4 style
<li> <p class="mystile_03">..... </p> </li> 5 style
...
</ul>
another solution can to be:

<ul>
<li > .................................. </li> first style
<li class="mystile_01" > ............... </li> 2 style
<li class="mystile_02" > ............... </li> 3 style
<li class="mystile_03" > ............... </li> 4 style
...
</ul>
that you think, it is good solution?
and is preferable to use class or ID within tag li ?

have you other solution for to apply more styles to elements in the list ?
Jul 20 '05 #12

P: n/a
Sigh; get a clue will you?

<p class:"mystile_01">..... </p>
<p class="mystile-01">..... </p>
--------^--------^

Element attribute value assignment is indicated by a '=' character.

NEVER! use underscores '_' in class attribute values, if you want to
use those values as _reliable_ CSS selectors. Replace with a dash '-'.

ok
there is a list of others similar rule?

but with IE6 and NEtscape7 it work:
is it only one coincidence ?

thank you

Jul 20 '05 #13

P: n/a
On Sun, 13 Jun 2004 16:05:53 GMT, arreeess <no**@yyyy.yy> wrote:
Element attribute value assignment is indicated by a '=' character.

NEVER! use underscores '_' in class attribute values, if you want to
use those values as _reliable_ CSS selectors. Replace with a dash '-'.
ok
there is a list of others similar rule?
Yes; such "lists" are called "specifications"...

For HTML ...
http://www.w3.org/TR/html4/

For CSS1 ...
http://www.w3.org/TR/CSS1

For CSS2 ...
http://www.w3.org/TR/CSS2/

The CSS2 "errata" ...
http://www.w3.org/Style/css2-updates...12-errata.html

For CSS2.1 ...
http://www.w3.org/TR/CSS21/

You do tour own homework on those.
but with IE6 and NEtscape7 it work:
is it only one coincidence ?


The '=' character has always been the defined character for to indicate
an attribute value assignment in markup, no exceptions that I know of.

A browser that conforms to CSS1 will ignore any class attribute selector
(and it's 'property:value' specification) if the selector name contains
an underscore '_' character.

A browser that conforms to CSS2 will ignore any class attribute selector
(and it's 'property:value' specification) if the selector name contains
an underscore '_' character.

A browser that conforms to CSS2, plus its questionable "errata"
document, will accept a class attribute selector (and it's
'property:value' specification) if the selector name contains an
underscore '_' character.

A browser that conforms to CSS2.1 will accept a class attribute selector
(and it's 'property:value' specification) if the selector name contains
an underscore '_' character.

Now it's up to you to decide which level of browsers you want to exclude
from rendering your documents as per your style suggestions.

--
Rex

Jul 20 '05 #14

This discussion thread is closed

Replies have been disabled for this discussion.