Re: [css-d] nested lists in IE7

[Alan Gresley]

Dermot Ward wrote:
> Hi Bobby,
> 
> Thank you very much for your help.
> 
> Please excuse my typo where I inadvertantly put 'class' instead of  'one'.
> 
> Your solution below solves the main problem, it stops the bold style 
> being applied to the nested list in IE7.
> 
> 
> 
> One
> 
> 
> One A
> One B
> One C
> 
> 
> 
> 
> However IE7 now inserts a gap between the first li and the second ul.
> 
> 
> 
> * One
> *
>   o One A
>   o One B
>   o One C
> 
> I'll play around with this later this evening.
> And thanks for the info on ul and child elements.
> 
> Kind regards..Dermot.


Hello Dermot,

You must now set a width or zero of the margin-left that IE7 has for the 
descendant child  element. Something like this.

ul ul { margin-left: 0; }

or

ul ul { margin-left: 10px; }


Please note that Firefox, Opera, Safari and IE8 do not have a default 
margin-left on  elements but rather a padding-start. See defaults on 
this table [1] for both  and . This demo [2] may help you see 
how IE7 or earlier have different defaults properties for list.



1. 
2. 


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] nested lists in IE7

[Dermot Ward]

Hi Christian,

Thank you very much for your solution which completely solved the 
problem and then some with the neat styling.

Also thank you Alan for the useful suggestions and info on default  
and< li> margins and padding in various browsers.

All much appreciated.

Kind regards...Dermot.

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] nested lists in IE7

[Christian Heilmann]

Dermot Ward wrote:
> Hi Bobby,
>
> Thank you very much for your help.
>
> Please excuse my typo where I inadvertantly put 'class' instead of  'one'.
>
> Your solution below solves the main problem, it stops the bold style 
> being applied to the nested list in IE7.
>
> 
>
> One
> 
> 
> One A
> One B
> One C
> 
> 
> 
>
> However IE7 now inserts a gap between the first li and the second ul.
>
>
>
> * One
> *
>   o One A
>   o One B
>   o One C
>
> I'll play around with this later this evening.
> And thanks for the info on ul and child elements.
>   
Yes and that is totally correct. The right way to nest this is the 
following:



One

One A
One B
One C




The other solution doesn't make the UL a child of "One". You also don't 
need classes on every list item but use descendant selectors instead:



One

One A
One B
One C




ul.one li{
font-weight:bold;
color:#0c0;
}
ul.one li li {
font-weight:normal;
color:#000;
}




__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] nested lists in IE7

[Dermot Ward]

Hi Bobby,

Thank you very much for your help.

Please excuse my typo where I inadvertantly put 'class' instead of  'one'.

Your solution below solves the main problem, it stops the bold style 
being applied to the nested list in IE7.



One


One A
One B
One C




However IE7 now inserts a gap between the first li and the second ul.



* One
*
  o One A
  o One B
  o One C

I'll play around with this later this evening.
And thanks for the info on ul and child elements.

Kind regards..Dermot.




__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] nested lists in IE7

[Dermot Ward]

Sorry for my typo in original post.

.class should read .one in the style snippet..Dermot.

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] nested lists in ie7

[Bobby Jack]

--- On Mon, 8/3/09, Dermot Ward  wrote:

Hi Dermot,

> .class {
>     font-weight: bold;
> }

Do you REALLY mean this? That selector will only match HTML elements with a 
class of 'class' - e.g.  - is that really what you intended?

> 
>     One
>         
>             One A
>             One B
>             One C
>         
> 

Notice how, on the third line, your indent doesn't quite match your structure - 
this is a warning sign! Your  should be inside a ;  is the only 
valid child element of a , so the above won't validate. You need something 
like:


One


One A
One B
One C




- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] nested lists in ie7

[Dermot Ward]

Hello all.

I have a nested list problem in IE7.

I want to highlight a selected item in a list by applying a bold style 
to the selected item,
but IE7 applies the bold style to not just the selected item but to 
everything within the
nested list also. Firefox and Safari work perfectly.

Hope this simplified code snippet makes the problem clear.

.class {
font-weight: bold;
}



One

One A
One B
One C



Any suggestions much appreciated.

Thank you very much.

Kind regards.Dermot.



__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Nested lists in columns

[Bill Brown]

Hey Dan,

Here's the issue on your site:

(http://www.calvarygreenmeadow.com/schedule.htm)

In order to "capture" the floated elements, we have to alter the way the 
browsers handle them. Under normal circumstances, floated elements are 
given special consideration within the document flow. This is more or 
less the essence of what makes them floated.

In this situation, we want them to be treated differently, so we have to 
toggle this behavior. For standards-compliant browsers, we can use this 
rule (in this case) to capture the floated elements:

~~~
.schedule li
{
   overflow:  hidden;
}
~~~

Internet Explorer has more trouble with this, requiring that we activate 
the MS proprietary "hasLayout" property. There's a number of ways to do 
this. In the original code I sent you, I used the MS "zoom" property. 
This is unique to MS and does not validate. It also probably looked 
pretty useless, which is maybe why you dropped it from your styles.

A better way to activate this behavior (as far as I'm concerned) is 
through the use of "display:inline-block". This CSS property is not 
completely supported by IE -- it only works on elements with a default 
display of "inline". Interestingly enough, however, is the fact that it 
will trigger the required "hasLayout" behavior we need to capture the 
float. More interesting is that configuring the display back to the 
desired setting doesn't de-activate "hasLayout."

Thus, using this rule should allow all browsers to show consistent results:

~~~
.schedule li
{
   display:   inline-block;
}
.schedule li
{
   display:   block;
   overflow:  hidden;
}
~~~

They must be broken up into two separate rules as above or IE will not 
activate "hasLayout" for the element.

In your current live version, the rule you need to replace begins around 
line 131.

I wasn't sure if my explanation above was entirely clear, s...by way 
of *further* explanation, consider an image floated in a paragraph:

~~~
p img {
   float:left;
}
~~~


   i   /  \i
   i _/   |i
   i(.-,--.   |i
   i/o/  o \ / i
   i\_\/  /\/\ i
   i(__`--'   ._)  i
   i/  `-. |   i
   i   ( ,`-.  |   i
   i`-,--\_  ) |-. i
   i _`.__.'  ,-' \i
   i|\ )  _.-'|i
   ii-\.'\ ,--+.   i
   i  .' .'   \,-'/ \  i
   i / / /   \ i
   >

Demonstrated above is the default browser behavior regarding floats. 
Under normal circumstances, this is exactly what we want so that when we 
include another paragraph about Homer, we get this:


   i   /  \i
 appearing on The Tracey Ullman Show for   p
p three years, the Simpson family got their own series on Fox, which  p
p debuted December 17, 1989.  p
p p
pp>

Note, however, that changing the styles like this:

~~~
p {
   display:  inline-block; /* For MSIE gte 5.5 */
}
p {
   display:  block; /* For MSIE gte 5.5 */
   overflow: hidden; /* For standards-compliant browsers */
}
p img {
   float:left;
}
~~~

...gives us this:

   p
pp>



...which is useful in some circumstances but would most definitely not 
work under normal conditions. The ability to toggle between the two 
behaviors is better than having either one, but not the other.

Hope that helps. Floats can be tricky sometimes. I'm sure my incredible 
grasp of ASCII cleared it right up, though. ;-)

I've bounced this back to the CSS Discussion List in case this answer is 
helpful to anyone else.
--Bill

Homer Simpson bio from http://en.wikipedia.org/wiki/Homer_simpson
Homer's headshot from http://www.ascii-art.de/ascii/s/simpsons.txt
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Nested lists in columns

[Telecosm]

Bill,

"Something like this, maybe:
http://www.cyber-sandbox.com/cssd/ccg.html";

This looks very nice.  Thanks for your help!

How does this work using only two floats, and those on the content of the
container and not the container itself?  I could not get the li to float
alongside its parent ul.

Dan



-Original Message-
From: Bill Brown [mailto:macnim...@gmail.com] 
Sent: Friday, January 02, 2009 1:47 PM
To: telec...@verizon.net
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Nested lists in columns

Telecosm wrote:
> I fear this may not be possible, but I'd like to have a nested UL display
> such that the child elements are displayed alongside their parents.
> Here is a link to a working-copy of the code:
> http://www.calvarygreenmeadow.com/schedule_new_5.htm
> Thanks in advance for your help!
> Dan

Hi Dan,

Something like this, maybe:
http://www.cyber-sandbox.com/cssd/ccg.html

Hope it helps.
--Bill

-- 



__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Nested lists in columns

[Bill Brown]

Telecosm wrote:
> I fear this may not be possible, but I'd like to have a nested UL display
> such that the child elements are displayed alongside their parents.
> Here is a link to a working-copy of the code:
> http://www.calvarygreenmeadow.com/schedule_new_5.htm
> Thanks in advance for your help!
> Dan

Hi Dan,

Something like this, maybe:
http://www.cyber-sandbox.com/cssd/ccg.html

Hope it helps.
--Bill

-- 

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Nested lists in columns

[Telecosm]

I fear this may not be possible, but I'd like to have a nested UL display
such that the child elements are displayed alongside their parents.

 



Sunday



10:30 am

2:00 pm



Monday



7:30 pm





 

Should display like this:

 

Sunday 10:30 am

2:00 pm

 

Monday 7:30 pm

 

.the key being the horizontal alignment of the first child with its parent.

 

I want to use the UL's because I think this is the best semantically correct
way to mark-up the information.

 

I can kind of get it close with negative margins, but I don't know how to
make them exactly aligned-especially when the body text size is changed.

 

Here is a link to a working-copy of the code:
http://www.calvarygreenmeadow.com/schedule_new_5.htm

 

Thanks in advance for your help!

 

Dan

 

 

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Nested Lists, Rollovers

[Jack Timmons]

On Tue, Sep 9, 2008 at 5:42 PM, Christopher Kip
<[EMAIL PROTECTED]>wrote:

> Trying to figure out a way around this problem.  I have a list where
> I want the main part to be a link and another list inside.  Works
> fine in Safari and IE but not in Firefox, presumably due to the a
> tag.  Here is URL:
>
> http://www.stkelectronics.com.vhost.zerolag.com/site/polypropylene-
> old.php
>
> I can get it to work in Safari, IE and Firefox if I change the nested
> list to a div.  Here is URL:
>
> http://www.stkelectronics.com.vhost.zerolag.com/site/polypropylene.php
>
> Problem is, neither of these solutions validates -- I was actually
> somewhat surprised that the second variation even worked.
>
> Any thoughts?  I am thinking I will just need to make each category a
> separate div with a rollover on that and just get rid of the lists
> but thought I might see if anyone had a more eloquent solution or if
> I was missing something right in front of my face...
>
> Thanks!
> -Christopher
>
>
Christopher,

My opinion would be to great the rollover on the list element, and involve
javascript if you want the whole thing to act as a link. Something like:



Outside of that, I'm sure someone far more clever than I might have a
solution.

-Jack

-- 
-Jack Timmons
http://www.trotlc.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Nested Lists, Rollovers

[Christopher Kip]

Trying to figure out a way around this problem.  I have a list where  
I want the main part to be a link and another list inside.  Works  
fine in Safari and IE but not in Firefox, presumably due to the a  
tag.  Here is URL:

http://www.stkelectronics.com.vhost.zerolag.com/site/polypropylene- 
old.php

I can get it to work in Safari, IE and Firefox if I change the nested  
list to a div.  Here is URL:

http://www.stkelectronics.com.vhost.zerolag.com/site/polypropylene.php

Problem is, neither of these solutions validates -- I was actually  
somewhat surprised that the second variation even worked.

Any thoughts?  I am thinking I will just need to make each category a  
separate div with a rollover on that and just get rid of the lists  
but thought I might see if anyone had a more eloquent solution or if  
I was missing something right in front of my face...

Thanks!
-Christopher
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] nested lists and absolute positioning and Internet Explorer

[Patrick Boutin]

Thanks for getting back to me Jim,

The only thing is that I am able place the ul and li where they are supposed 
to. and also I am able to render correctly based on the corresponding hover 
however that won't work exactly the same in IE since the top property needed to 
display correctly (according to IE) should be 30px instead of 10px.
This is what I am looking at in terms of CSS code and HTML:

ul { /* All lists (top inline) */padding: 10px 5px;border: 1px solid 
red;}
ul li{ /* All list items */display: inline;position: relative;
padding: 5px;margin: 0;height: 10px;}
ul li ul { /* Second level lists (block) */width: 57px;display: none;   
 position: absolute;top: 10px;left: -11px;}
ul li ul li { /* Second level list items */display: none;position: 
relative;padding: 5px 5px;}
ul li ul li ul { /* Third level list (second inline) */background: none;
display: inline;position: absolute;top: 0;left: 90px;width: 
840px;padding: 5px 0;   margin: 0;}
ul li ul li ul li { /* Third level list (second inline) */display: inline;  
  position: relative;margin: 0;}

/* When first list is hovered, this happens to ALL lists */
#navigation li:hover ul , #navigation li.hover ul, #navigation li:hover ul li, 
#navigation li.hover ul li { display: block; background: none; }
#navigation li:hover ul li ul, #navigation li.hover ul li ul, #navigation 
li:hover ul li ul li, #navigation li.hover ul li ul li { display: none; 
background: none; }
#navigation li:hover ul li ul li ul, #navigation li.hover ul li ul li ul, 
#navigation li:hover ul li ul li ul li, #navigation li.hover ul li ul li ul li 
{ display: none; background: none; }
/* When first list is hovered, this happens to ALL lists */

/* When second list is hovered, this happens to ALL lists */
#navigation li ul li:hover ul, #navigation li ul li.hover ul, #navigation li ul 
li:hover ul li, #navigation li ul li.hover ul li { display: inline; background: 
none;}
#navigation li ul li:hover ul li ul, #navigation li ul li.hover ul li ul, 
#navigation li ul li:hover ul li ul li, #navigation li ul li.hover ul li ul li 
{ display: none; background: none;}
#navigation li ul li:hover ul li ul li ul, #navigation li ul li.hover ul li ul 
li ul, #navigation li ul li:hover ul li ul li ul li, #navigation li ul li.hover 
ul li ul li ul li { display: none; background: none;}
/* When second list is hovered, this happens to ALL lists */







 
  
   Type

 Nightclubs
 Bars
 Lounges

   
   Date

 Today
 Tomorrow
 This Month

   
   Location 

 San Francisco
 San Jose
 Chicago
 MORE

   
  
 
 
  
   Bars

 item1
 item1

   
   Nightclubs

 item1

   
   Lounges
  
 
 
  
   Groups
   MySpace

 item1
 item1

   
  
 
 
  
   Community

 item1
 item1

   
   item1

 item1

   
   item1
   
  
 




It will render in IE7 but with the incorrect top property while IE6 won't even 
display the second level lists and background image (here.gif looks like tab 
that appears below each li item f the root ul) so I really don't know if IE6 is 
doing it properly (I think I know the answer to that question though...)

Any help would be much appreciated.

Patrick



- Original Message 
From: Jim Davis <[EMAIL PROTECTED]>
To: Patrick Boutin <[EMAIL PROTECTED]>
Cc: css-d@lists.css-discuss.org
Sent: Tuesday, December 18, 2007 4:54:36 PM
Subject: Re: [css-d] nested lists and absolute positioning and Internet Explorer


Patrick,

I created a test page at http://www.jimdavis.org/test/listtest.html using your 
css and my html for the nested lists.

According to Eric's book, "Cascading Style Sheets 
2.0" display: none "The element will generate no boxes at all and thus will 
neither be displayed nor impact the layout of the document. Any descendant 
elements will also be prevented from appearing, regardless of the value of 
display for those elements."


So if my understanding of this definition of display: none is correct then when 
ul li ul is set to display: none then it will not be displayed, nor will any 
descendants of ul li ul be displayed.

It would appear that IE 6 is getting it right and FF is displaying the nested 
lists incorrectly. (GASP!!).


What say the experts on the list?

Jim

On Dec 18, 2007 12:37 PM, Patrick Boutin <[EMAIL PROTECTED]> wrote:

I am able to display this correctly in Firefox but IE6 and IE7 won't display 
the top:property correctly.


I have 3 nested unordered lists.
1st one display inline
2nd one display block
3rd one display inline

2nd and 3rd lists only display when container list is hovered and the 2nd list 
has a background image display.


the li of the 1st list have a position: relative
the 2nd ul has a position: absolute; left: 11px

Re: [css-d] nested lists and absolute positioning and Internet Explorer

[Jim Davis]

Thanks Philippe. Haste makes waste, as they say. My apologies to the list
for not taking more care to double check my markup. Corrections made.

Jim


>
>
> Your html mark-up is invalid. And what Gecko, WebKit, Opera show is
> correct, given your mark-up.
>
>  2Ftest%2Flisttest.html&charset=%28detect+automatically%
> 29&doctype=Inline&group=0&ss=1>
>
> Try this:
> 
>
>
> Philippe
> ---
> Philippe Wittenbergh
> 
>
>
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] nested lists and absolute positioning and Internet Explorer

[Philippe Wittenbergh]

On Dec 19, 2007, at 9:54 AM, Jim Davis wrote:

> Patrick,
>
> I created a test page at http://www.jimdavis.org/test/listtest.html  
> using
> your css and my html for the nested lists.
>
> According to Eric's book, "Cascading Style Sheets 2.0" display:  
> none "The
> element will generate no boxes at all and thus will neither be  
> displayed nor
> impact the layout of the document. Any descendant elements will  
> also be
> prevented from appearing, regardless of the value of display for those
> elements."
>
> So if my understanding of this definition of display: none is  
> correct then
> when ul li ul is set to display: none then it will not be  
> displayed, nor
> will any descendants of ul li ul be displayed.
>
> It would appear that IE 6 is getting it right and FF is displaying the
> nested lists incorrectly. (GASP!!).
>
> What say the experts on the list?

Your html mark-up is invalid. And what Gecko, WebKit, Opera show is  
correct, given your mark-up.



Try this:



Philippe
---
Philippe Wittenbergh





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] nested lists and absolute positioning and Internet Explorer

[Jim Davis]

Patrick,

I created a test page at http://www.jimdavis.org/test/listtest.html using
your css and my html for the nested lists.

According to Eric's book, "Cascading Style Sheets 2.0" display: none "The
element will generate no boxes at all and thus will neither be displayed nor
impact the layout of the document. Any descendant elements will also be
prevented from appearing, regardless of the value of display for those
elements."

So if my understanding of this definition of display: none is correct then
when ul li ul is set to display: none then it will not be displayed, nor
will any descendants of ul li ul be displayed.

It would appear that IE 6 is getting it right and FF is displaying the
nested lists incorrectly. (GASP!!).

What say the experts on the list?

Jim

On Dec 18, 2007 12:37 PM, Patrick Boutin <[EMAIL PROTECTED]>
wrote:

> I am able to display this correctly in Firefox but IE6 and IE7 won't
> display the top:property correctly.
>
> I have 3 nested unordered lists.
> 1st one display inline
> 2nd one display block
> 3rd one display inline
>
> 2nd and 3rd lists only display when container list is hovered and the 2nd
> list has a background image display.
>
> the li of the 1st list have a position: relative
> the 2nd ul has a position: absolute; left: 11px; top: 10px;
>
> the top: 10px is perfect in Firefox but for me to get the same
> positioning, I need to change that to 30px.which makes the list be too
> low on Firefox.
>
> How can I fix this? (this is the actual code) with the actual section I
> mentioned above underlined.
> Everything else seems to display correctly.
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] nested lists and absolute positioning and Internet Explorer

[Patrick Boutin]

I am able to display this correctly in Firefox but IE6 and IE7 won't display 
the top:property correctly.

I have 3 nested unordered lists.
1st one display inline
2nd one display block
3rd one display inline

2nd and 3rd lists only display when container list is hovered and the 2nd list 
has a background image display.

the li of the 1st list have a position: relative
the 2nd ul has a position: absolute; left: 11px; top: 10px;

the top: 10px is perfect in Firefox but for me to get the same positioning, I 
need to change that to 30px.which makes the list be too low on Firefox.

How can I fix this? (this is the actual code) with the actual section I 
mentioned above underlined.
Everything else seems to display correctly.

ul { /* All lists (top inline) */
padding: 10px 5px;
border: 1px solid red;
}
ul li{ /* All list items */
display: inline;
position: relative;
padding: 5px;
margin: 0;
height: 10px;
}
ul li ul { /* Second level lists (block) */
width: 57px;
display: none;
position: absolute;
top: 10px;
left: -11px;
}
ul li ul li { /* Second level list items */
display: none;
position: relative;
padding: 5px 5px;
}
ul li ul li ul { /* Third level list (second inline) */
background: none;
display: inline;
position: absolute;
top: 0;
left: 90px;
width: 840px;
padding: 5px 0;
margin: 0;
}
ul li ul li ul li { /* Third level list (second inline) */
display: inline;
position: relative;
margin: 0;
}




  

Never miss a thing.  Make Yahoo your home page. 
http://www.yahoo.com/r/hs
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

RE: [css-d] nested lists

[BJ]

"If you want to see the nested lists that I am working with currently go 
to: http://tct2005.com/wp/";


I looked.  I didn't see a single list, nested or otherwise.  Can you 
maybe be more specific on what you're trying to do?



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] nested lists

[jeremy]

Hey Christian...
I wanted to thank you for the awesome links!
I have been sitting here and playing with the Son of a Suckerfish set of 
Dropdowns... They are done really well!
The interesting thing, is that despite saying that it is IE friendly,.. 
their tutorial doesnt work in IE.
I am sittng here combing a few things.. hoping that i can figure out a 
way to make that happen.

thanks!
-me

Christian Heilmann wrote:


What you are talking about I presume is dynamic nested navigation
based on lists?

If that is the case, then son of suckerfish rules supreme:
http://www.htmldog.com/ptg/archives/50.php

However, a word of warning: Navigation like that is behaviour, and is
the job of JavaScript, as JS is also keyboard enabled - something CSS
cannot do, and kicks CSS' butt when it comes to browser support. I
have written a JS menu system that uses CSS for all the look and feel,
meaning you can still style it any way you want to:
http://www.onlinetools.org/tools/yadm/


On 6/29/05, jeremy <[EMAIL PROTECTED]> wrote:
 


Hi there..

So for the last 2 weeks, I have been trying to find a good example of
nested lists that i can look at that use pure css. I am trying to
implement them on my site. I have multiple versions here, none of which
i can make work... so i am putting out the call for nested lists..
If you have any, know of any good tutorials... or can direct me towards
something that might help me - I would greatly appreciate it.

If you want to see the nested lists that I am working with currently
go to: http://tct2005.com/wp/
(yes,... i know that my page is not valid. It is helps me to see my
errors, but i am not sure how to fix the errors to make it work correctly)
-jeremy

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

   




 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] nested lists

[jeremy]

Hi there..

So for the last 2 weeks, I have been trying to find a good example of 
nested lists that i can look at that use pure css. I am trying to 
implement them on my site. I have multiple versions here, none of which 
i can make work... so i am putting out the call for nested lists..
If you have any, know of any good tutorials... or can direct me towards 
something that might help me - I would greatly appreciate it.


If you want to see the nested lists that I am working with currently
go to: http://tct2005.com/wp/
(yes,... i know that my page is not valid. It is helps me to see my 
errors, but i am not sure how to fix the errors to make it work correctly)

-jeremy

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Nested lists

[jeremy]

Yes thank you! I had already validated, and i did get that error.
So here is what i did to that:

I changed the IDs so that there were no duplicates, and i still cannot 
seem to get this to work.

What happens is that it still uses one of the nested lists., and not both.
does that make sense?
Some of my thoughts have been that this isnt meant to do that. I am not 
sure,... but when i saw the source on - 
http://css.maxdesign.com.au/listamatic2/horizontal02.htm I was thinking 
that it would allow you  to have nested lists on all of the buttons.

hmm



David Dorward wrote:


On 6/27/05, jeremy <[EMAIL PROTECTED]> wrote:
 


I can see that there shouldnt be two id's in one document
   



http://validator.w3.org/

 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Nested lists]

[jeremy]

Hey thanks David!

I can see that there shouldnt be two id's in one document, however when 
i change the ID's so that they are different, i still get one sublist on 
the actual site. It keeps using the 2nd sublist that is entered in the 
code.

here is the site: http://tct2005.com/wp

here is the code:


   
   href="http://tct2005.com/wp/?cat=2";>News

   
   id="subcurrent1">Cases

   Articles
   Lectures
   Dailies
   

   
  
   Education

   
   id="subcurrent2">Learning

   people
   stuff
   more
   
   
  
   Register
  
   
  
   Contact

   




David Dorward wrote:


On 6/24/05, jeremy <[EMAIL PROTECTED]> wrote:

 


It works great like this, but it is not completed. I want to add a whole
sublist to "Item Two."
seems like it would be easy - just copy the sublist from "Item One" and
paste into the  of "Item Two." right?
   



 


http://tct2005.com/wp/
   



http://validator.w3.org/check?verbose=1&uri=http%3A//tct2005.com/wp/

You can't use the same id twice in a document.

 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Nested lists

[David Dorward]

On 6/24/05, jeremy <[EMAIL PROTECTED]> wrote:

> It works great like this, but it is not completed. I want to add a whole
> sublist to "Item Two."
> seems like it would be easy - just copy the sublist from "Item One" and
> paste into the  of "Item Two." right?

> http://tct2005.com/wp/

http://validator.w3.org/check?verbose=1&uri=http%3A//tct2005.com/wp/

You can't use the same id twice in a document.

-- 
David Dorward 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Nested lists

[jeremy]

Hi there.
I am having trouble making this simple nested list work.

here is where i got the list from:
http://css.maxdesign.com.au/listamatic2/horizontal02.htm

It works great like this, but it is not completed. I want to add a whole 
sublist to "Item Two."
seems like it would be easy - just copy the sublist from "Item One" and 
paste into the  of "Item Two." right?
I dont think so. It is just using the subnavlist of the last list in the 
code. (it is hard to explain, please take a look)


So here is what I have so far, and you will see the problem i am having:


http://tct2005.com/wp/


   
   href="http://tct2005.com/wp/?cat=2";>News

   
   id="subcurrent">Cases

   Articles
   Lectures
   Dailies
   

   
  
   Education

   
   id="subcurrent">Cases

   people
   stuff
   more
   
   
  
   Register
  
   
  
   Contact

   


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Nested lists menu problem

[Mark Hitchcock]

Hi everyone,

I am fairly new to CSS and have been working on a CSS to style some nested
lists.  This is basically for some menu navigation that can also have a
different style applied so that it can also be used for the site map.  I
keep getting this to a point when 1 out of 3 requirements don't work.  I
need to show bullets, indent the list items and also change the background
for each list item at the appropriate level.  I have attached some code I
have been working on and am hoping that someone may be able to help me
finish it off.  The background colour off each ul need to extend across the
width of the entire vertical nav.  Hope this all make sense.

*** Style ***

#navcontainer { 
padding: 0px 0px 0px 0px;
width: 250px;
}

#navcontainer ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 250px;
background-color: #5B6F8D;
color: #FF;
font-weight: bold;
font-size: small;
list-style-type: disc;
list-style-position: outside;
}

#navcontainer ul li a {
padding: 0px 0px 0px 20px;
display: block;
width: 230px;   
color: #15325C;
background-color: #5B6F8D;
}

#navcontainer ul li a:link, #navcontainer ul li a:visited {
color: #15325C;
text-decoration: none;
}

#navcontainer ul li a:hover {
color: #FF;
}

#navcontainer ul ul li a {
padding: 0px 0px 0px 40px;
display: block;
width: 210px;
background-color: #73849D;
}

#navcontainer ul ul li a:link, #navcontainer ul ul li a:visited {
color: #15325C;
text-decoration: none;
}

#navcontainer ul ul li a:hover {
color: #FF;
}

#navcontainer ul ul ul li a {
padding: 0px 0px 0px 60px;
display: block;
width: 190px;
background-color: #8A98AD;
}

#navcontainer ul ul ul li a:link, #navcontainer ul ul ul li a:visited {
color: #15325C;
text-decoration: none;
}

#navcontainer ul ul ul li a:hover {
color: #FF;
}



*** HTML ***

   
Item one
   
Subitem one 
Subitem two 
Subitem three
   
Subitem two 
Subitem three that is quite long
   
 
Subitem four 
   
 
Item two 
Item three which is really really really long to show
text wrapping  
Item four 
  


Cheers and thanks in advance
Mark


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/