PDA

View Full Version : E/Firefox and CSS nested lists - inconsistent rendering in FF and IE



dmshep99
Feb 17th, 2010, 03:40 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 redundancies which I have to still work on...

Here is the FF and IE7 rendering:
FF: http://shepdev.pcriot.com/images/list_FF.JPG
IE7: http://shepdev.pcriot.com/images/list_IE7.JPG

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

Excavator
Feb 17th, 2010, 04:14 AM
Hello dmshep99,
I wonder if your .headings shouldn't be an actual heading tag instead of a div.
See h1-h6 (http://www.w3schools.com/TAGS/tag_hn.asp) and divitis (http://ahsanity.wordpress.com/2007/05/15/divitis-and-classitis-two-new-words-in-my-css-vocabulary/).

Your ul is layed out like a dl (http://www.w3schools.com/TAGS/tag_dl.asp)... with the "list item 1" as the title ... have a look at a demo I have that even shows how to put a ul in a dl (http://nopeople.com/CSS/dl/index.html)-

In your situation, I think you're seeing a lack of support for display: inline-table;
Try this instead ...


.projects ul {
clear: left;
margin: 0;
list-style-type: none;
}

.projects li {
margin: 0;
padding-top: 1px;
padding-bottom: 1px;
float: left;
}

dmshep99
Feb 17th, 2010, 04:56 AM
Thanks a lot, Excavator!

I tried with float left but did not do clear.

The blocks were merged together after this change so I added some extra right & left padding.

This seems closer to what I need...the only problem seems that the headings somehow wrap around. I tried to use H3 instead of DIV for headings (just to test) but didn't help.

Here is the result:

http://www.shepdev.pcriot.com/list1.html

the same issue in FF and IE7:
http://www.shepdev.pcriot.com/images/list1_IE7.JPG

dmshep99
Feb 17th, 2010, 05:22 AM
YEAH!

I had to do:

clear: left;

for the heading div as well and now it is all OK:


.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;
}

http://www.shepdev.pcriot.com/list1.html

http://www.shepdev.pcriot.com/images/list1_IE7_working.JPG

Now...the only minor things is that I had originally wanted the project thumbs to turn black once visited and red on hover/active but couldn't get it to work...seems trivial but apparently isn't...

Thanks again!