...

View Full Version : Help with Floating Thumbnails Left



metsrok
01-27-2007, 08:32 PM
I'm trying to get a gallery of thumbnails floated left but seem to have issues with the wrapping I think... it's hard to explain, so here's a link:
http://shrutishah.net/portfolio.html

and screenshot:
http://shrutishah.net/Picture%201.jpg

My code for the image is:

<img src="portfolio/smoke-thumb.jpg" border="0" class="thumbnail">

And the thumbnail class is defined as:

.thumbnail {
padding: 0 20px 20px 0;
float:left;
}

Arbitrator
01-27-2007, 09:07 PM
You may have noticed that a break occurred at the fourth image. Thatís because something is wrong with it: class="thumbnail".

That document also contains errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fshrutishah.net%2Fportfolio.html):

title="Drapery &lt;br /&gt;< span>Charcoal and Conte, 2003</span>"> is illegal in XHTML. Those less‐than signs must be escaped. It also results in a pretty ugly tooltip when you hover over the images.
Images require alt attributes; those provide a text substitute when the image cannot be displayed.
All elements must be closed in XHTML, including image elements.

The CSS document contains two more (typographical) errors (http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fshrutishah.net%2FCSS.css).

metsrok
01-27-2007, 09:50 PM
Thank you for your help. The spelling error did indeed correct my mistake.

I don't understand the "escaped" part - those tags have to be &lt; and &gt; as well? I have those in there and because I'm using lightbox, if you click on the image on my site, you will see what I mean.

I do plan on having alts, I just didn't get around to it yet. Thank you.

Arbitrator
01-27-2007, 10:01 PM
I don't understand the "escaped" part - those tags have to be &lt; and &gt; as well? I have those in there and because I'm using lightbox, if you click on the image on my site, you will see what I mean.By escaped, I meant that character references are necessary for the illegal characters. For example: &lt; (named) or &#x3c; (hexadecimal). In XHTML, all less‐than signs and ampersands must be escaped unless they appear inside a CDATA section.

I believe that this requirement doesnít exist (in this case) in HTML. If Lightbox requires that you not escape those characters, then you should switch to HTML. As it is, Iím not sure what advantage youíre deriving from using ďXHTMLĒ here in the first place.

Seems that my initial assertion was right based upon a test. Escaping less‐than signs in attribute values is not required in HTML. I believe that this is because attribute values are interpreted as CDATA sections in HTML.

metsrok
01-27-2007, 10:05 PM
I'm not sure I understand that, but I'll take your word for it and change them. If I may ask, why only < and not >?

Also, I don't think there's a way to get rid of that ugly tooltip since it's my title, am I correct? The title is translated to the caption in lightbox...

Arbitrator
01-27-2007, 10:17 PM
I'm not sure I understand that, but I'll take your word for it and change them. If I may ask, why only < and not >?You donít have to take my word for it. The W3C Markup Validator (http://validator.w3.org/) resource I provided in a previous post confirms it.

The reason the less‐than sign is not permitted is because it starts a new tag. As for the greater‐than sign being permitted, Iím not sure why that is but the other isnít. I believe it has to do something with the rules of XML (XHTML is an XML language). XML is the reason you have to do things like self‐close your empty elements, like <hr/>.


Also, I don't think there's a way to get rid of that ugly tooltip since it's my title, am I correct? The title is translated to the caption in lightbox...Since thatís the way browser vendors have chosen to display the title attribute, I donít think that thereís a way to get rid of it without removing the attribute. You can do that via script, but it would probably require rewriting part of Lightbox.

metsrok
01-28-2007, 12:22 AM
I'm sorry, I meant to say I didn't understand the CDATA stuff...

Anyway, thank you for your help

Arbitrator
01-28-2007, 01:21 AM
I'm sorry, I meant to say I didn't understand the CDATA stuff...Ah. Character data (CDATA) is not parsed as markup. I believe that PCDATA (parsed character data) is the opposite, where code beginning with certain delimiters (< and &) is parsed as markup. The concept is most often encountered with embedded scripts:


<script type="text/javascript">
if (1 < 2) alert("One is less than two");
</script>

In HTML, script element content is automatically CDATA and the above is fine. In XHTML, it is not, because the content is parsed. Thus, the code gets read something more like the following, which is clearly invalid:


<script type="text/javascript">
if (1
< 2) alert("One is less than two");</script>

Thatís why youíll see the following in XHTML:


<script type="text/javascript">
<![CDATA[
if (1 < 2) alert("One is less than two");
]]>
</script>

If the document is displayed as HTML (pseudo‐XHTML), then the problems wonít be evident though because the document is parsed according to the rules of HTML, not XHTML. Pseudo‐XHTML documents (like yours) are used because Internet Explorer doesnít understand the real thing. Because itís not real XHTML, you get none of the extra functionality of XHTML, but still need to adhere to all of its stricter rules, thus my comment, ďIím not sure what advantage youíre deriving from using ĎXHTMLí here in the first placeĒ.

metsrok
01-28-2007, 03:30 AM
I see now. Thank you! Very informant, and a great help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum