1 Problems with the photothumbnail effect in CSS

Hi Mark,

Just wanted to thank you for your excellent article about replacing tables with CSS for photo thumbnails. It was exactly what I wanted.

However, in testing it worked fine in a simple example, but when I moved it into my site it didn’t go so well. (The old table based pages are online).

It started doing very strange things for example: When I hit refresh the text above the main div blocks gets wiped out. Resizing the window slightly restores is. Hitting f5 kills it again. To be this sounds very much like a browser bug, but I’m using the latest IE on XP.

The example given seems to work well if you have margins or any other stuff around your page, but if you use a 3 coloumn layout like mine (check my site) the black border of the frame runs at times under the edge of the thumbnails during resize operations. You can see an example of my 3 coloumn layout at my site, and if you go to photos you’ll see the table structure I am trying to replace.

Anyway, this is an old article, and not sure if you are able to respond to this, but if you are, and you have time to help me out, I’d love to send you an example of what isn’t working just to check if I am not going insane… My backup plan is to go back to tables – I did really want to make a good go at converting my photo skin (the one you see at the site) into pure CSS before I release it.

Mark

posted at 02:59 am on October 22, 2003 by Mark Fyvie

2 Overnight, the CSS fails

I looked at this demo 2 days ago on the old site…like the new look! But it broke your lovely demostration. Now the images don’t wrap.

posted at 03:45 pm on October 22, 2003 by Tim

3 Varied height breaks wrapping

Using the sample code for layout out thumbnails in an auto-resizing way, I noticed that if one image’s caption extends to a second (or third) line under the image the wrapping doesn’t handle it well.

Is there a way to make this technique smarter about the height differences of the DIVs ?

posted at 10:08 am on October 23, 2003 by Darien

4 extra space under rows in IE6 and NS6

Hi,

I’ve been trying use this example to display photo thumbnails in 3 columns and 4 rows. It works, but in IE6 and NS6 there is extra space under each row. Even if I set all margins and padding to zero there is space under each row. In Opera5 and Mozilla Firebird 0.7 everything displays perfectly. You can view a test page I’ve been working on at the url below:

http://www.xcelco.on.ca/~aross/demo/css_test2.html

It may be a small thing, but it still bothers me and you really notice it with smaller thumbnails. I never had this problem with tables and I’d really appreciate any advice you can offer.

Thanks,

Andrew

posted at 05:13 am on October 25, 2003 by Andrew

5 Photo album divs require a width

Based on my experiments the photo album divs require having an explicit width set in order to work properly.

posted at 08:32 am on November 4, 2003 by Scott Chesnut

6 Floating? Not quite right...

The test on the excelco.on.ca site above works for me on IE6. On Firebird 0.7 the images float against the right border of each box they are contained in.

posted at 02:35 pm on November 4, 2003 by Marco

7 form example 'valign' problem

I’m using the form example that he gave, and the result of the text next to the textarea is all the way at the bottom of the textarea, instead of at the top, like in said example. I’ve examined the css and all, and found nothing different, doctype is appropriate as well.

anyone have this problem? and any insight on a solution?

posted at 09:09 am on November 5, 2003 by john

8 span class="label" ????????

Everyone seems to be hyping standards-compliant, semantically valid markup. Every so often, though, we see something like this: use of the span tag with class attribute when a tag was specifically designed for this: label. Why?

I’ve found < label > to be a good tag for this. I just link it to the form element with the “for” attribute, style it a little (I make it a block element so it’s on the line above the form input method), and I’m good to go with better markup than before. It also helps voice browsers tell users how better to access form elements. A link to some < label > information:

http://htmlhelp.com/reference/html40/forms/label.html

posted at 12:08 pm on November 11, 2003 by Jeff Walden

9 Alignment of Label and Inputs in Form Example

I’ve been looking for a way to align the <input> element to the bottom of the label <div>. The situation I’m trying to design for is when a label breaks to two lines, I’d like to allow the <input> field to appear at the bottom of label.

Example of what I want to do:

Field
Label : <input here>

What happens now is :

Field <input here>
Label :

posted at 05:56 pm on November 19, 2003 by Peter Kasik

10 Doesn't work if using inheritance

I wanted to try your gallery code using inheritance. So, instead of :

I used div.container>div
unfortunately, the browser acted as if the container div was empty. Even the spacer fix wouldn’t work. As a matter of fact, it only worked if I made spacer into a instead of a <div>. Does anyone know why??

posted at 07:23 pm on November 24, 2003 by Funkatron

Discussion Closed

New comments are not being accepted, but you are welcome to explore what people said before we closed the door.

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)