Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with Floating Thumbnails Left

    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:


    My code for the image is:
    Code:
    <img src="portfolio/smoke-thumb.jpg" border="0" class="thumbnail">
    And the thumbnail class is defined as:
    Code:
    .thumbnail {
    	padding: 0 20px 20px 0;
    	float:left;
    }

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    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:
    • 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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New Coder
    Join Date
    Jan 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by metsrok View Post
    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.

    Edit: 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.
    Last edited by Arbitrator; 01-27-2007 at 10:20 PM.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by metsrok View Post
    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 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/>.

    Quote Originally Posted by metsrok View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    New Coder
    Join Date
    Jan 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm sorry, I meant to say I didn't understand the CDATA stuff...

    Anyway, thank you for your help

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by metsrok View Post
    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:

    Code:
    <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:

    Code:
    <script type="text/javascript">
      if (1
      < 2) alert("One is less than two");</script>
    That’s why you’ll see the following in XHTML:

    Code:
    <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”.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    New Coder
    Join Date
    Jan 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I see now. Thank you! Very informant, and a great help!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •