IE/Firefox and CSS nested lists

View New Content

Page 1 of 1

You cannot start a new topic
You cannot reply to this topic

IE/Firefox and CSS nested lists sublist shows horizontal to parent in FF but not in IE

#1 dmshep99

Forum Newcomer

Group: Members
Posts: 10
Joined: 16-February 10
Reputation: 0

Posted 17 February 2010 - 02:17 AM

Hi,

I wanted to have a nested CSS-styled list where the subelements would show horizontal (on the same level) as parents.
While FF does it as it should, the IE...figures...does not.

As snippets:
HTML LIST:

<div class="projects">
<div class="headings">First heading</div>
<ul>
 <li>List item 1</li>
 <li class="projectthumbs">
   <ul>
      <li><a href='' imgsrc='/images/projects/pic_1a.jpg'></a></li>
      <li><a href='' imgsrc='/images/projects/pic_1b.jpg'></a></li>
      <li><a href='' imgsrc='/images/projects/pic_1c.jpg'></a></li>
      <li><a href='' imgsrc='/images/projects/pic_1d.jpg'></a></li>
   </ul>
  </li>
</ul>
(...)
</div>

CSS STYLING:

.headings {
    font-size: 12px;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    text-align: left;
    font-weight:bold;
    color: #B82129;
    padding-bottom: 5px;
    padding-top: 5px;
}

.projects {
    font-size: 11px;
    font-family: Verdana, Geneva, sans-serif;
    list-style-type: none;
}

.projects ul {
    margin: 0;
    list-style-type: none;
}
		
.projects li {
    margin: 0;
    padding-top: 1px;
    padding-bottom: 1px;
    display: inline-table;
}


.projectthumbs {
    font-size: 14px;
}

.projectthumbs ul {
    height: 10px;
    padding: 0 0 1px 15px
}

.projectthumbs li {
    float: left;
    list-style-type: none;
    height: 12px;
    width: 12px;
    margin: 0 3px 0 0;
    display: inline-table;
}

.projectthumbs li a{
    padding: 0;
    color: #FFFFFF;
    background-color: #999999;
    width: 8px;
    height: 12px;
    padding: 0 2px;
    display: block;
}

.projectthumbs li a:active {
    background-color: #B82129;
}
.projectthumbs li a:hover {
    background-color: #B82129;
}

/*.projectthumbs li a:visited {*/
/*    background-color: #433e39;*/
/*}*/

Sorry for messy CSS, I have some redunancies which I have to still work on...

Here is the FF and IE7 rendering:
FF: Posted Image

IE7:

The code could be found at: http://www.shepdev.p...t.com/list.html.

#2 Wickham

Web Guru

Group: Moderators
Posts: 2,875
Joined: 11-June 09
Reputation: 257
Gender:Male
Location:Salisbury UK
Experience:Intermediate
Area of Expertise:Web Developer

Posted 17 February 2010 - 08:39 AM

This works in IE7 and Firefox:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"     
"http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<meta name="keywords" content="Wickham">                
<meta name="description" content="Test items">            
<meta http-equiv="content-type" content="text/html; 
charset=iso-8859-1">

<title>Test</title>                  

<style type="text/css">

.headings {
    font-size: 12px;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    text-align: left;
    font-weight:bold;
    color: #B82129;
    padding-bottom: 5px;
    padding-top: 5px;
}

.projects {                   
    font-size: 11px;
    font-family: Verdana, Geneva, sans-serif;
    list-style-type: none;
}

.projects ul {                
    margin: 0;
    list-style-type: none;
}
		
.projects li { 
    margin: 0;
    padding-top: 1px;
    padding-bottom: 1px;
    display: inline-table;         float: left;
}

.projectthumbs {         
    font-size: 14px;
}

.projectthumbs ul {                 margin: 0; 
    height: 10px;
    padding: 0 0 1px 15px
}

.projectthumbs li {
    float: left;
    list-style-type: none;
    height: 12px;
    width: 12px;
    margin: 0 3px 0 0;
    display: inline-table;
}

.projectthumbs li a{              
    padding: 0;
    color: #FFFFFF;
    background-color: #999999;
    width: 8px;
    height: 12px;
    padding: 0 2px;
    display: block;
}

.projectthumbs li a:active {
    background-color: #B82129;
}
.projectthumbs li a:hover {
    background-color: #B82129;
}

.clear { float: none; width: 100%; height: 0; line-height: 0; font-size: 0; }


/*.projectthumbs li a:visited {*/
/*    background-color: #433e39;*/
/*}*/

</style>

</head>

<body> 

<div class="projects">
<div class="headings">First heading</div>
<ul>
 <li>List item 1</li>
 <li class="projectthumbs">
   <ul>
      <li><a href='' imgsrc='/images/projects/pic_1a.jpg'></a></li>
      <li><a href='' imgsrc='/images/projects/pic_1b.jpg'></a></li>
      <li><a href='' imgsrc='/images/projects/pic_1c.jpg'></a></li>
      <li><a href='' imgsrc='/images/projects/pic_1d.jpg'></a></li>
   </ul>
  </li>
<li class="clear">&nbsp;</li>
<li>List item 2</li>
 <li class="projectthumbs">
   <ul>
      <li><a href='' imgsrc='/images/projects/pic_1a.jpg'></a></li>
      <li><a href='' imgsrc='/images/projects/pic_1b.jpg'></a></li>
      <li><a href='' imgsrc='/images/projects/pic_1c.jpg'></a></li>
      <li><a href='' imgsrc='/images/projects/pic_1d.jpg'></a></li>
   </ul>
  </li>

</ul>

</div>

</body>
</html>

I needed to add float: left; to .projects li and also a full-width nil-height li tag to form a full-width barrier between the floated items. If you add clear: both to the li tag that has List 2 that will form a new line but the following li tag class="projectthumbs" would jump up over it alongside the first one, so a full-width barrier is necessary between the sections.

My code is a bit clumsy and possibly could be simplified.

#3 dmshep99

Forum Newcomer

Group: Members
Posts: 10
Joined: 16-February 10
Reputation: 0

Posted 17 February 2010 - 12:36 PM

Thanks so much Wickham!

I had tried float: left before but failed to clear...so it never worked for me.

I have also posted on a different forum, where another user found a different solution to my problem: http://www.codingfor...3237#post923237

Thanks again!

#4 Wickham

Web Guru

Group: Moderators
Posts: 2,875
Joined: 11-June 09
Reputation: 257
Gender:Male
Location:Salisbury UK
Experience:Intermediate
Area of Expertise:Web Developer

Posted 17 February 2010 - 01:00 PM

I didn't code as far as the Second Heading so I agree with the other answer that .headings needs clear: left;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"        
"http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<meta name="keywords" content="Wickham">                
<meta name="description" content="Test items">            
<meta http-equiv="content-type" content="text/html; 
charset=iso-8859-1">

<title>Test</title>                  

<style type="text/css">

.headings { clear: left;
    font-size: 12px;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    text-align: left;
    font-weight:bold;
    color: #B82129;
    padding-bottom: 5px;
    padding-top: 5px;
}

.projects {                   
    font-size: 11px;
    font-family: Verdana, Geneva, sans-serif;
    list-style-type: none;
}

.projects ul {               
    margin: 0;
    list-style-type: none;
}
		
.projects li { 
    margin: 0;
    padding-top: 1px;
    padding-bottom: 1px;
    display: inline-table;         float: left;
}

.projectthumbs {         
    font-size: 14px;
}

.projectthumbs ul {                 margin: 0; 
    height: 10px;
    padding: 0 0 1px 15px
}

.projectthumbs li {
    float: left;
    list-style-type: none;
    height: 12px;
    width: 12px;
    margin: 0 3px 0 0;
    display: inline-table;
}

.projectthumbs li a{              
    padding: 0;
    color: #FFFFFF;
    background-color: #999999;
    width: 8px;
    height: 12px;
    padding: 0 2px;
    display: block;
}

.projectthumbs li a:active {
    background-color: #B82129;
}
.projectthumbs li a:hover {
    background-color: #B82129;
}

.clear { float: none; width: 100%; height: 0; line-height: 0; font-size: 0; }


/*.projectthumbs li a:visited {*/
/*    background-color: #433e39;*/
/*}*/

</style>

</head>

<body> 

<div class="projects">

<div class="headings">First heading</div>
<ul>
 <li>List item 1</li>
 <li class="projectthumbs">
   <ul>
      <li><a href='' imgsrc='/images/projects/pic_1a.jpg'></a></li>
      <li><a href='' imgsrc='/images/projects/pic_1b.jpg'></a></li>
      <li><a href='' imgsrc='/images/projects/pic_1c.jpg'></a></li>
      <li><a href='' imgsrc='/images/projects/pic_1d.jpg'></a></li>
   </ul>
  </li>
<li class="clear">&nbsp;</li>
<li>List item 2</li>
 <li class="projectthumbs">
   <ul>
      <li><a href='' imgsrc='/images/projects/pic_1a.jpg'></a></li>
      <li><a href='' imgsrc='/images/projects/pic_1b.jpg'></a></li>
      <li><a href='' imgsrc='/images/projects/pic_1c.jpg'></a></li>
      <li><a href='' imgsrc='/images/projects/pic_1d.jpg'></a></li>
   </ul>
  </li>

</ul>

<div class="headings">Second heading</div>
<ul>
 <li>List item 1</li>
 <li class="projectthumbs">
   <ul>
      <li><a href='' imgsrc='/images/projects/pic_1a.jpg'></a></li>
      <li><a href='' imgsrc='/images/projects/pic_1b.jpg'></a></li>
      <li><a href='' imgsrc='/images/projects/pic_1c.jpg'></a></li>
      <li><a href='' imgsrc='/images/projects/pic_1d.jpg'></a></li>
   </ul>
  </li>
<li class="clear">&nbsp;</li>
<li>List item 2</li>
 <li class="projectthumbs">
   <ul>
      <li><a href='' imgsrc='/images/projects/pic_1a.jpg'></a></li>
      <li><a href='' imgsrc='/images/projects/pic_1b.jpg'></a></li>
      <li><a href='' imgsrc='/images/projects/pic_1c.jpg'></a></li>
      <li><a href='' imgsrc='/images/projects/pic_1d.jpg'></a></li>
   </ul>
  </li>

</ul>

</div>

</body>
</html>

There always seem to be several ways to cure a problem. You (or the other answer) have started a new ul tag for List 2 in each section whereas I continued with li tags inside the same ul tag, separating the sections with a full-width nil-height li tag to clear the floats.

#5 dmshep99

Forum Newcomer

Group: Members
Posts: 10
Joined: 16-February 10
Reputation: 0

Posted 17 February 2010 - 02:00 PM

Ah! Thanks for pointing it out, now (after playing with it) I see what you did, very clever with continuing the LI but clearing all the floats!
Thanks

#6 dmshep99

Forum Newcomer

Group: Members
Posts: 10
Joined: 16-February 10
Reputation: 0

Posted 17 February 2010 - 02:27 PM

hmmm...actually maybe you can help me with another problem...

I have currently commented out this section:

/*.projectthumbs li a:visited {*/
/* background-color: #433e39;*/
/*}*/

...because it would change all of the backgrounds (even not visited to the above color).
This should be very trivial but it is not working for me...

I wanted to have the squares/background color od the projectthumbs list as follows:
link: #999999;
hover/active: #B82129;
visited: #433e39;

Any idea what could be wrong?

Thanks again!

#7 Wickham

Web Guru

Group: Moderators
Posts: 2,875
Joined: 11-June 09
Reputation: 257
Gender:Male
Location:Salisbury UK
Experience:Intermediate
Area of Expertise:Web Developer

Posted 17 February 2010 - 03:50 PM

This works in IE7 and Firefox:-

.projectthumbs li a:link {
    background-color: #999999;
}
.projectthumbs li a:visited {
    background-color: #433e39;
}

.projectthumbs li a:hover, .projectthumbs li a:active {
    background-color: #b82129;
}

Hover works but I can't test visited without working links, but that should work too. Remember to keep the order link, visited, hover, active. The link state is dark like the visited state until you add a working link to an image.

Instead of this

<li><a href='' img src='/images/projects/pic_1a.jpg'></a></li>

I would expect this

<li><a href='/images/projects/pic_1a.jpg'></a></li>

#8 dmshep99

Forum Newcomer

Group: Members
Posts: 10
Joined: 16-February 10
Reputation: 0

Posted 17 February 2010 - 05:33 PM

Thanks Wickham!

I had the blank href temporarily and didn't realize it would affect the test, but you are right.

I added some test images and modified the style sheet: http://www.shepdev.p....com/list2.html

.projectthumbs li a:link {
    background-color: #999999;
}
.projectthumbs li a:visited {
    background-color: #b82129;
}

.projectthumbs li a:hover, .projectthumbs li a:active {
    background-color: #b82129;
}

For whatever reason though, the visited background becomes the same as the page background, even though for the sake of test I set it to a very visible color (same as the hover/active). So that after you click and visit images, eventually your gray squares disappear

#9 Wickham

Web Guru

Group: Moderators
Posts: 2,875
Joined: 11-June 09
Reputation: 257
Gender:Male
Location:Salisbury UK
Experience:Intermediate
Area of Expertise:Web Developer

Posted 17 February 2010 - 07:39 PM

Be very careful with the ' or " around image urls. You left out one at the end here
<li><a href='images/Bricks.bmp></a></li>
and it affected the whole layout of the List 2 First Heading.

The different colors worked in my test and I see that you've got different styles. Add in .projectthumbs li a , delete the first one for .projectthumbs li a:link and edit the visited color:-

.projectthumbs li a{              
    padding: 0;
    color: #FFFFFF;
    background-color: #999999;
    width: 8px;
    height: 12px;
    padding: 0 2px;
    display: block;
}

/*.projectthumbs li a:link{              
    padding: 0;
    color: #FFFFFF;
    background-color: #999999;
    width: 8px;
    height: 12px;
    padding: 0 2px;
    display: block;
}*/

.projectthumbs li a:link {
    background-color: #999999;
}
.projectthumbs li a:visited {
    background-color: #433e39; /*was #b82129;*/
}

.projectthumbs li a:hover, .projectthumbs li a:active {
    background-color: #b82129;
}

I substituted my own images and they all worked in Firefox but in IE7 bmp and png images loaded in a new window but jpg images didn't load. I'm not sure why that is.