[thelist] xhtml validation of CSS image gallery

Bob Meetin ontheroad at frii.com
Sat Jan 13 22:16:37 CST 2007


Bill,

Thanks - I didn't try this yet, but I will hold in reserve.  I resolved 
the problem by replacing the offending section with <b></b> (I will fix 
the deprecated html later). and added a display block to the CSS style.

<b class='ls_title'> Bor Sarng </b>

.ls_title {
 background-image: none;
 list-style: none;
 text-align: center;
 color: #fff;
 font: bold 9px Verdana, sans-serif;
 margin: 28px 0 0 0;
 margin: 32px 0 0 0;
display: block;
}

I hadn't grabbed the concept of display:block.  The world is happy again.

-Bob


Bill Moseley wrote:
> On Fri, Jan 12, 2007 at 04:41:25PM -0700, Bob Meetin wrote:
>   
>> I got this gallery to work in both IE6 and Firefox, but can't get it to 
>> validate as xhtml compliant because of the <ul><li></li></ul> contained 
>> within a <a href></a>.  I'm using the unordered list to position the 
>> image title in the center and just above the bottom of the image 
>> container.  I run into the same problem if I use a paragraph <p></p>.
>>     
>
> So your goal is to get the entire <div> clickable as a link?
>
> Someone with better css skills might help, but what think I've done
> is:
>
>     <div>
>         <a class="hide" href="link.html"><span>click here</span></a>
>
>         <ul>
>             <li><a href="link.html">text</a></li>
>             <li><a href="link.html">text</a></li>
>             <li><a href="link.html">text</a></li>
>         </ul>
>     </div>
>
> Then position the hide absolute and move the span off page.
>
> That is something like this:
>
>     a.hide {
>         position: absolute;
>         width: 100%;
>         height: 100%;
>     }
>
>     .hide span {
>         left: -3000px;
>         position: absolute;
>     }
>
>   





More information about the thelist mailing list