Div within a ul – have I built a house of cards?

[Patrick O’C]

Hi, first post, first project (though it has taken a while, and wow what a learning curve!) and a total amateur, so I hope this isn’t too basic for the forum.

I have a problem with IE reading what I thought was good code (works in Firefox) but after trying to validate it I suspect that the problem may be because I have incorrectly nested the block & inline elements. But before I start again from scratch, I’m hoping someone here can help (even if just to confirm that it is in need of a new build, but hopefully that won’t be necessary!).

I have a scrolling list that contains text-only "header" items as well as ahref list items that have spans – these spans are hidden by default and become on click(focus/active). There is additional code within the spans that contains further links, though I’ve put in a conditional comment to exclude these from IE for now. (One problem at a time!) FF users will see these though.

If you are running Firefox (3.6.3 works for me) you can see how it is supposed to look here: http://www.conservationenterprises.com/portfolio.html

This screenshot of IE6 shows how it doesn’t work (screenshot is from another page on the site but it’s the same code structure), even with the extra nested spans removed, as there is an alignment issue with the list headers and other list items. It’s the light grey box on the far right of the page image that this is all about:Inbox.gif[/attachment]” class=”bbcode_url”>[attachment=0]Inbox.gif[/attachment]

The problem: although it works fine in FF, the validator tells me that I can’t legally nest a div inside a ul [see code below: listcat(div) is nested within scrollbox(ul)]. When I change the listcat div tags to ul or li tags, it validates but is a giant mess even in FF.

The CSS validates fine.

SO … I’m wondering if it is an IE bug that isn’t reading the CSS properly, or whether it is the non-validated html/nesting issue that will always cause IE to not display correctly no matter what I try to fix in the CSS? I’m happy for now to have non-valid html as long as it works – will strive for perfection in stage 3!

Any of your wisdom would be very much appreciated!

The pruned html is below:

Code:

text text text

•  
A header within the list
• a list Itemopening text in the span popup

  span popup text, whatever, stuff, etc etc

  
  

•  
Another header within the list
• a list Itemmore opening text in the next span popup

  this span popup’s text, whatever, stuff, etc etc

  
  

•  

and the relevant CSS:

Code:

#greyback {float: right; width: 21em; height: auto; background-color: #e3e3e3; margin: 0 auto; margin-top: 1em; margin-right: 2em; padding-top: 1em; font-family: Corbel, Calibri, sans-serif; border:0.25em solid #535353;}

#greyback h2 {font-size: 0.8em; margin: 0 auto; margin-left: 1em; margin-right: 1em; margin-top: -0.5em; padding-top:1em; font-weight: bold; text-align: center; font-family: Arial, sans-serif;color:#535353;}

#scrollbox {margin: 0 auto; margin-top: 1em; margin-bottom: 1em; width:18em; list-style: none; height:auto; max-height: 21em; overflow:auto; border-bottom: 0.1em solid #FFA500; border-top: 0.1em solid #FFA500; }

.listcat {float: left; text-align:left; width: 100%; margin-left:-2em; margin-right: 0.5em; margin-top: 0.1em; margin-bottom: 0.3em; padding-top:0.5em; color: green; font-size: 90%; font-weight:bold;}

#scrollbox a {float: left; color:#000000; text-decoration:none; width:18em; height: auto; margin: 0 auto; margin-bottom: 0.5em; font-family: Arial, sans-serif; font-size: 0.9em; text-align:left;}

#scrollbox a.menu {}
#scrollbox a span {display:none; position:absolute; left:0em; top:0;}
#scrollbox a span img {float: right; border:0; max-width:7.5em;}
#scrollbox a span img:hover {border:0; max-width:7.8em;}
#scrollbox a span img.team {border:solid 2px #7ebb11; padding:2px; max-width:8em; margin: 0 auto; margin-bottom: 0.3em; margin-left: 0.5em; margin-top: 0em;}
#scrollbox a:hover {border: 0; color: #7ebb11; font-size:0.9em;}
#scrollbox a:hover span {border: 0; color: #535353;}
#scrollbox a span:focus {color: blue;}
#scrollbox a:active {border:none; color: #535353; /*this is the color of the hover pop-up text */ text-decoration: none;}
#scrollbox a:focus {border:0em solid #000; outline:0;}

#scrollbox ul {}
#scrollbox li {float:left; list-style: none; background: url(blank.png) no-repeat left center; margin-left: -1em; font-family:Arial, sans-serif; font-size: 0.9em;}

#scrollbox a:active span, #scrollbox li a:active span, #scrollbox a:focus span, #scrollbox li a:focus span {display: block; width: 52.5em; min-height: 20em; height: auto; left: 1.5em; top:18em; z-index:10; font-size:0.9em; text-align: left; padding: 1em; padding-bottom: 0em; background-color: #ffffff; color: #535353; border: solid #FFA500 0.25em;}

#spanlink {float:right; width: auto;} /*for the embedded “live link within a freeze” link */
#spanlink img {}
#spanlink img:hover {width: 7.8em;}

Cheers
Patrick.

[Author]

Posts