Another thumbnail floating issue

A row of thumbnails being floated left are not moving all the way left.

[IrmaVep]

I've been searching, reading posts, and trying solutions here for about two and a half hours. Nothing's helping so far.

I'm using IE 6.0.2800.1106 SP 1. I'm (of course) trying CSS for the first time on my site. I've read nearly every article on A List Apart, and I'm trying to implement some of their code. You'll be able to tell when you see my mess of a style sheet. Everything works wonderfully except for one issue.

My site is an image library. I have many thumbnails of different sizes, none larger than about 130 px either direction. I've been collecting the images for years and making thumbnails out of them. Now, I have a bunch of stuff in my style sheet because I want a three column layout with boxes of specific sizes. I'd like to post a link to one of my pages but I can't - my conscience says it would feel like spamming a forum, and my image library consists of a silent film star who sometimes doesn't wear much, and that violates the posting guidelines. Hopefully you can get an idea of the layout from the style sheet I'll post below.

Here is the problem - the floated thumbnails aren't being positioned all the way to the left on every row. I think the varying sizes of my thumbnails are preventing proper display because of the definition of the float property (top, bottom, left and right edges of floated elements having to be aligned with the edges of other floated elements). Why? Because the floating seems to work better - better, but not perfectly - on pages where I have thumbnails that are almost exactly the same size.

My basic questions are:

Is my CSS/HTML code screwed up?

Do I have to resize all of my thumbnails?

One of the things I've tried that hasn't worked is putting all of my floated elements in a container DIV with a spacer.

Feel free to tell me what I'm doing that's redundant and/or incorrect. I'll welcome all kinds of constructive criticism! Thank you so much for your time, this problem is really frustrating me - more for my lack of practical knowledge than anything else.

Here's what I'm using to float my thumbnails:

div.float {
float: left;
display: inline;
margin-right: 10px;
}

Here's the HTML:

<div class="float">
<a href="link to image"><img src="thumbnail" width="73" height="90" alt="1" border="0" /></a><br />
<p><a href="link to popup comment window"><img src="icon" width="18" height="15" alt="" border="0" />Notes<script type="text/javascript">myCount('xx'); </script></a></p>
</div>

My style sheet:

#top {
margin: 0px 15px 0px 5px;
padding: 5px;
border: 1px solid Black;
background: White;
height: 10px;
}

html>body #top {
height: 10px;
}

#left {
position: absolute;
top: 140px;
left: 10px;
margin: 15px 5px;
padding: 5px;
border: 1px solid Black;
background: White;
width: 100px;
font-family: Arial, Helvetica, sans-serif;
color: Black;
font-size: small;
}

html>body #left {
width: 120px;
}

#middle {
position: absolute;
left: 140px;
right: 180px;
background: White;
font-family: Arial, Helvetica, sans-serif;
color: Black;
margin-bottom: 5px;
}

#right {
position: absolute;
top: 140px;
right: 0px;
margin: 15px;
padding: 5px;
border: 1px solid Black;
background: White;
width: 165px;
height: 70px;
font-family: Arial, Helvetica, sans-serif;
color: Black;
font-size: small;
}

html>body #right {
width: 170px;
}

div.row {
clear: both;
padding-top: 10px;
}

div.row span.label {
float: left;
width: 100px;
text-align: right;
}

div.row span.formw {
float: right;
text-align: left;
}

p {
color: Black;
line-height: normal;
font-family: Arial, Helvetica, sans-serif;
margin-left: 0%;
margin-bottom: 5px;
}

div.float {
float: left;
display: inline;
margin-right: 10px;
}

div.float p {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
margin-top: 1%;
}

div.indent {
text-indent: 5%;
color: Black;
font-size: medium;
line-height: normal;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 5%;
margin-left: 10%;
margin-right: 10%;
margin-top: auto;
}

h1 {
font-size: large;
font-family: Arial, Helvetica, sans-serif;
color: Black;
margin-left: 125px;
margin-top: 25px;
background: White;
}

#header {
float: left;
width: 100%;
background: #FFFFFF url("bg.gif") repeat-x bottom;
font-size: medium;
line-height: normal;
margin-left: 60px;
}
#header ul {
margin: 0;
padding: 10px 10px 0;
list-style: none;
font-size: medium;
}
#header li {
float: left;
background: url("left.gif") no-repeat left top;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
padding: 0 0 0 9px;
}
#header a {
float: left;
display: block;
background: url("right.gif") no-repeat right top;
padding: 5px 15px 4px 6px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: Black;
}

/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
color: Blue;
}

#header #current {
background-image:url("left_on.gif");
font-family: Arial, Helvetica, sans-serif;
}

#header #current a {
background-image: url("right_on.gif");
color: Black;
font-family: Arial, Helvetica, sans-serif;
padding-bottom: 5px;
}

SPAN.TreeviewSpanArea A {
font-size: small;
color: Black;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}

SPAN.TreeviewSpanArea A:hover {
color: Blue;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
text-decoration: none;
}

div.row {
clear: both;
padding-top: 10px;
}

div.row span.label {
float: left;
width: 100px;
text-align: right;
}

div.row span.formw {
float: right;
width: 335px;
text-align: left;
}

abbr, acronym, .help {
border-bottom: 1px dotted #000000;
cursor: help;
}

Thanks again for reading.

[HarryM]

Hi IrmaVep,

Welcome to Webmaster World!

I am sure there are a number of experts who can help - unfortunately I can't contribute much. I tried something similar and I never got it looking correct. And there are problems with some browsers with float.

I would suggest that each row of thumbnails are enclosed in a container div. This would at least ensure the images line up horizontally.

Inside the container div, underneath the thumbnails, I would put another div with the CSS specifying 'clear:both'. This would prevent the images from the row underneath floating up into the container div as they would do in some browsers. This extra div can be made invisible by giving it a font-size of 1pt and including within it a space - &nbsp; If there's nothing in the div some browsers will ignore it.

That still leaves the vertical alignment problem, but this may be eased once the rows are separated.

However my own solution was to forget about all that, and use tables, but still using CSS. It renders correctly in all browsers and all rows and columns automatically line up. Different size images can be catered for by centering them horizontally and vertically in the cells, or by playing around with padding.

Just my 2c worth. I'm sure some will say my approach is very old-fashioned... :)

By the way, loved the movie. As a fan of the silents, I am considering getting the original Les Vamypres.

Harry

[aevea]

Wow, that's a lot of css for the first time. I didn't analyze all the code, but I think your problem with the floats probably has to do with not declaring a width for the floated div. I've gotten away with it before, but in the css specs it says that floated elements that don't have intrinsic widths (like divs and spans) must have their widths declared explicitly in the css. If you don't do it, you leave the decision the browser and the results are pretty unpredictable.

[w3.org...]

Adam

[SuzyUK]

Hi IrmaVep

the issue (I didn't check all your CSS) is as you say the varying sizes of the images (and therefore the floats)..

aevea is correct that there should really be a width on them as IE/Mac struggles and it is the specs, and I beleive this may trigger "the escaping floats" bug in IE/Win too anyway..
so width or height will correct this bug.. :(

however it's not widths that's causing this it's heights and there is no way except as you say making "rows" at a fixed width (whether you use a spacer or not) to get around this.

But if this is a thumbnail gallery is there any way you can make the div class float a fixed width and height that would encompass all your varying sizes?

that is I am assuming that there isn't too much variation in thumbnail size so something like this:

div.float {
float: left;
margin-right: 10px;
background: #ffc;
display: block;
height: 120px;
width: 100px;
text-align: center;
}

adjust the height to incorporate your tallest thumbnail and remember to add some for your notes ~ or do they vary in size a lot too?

widths, although the choice is yours whether you add them, could be covered the same way...
adjust the width to suit you widest thumbnail then text align center should center the image

Just a thought...

Suzy

[HarryM]

Hi Irma,

I took a look at your site to better understand your problem. With IE6 it only shows itself where the images run to more than one row, but other browsers are worse.

For example Gallery Two in IE6:
- 5 images in the first row
- 8 images in the second row
- 1 image in the third row (on extreme right)
- 1 image in the fourth row (on extreme left)

Gallery Two in Opera 6.05:
- all images in one row expanding the page width off screen.

Opera 6 also screws up on your home page.

My opinion is if you want to get the problem sorted out quickly use tables. This will work in all browsers, and would then give you the time to sort out any existing browser-related problems, and also if you still wanted to go the div route you can sort that out off-line. Unless you are prepared to ignore early browsers (such as last year?) this will take a lot of testing. For instance float with IE4 or Opera before v.7 will give some strange results, and IE4 will choke unless you hide all the clear:both attributes.

Using the simplist method available would also give you time to write all those 100's of missing comments! At the moment those comment pages have identical contents which Google may not like.

I am stickying you about another subject.

Harry

[IrmaVep]

Thanks HarryM, aevea, and SuzyUK! I will definitely try specifying and width AND a height for my float DIVs, otherwise I'm going to give up and just use tables. I really hate tables and frames, ugh.

Harry - the silent Les Vampires serials are really amazing and fun :) The DVDs keep going down in price, too. I remember when they came out they were $100 and now they're $62!

[IrmaVep]

Thanks for the advice Harry, I didn't know it was that bad. I only have IE installed. :(

I'll just convert back to tables *shudder*

Those notes are actually links to popup windows on another server that store comments for each image. So google can just deal ;) I've never gotten a sticky, I'm excited.

[HarryM]

I was suggesting tables as a quick solution. Going to floated divs would be the answer if you wanted the number of images in a row to expand with browser resolution, but difficult to get right.

[SuzyUK]

Yes go on try the floated divs and let us know if it works ;)

a table might be easiest if you only want a set amount of thumbnails in the row..

btw it is display: inline on your floats that is causing the overflow problem in Opera.. (it's forcing them to remain inline) I'm pretty sure this is a bug in Opera 6 and it's actually a cure for an IE bug.. the joys ;)

Suzy

[IrmaVep]

Oh joy, one fix causes another bug! I have the feeling I'm going to be up half the night.

[dave_99]

Instead of DIVS, how about using "style=position: absolute;" to position thumbnail images? This worked for me and looks as-designed in Netscape 6, IE 5.5, AOL 8.

[IrmaVep]

I never thought to apply an absolute position to the floated divs b/c I always considered floated things to be...floating. Thanks! I'll put that on my list of things to try out when I get home. :)

[dave_99]

I applied "position: absolute" to the image without DIVS because FrontPage lets me drag around the image, which cannot be done with DIV/Float. I was intending to go back to DIVS but now have just kept it without them.

Here's what I did to get a thumbnail with the word/link "Floral" appearing directly below it...

<p class="caption" style="position: absolute; left: 144; top: 250"><img border="0" src="images/floral.jpg"><br>
<a class="caption" href="floral.asp">Floral
</p>