List problem

[shapper]

Hello,

I have the following code:

<div id="outer" class="outer">
<ol>
<li>Item outer 01</li>
<li>Item outer 02</li>
</ol>
<div id="inner" class="inner">
<ol>
<li>Item inner 01</li>
<li>Item inner 02</li>
</ol>
</div>
</div>

I have some CSS as follows:

..outer ol {...}
..outer ol il {...}

..inner ol {...}
..inner ol il {...}

The ol inside outer div is completely fine.
However, when I set some properties for the inner ol and il they don't
seem to take effect.

It's like the outer style overrides the inner style.

Could someone tell me what I am doing wrong?

Thanks,
Miguel

[John Hosking]

shapper wrote:

I have the following code:

<div id="outer" class="outer">
<ol>
<li>Item outer 01</li>
<li>Item outer 02</li>
</ol>
<div id="inner" class="inner">
<ol>
<li>Item inner 01</li>
<li>Item inner 02</li>
</ol>
</div>
</div>

I have some CSS as follows:

.outer ol {...}

applies to all ol's which are descendents of elements with class outer.
The ol inside your "inner" div is included.

.outer ol il {...}

applies to all list items which are descendents of ol's which are
themselves descendents of elements with class outer. All the li's you've
shown us are included.

>
.inner ol {...}

applies to all ol's which are descendents of elements with class inner.

.inner ol il {...}

applies to all list items which are descendents of ol's which are
themselves descendents of elements with class inner.

>
The ol inside outer div is completely fine.
However, when I set some properties for the inner ol and il they don't
seem to take effect.

It's like the outer style overrides the inner style.

Could someone tell me what I am doing wrong?

Is this the actual order of your CSS rules? Have you read about
specificity in the specs? What properties are you trying to set? As
usual, a URL would help.

--
John

[shapper]

On Jun 13, 4:40 pm, John Hosking <[e-mail]>
wrote:

shapper wrote:

I have the following code:

<div id="outer" class="outer">
<ol>
<li>Item outer 01</li>
<li>Item outer 02</li>
</ol>
<div id="inner" class="inner">
<ol>
<li>Item inner 01</li>
<li>Item inner 02</li>
</ol>
</div>
</div>

I have some CSS as follows:

.outer ol {...}

applies to all ol's which are descendents of elements with class outer.
The ol inside your "inner" div is included.

.outer ol il {...}

applies to all list items which are descendents of ol's which are
themselves descendents of elements with class outer. All the li's you've
shown us are included.

.inner ol {...}

applies to all ol's which are descendents of elements with class inner.

.inner ol il {...}

applies to all list items which are descendents of ol's which are
themselves descendents of elements with class inner.

The ol inside outer div is completely fine.
However, when I set some properties for the inner ol and il they don't
seem to take effect.

It's like the outer style overrides the inner style.

Could someone tell me what I am doing wrong?

Is this the actual order of your CSS rules? Have you read about
specificity in the specs? What properties are you trying to set? As
usual, a URL would help.

--
John

Hi,

I don't have a url. My outer CSS is as follows:

..outer ol
{
border-top: 1px solid #F0F0F0;
font: normal 11px/18px verdana,arial,helvetica,sans-serif;
list-style: none;
margin: 4px 4px 0px 4px;
padding: 0px 0px 4px 0px;
}

..outer ol li
{
padding: 5px 0px 5px 140px;
}

..outer ol li label
{
background: transparent;
color: #606060;
float: left;
font: bold 11px/18px verdana,arial,helvetica,sans-serif;
padding-right: 15px;
text-align: right;
margin: -1px 0px 0px -140px;
width: 120px;
}

I want to maintain only the font and the list-style in inner ol and
ils.
I am having problems in removing the paddings and margins from the
inner ol and il.

How should I do it?

Thanks,
Miguel

[Bergamot]

shapper wrote:

>
I don't have a url.

Please upload your code to a publicly accessible server and post the
URL. If your domain is not public, your ISP may give you some free
space, or go someplace like yahoo/geocities if you're desperate.

Make it easy for us to help you and you'll get a much better response.
Posting code is not the way, posting a URL is.

--
Berg

[shapper]

On Jun 13, 5:35 pm, Bergamot <[e-mail]:

shapper wrote:

I don't have a url.

Please upload your code to a publicly accessible server and post the
URL. If your domain is not public, your ISP may give you some free
space, or go someplace like yahoo/geocities if you're desperate.

Make it easy for us to help you and you'll get a much better response.
Posting code is not the way, posting a URL is.

--
Berg

I understand but this code in ASP.NET and it is not so easy to upload
an unfinished site ... and all HTML is generated on the server.

Anyway, I changed the CSS to:

ol.inner
{
border-top: 1px solid #F0F0F0;
font: normal 11px/18px verdana,arial,helvetica,sans-serif;
list-style: none;
margin: 4px 4px 0px 4px;
padding: 0px 0px 4px 0px;

}

li.inner
{
padding: 5px 0px 5px 140px;

}

Then I apply the inner class to my li and ol tags and now it is
working fine.
I don't understant why this does not work when I use:

..inner il {...}
..inner ol {...}

In this case the properties do not override the outer styles.

Thanks,
Miguel

[Bergamot]

shapper wrote:

On Jun 13, 5:35 pm, Bergamot <[e-mail]:

>shapper wrote:

I don't have a url.

Posting code is not the way, posting a URL is.

I understand but this code in ASP.NET

That's irrelevant.

and it is not so easy to upload

Sure it is. You can see the generated page locally, can't you? Save that
as an HTML page and upload it, complete with images, CSS, and whatever
other files are needed.

I suggest using Firefox rather than IE to save such pages, though,
because IE tends to horribly mangle code in the process. Firefox (or any
other mozilla browser) will leave the code relatively untouched.

--
Berg

[shapper]

On Jun 13, 11:30 pm, Bergamot <[e-mail]:

shapper wrote:

On Jun 13, 5:35 pm, Bergamot <[e-mail]:

shapper wrote:

I don't have a url.

Posting code is not the way, posting a URL is.

I understand but this code in ASP.NET

That's irrelevant.

and it is not so easy to upload

Sure it is. You can see the generated page locally, can't you? Save that
as an HTML page and upload it, complete with images, CSS, and whatever
other files are needed.

I suggest using Firefox rather than IE to save such pages, though,
because IE tends to horribly mangle code in the process. Firefox (or any
other mozilla browser) will leave the code relatively untouched.

--
Berg

Hi Berg,

This is not so easy as you might think because of the ASP.NET web site
model but I was able to pull this:
http://www.27lamps.com/public/Beta.htm

As you can see the for is it self a Div (fieldset) with an ordered
list inside.
Then in some list items I add child ordered lists.

In this moment I am having two problems:
1. Override the parent definitions for a ol and il.
This has been maybe one of my biggest problems. I was able to
solve it for Alert ordered list but I think by CSS solution is far
from perfect.
You can also see the same problem in the section when it says
SKYPE and where I have an ordered list of check boxes.
2. In the SKYPE section again you can see that I also have 3 top lines
in grey ... I think this is because of the block.

Anyway, could someone help me out in improving my CSS and solving
these problems?

Thank You Very Much,
Miguel

[John Hosking]

shapper wrote:

This is not so easy as you might think because of the ASP.NET web site
model but I was able to pull this:
http://www.27lamps.com/public/Beta.htm

Miguel, thanks for providing a URL. Unfortunately, the code is much too
complicated for me to wade through. All that JS, encryted and not, is
more than I can take. I just ate. :-O~~#

>
Anyway, could someone help me out in improving my CSS and solving
these problems?

All I can tell you right now is that your CSS does not validate. (What's
that third [BonsAlunos...] "stylesheet" referenced in your source's
LINKs?) Maybe if you clean up the errors in your CSS, the problems might
clear right up.

HTH
--
John

[Bergamot]

shapper wrote:

>
This is not so easy as you might think because of the ASP.NET web site
model but I was able to pull this:
http://www.27lamps.com/public/Beta.htm

As you can see

I have to agree with Mr Hosking on this one - your code (HTML and CSS)
is very hard to decipher. You should make a reduced test case, and
validate your code. Maybe then the solution will even reveal itself to you.

--
Berg

[shapper]

On Jun 14, 2:26 am, Bergamot <[e-mail]:

shapper wrote:

This is not so easy as you might think because of the ASP.NET web site
model but I was able to pull this:
http://www.27lamps.com/public/Beta.htm

As you can see

I have to agree with Mr Hosking on this one - your code (HTML and CSS)
is very hard to decipher. You should make a reduced test case, and
validate your code. Maybe then the solution will even reveal itself to you.

--
Berg

Hi Berg,

As I said, the code generated by ASP.NET becomes confusing.

I will create an clean HTML page today replicating the code in ASP.NET
and post it again ... just give me some time.

Thanks,
Miguel

[shapper]

On Jun 14, 12:19 pm, shapper <[e-mail]:

On Jun 14, 2:26 am, Bergamot <[e-mail]:

shapper wrote:

This is not so easy as you might think because of the ASP.NET web site
model but I was able to pull this:
>http://www.27lamps.com/public/Beta.htm

As you can see

I have to agree with Mr Hosking on this one - your code (HTML and CSS)
is very hard to decipher. You should make a reduced test case, and
validate your code. Maybe then the solution will even reveal itself to you.

--
Berg

Hi Berg,

As I said, the code generated by ASP.NET becomes confusing.

I will create an clean HTML page today replicating the code in ASP.NET
and post it again ... just give me some time.

Thanks,
Miguel

Hi,

I just uploaded a new version. I "cleaned" all the code.
http://www.27lamps.com/public/Beta.htm

Could you give me your advice?
Check the borders over skype and also my problem with the child li's.

I validated my code and I got only two parse problems which I can't
understand why.

Thanks,
Miguel

[Bergamot]

shapper wrote:

>
I just uploaded a new version. I "cleaned" all the code.
http://www.27lamps.com/public/Beta.htm

Check the borders over skype and also my problem with the child li's.

I don't know what you mean about the child li's, but the border issue is
from not clearing your floats. This subject has come up many, many times
in this newsgroup. You should find lots of info about it in the google
archives. See also
http://brainjar.com/css/positioning/
http://www.quirksmode.org/css/clearing.html

--
Berg

[shapper]

On Jun 14, 4:50 pm, Bergamot <[e-mail]:

shapper wrote:

I just uploaded a new version. I "cleaned" all the code.
http://www.27lamps.com/public/Beta.htm

Check the borders over skype and also my problem with the child li's.

I don't know what you mean about the child li's, but the border issue is
from not clearing your floats. This subject has come up many, many times
in this newsgroup. You should find lots of info about it in the google
archives. See alsohttp://brainjar.com/css/positioning/http://www.quirksmode.org/css/clearing.html

--
Berg

Hi Berg,

I know about clearing floats ... however the overflow approach is new
to me.

Anyway, I uploaded a new version of my problem.
Check the DIV where I apply the style "ListBox" class.

My two problems are:
1. The ListBox is not being applied to the child tags, i.e., ol and
li.
They have the styles defined by parent classes.

2. The only way I was able to solve this was by applying ListBox to
the OL and all LI inside that DIV.
How can I solve this?

3. When I use the approach in (2) my second problem becomes the
clearing floats in my ol.
I applied the overflow approach to my OL tag but I wasn't able to
solve it.

Well, these are the problems I am trying to solve.

Thanks,
Miguel

[shapper]

On Jun 14, 7:59 pm, shapper <[e-mail]:

On Jun 14, 4:50 pm, Bergamot <[e-mail]:

shapper wrote:

I just uploaded a new version. I "cleaned" all the code.
>http://www.27lamps.com/public/Beta.htm

Check the borders over skype and also my problem with the child li's.

I don't know what you mean about the child li's, but the border issue is
from not clearing your floats. This subject has come up many, many times
in this newsgroup. You should find lots of info about it in the google
archives. See alsohttp://brainjar.com/css/positioning/http://www.quirksmode.org/css/cle...

--
Berg

Hi Berg,

I know about clearing floats ... however the overflow approach is new
to me.

Anyway, I uploaded a new version of my problem.
Check the DIV where I apply the style "ListBox" class.

My two problems are:
1. The ListBox is not being applied to the child tags, i.e., ol and
li.
They have the styles defined by parent classes.

2. The only way I was able to solve this was by applying ListBox to
the OL and all LI inside that DIV.
How can I solve this?

3. When I use the approach in (2) my second problem becomes the
clearing floats in my ol.
I applied the overflow approach to my OL tag but I wasn't able to
solve it.

Well, these are the problems I am trying to solve.

Thanks,
Miguel

Hi,

I just fixed it:
http://www.27lamps.com/public/Beta.htm

Now it is working fine!

Overall, what do you think of my form CSS?
Do you have any suggestions so I can improve it?

Thanks,
Miguel