IE/Firefox and CSS nested lists

February 17, 201016 yr

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:

IE7:

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

February 17, 201016 yr

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"> </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.

February 17, 201016 yr

Author

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.codingforums.com/showthread.php?p=923237#post923237

Thanks again!

February 17, 201016 yr

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"> </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"> </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.

February 17, 201016 yr

Author

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

February 17, 201016 yr

Author

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!

February 17, 201016 yr

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>

February 17, 201016 yr

Author

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.pcriot.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

February 17, 201016 yr

Be very careful with the ' or " around image urls. You left out one at the end here

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.

February 17, 201016 yr

Author

You are AMAZING! :yahoo:

Thank you sooo much! Works like a charm!

IE/Firefox and CSS nested lists

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)