[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