Ok, this is likely something so simple, so stupid, but yet it is driving me up a wall. I'm using divs, like I should, instead of a table. I'm trying to set a thumb nail inside a div, within a div, so I can have a nice description block on one side, the thumbnail on the other, which would link to the full sized image. The thumb nails are roughly 100x100 px, but no matter what I set as the size, they are blowing up to 400x400px.
Screenshot

Thanks.

This may sound a little obvious, but those are the things the most talented overlook sometimes, but have you tried viewing it in a browser, sometimes I've made things in dreamweaver code view, it look odd in design view, but right in the browser.

Yes I have tried that, and they look as bad in the browser as they do in Dreamweaver. I broke down and tried coding it in notepad, and it is still blowing up my tiny thumbnails. At this rate, I might as well just drop the full sized images in and say the Hell with it.

height="100px" or style="height: 100px;"

This may sound stupid but I've run into a few instances where if you don't put the px it won't work. You should also only need to set either the height or the width, it should automatically scale (I think).

You should ALWAYS define the dimensions of an image in your HTML, you do not want the browser doing the calculating!

Can we see the code you're using ? Kinda hard to diagnose w/o seeing all the code.

I did have the height and width defined, exactly how you stated it stbuchok, and it was still blowing them up. I finally cheated it by creating a div style for each thumbnail. I made each div the 100x100 size, and used the thumb for a background.

LadynRed, I have since overwritten that code a dozen times over, but the link I posted is a screenshot showing both the code and the results. Either way, I am still not doing too well with this page. It would have been done in 5 minutes using a table, and that is exactly the effect I am after. I want to have a short bit of text describing the image, the thumbnail, and an occasional block of text with a referral. So far, the referral div is the only bit that is coming out fine.

I have tried
<div> (As a container)text
<div>image </div>
</div>
I have tried
<div> As a container)
<div> text </div>
<div> image</div>
</div>
And
<div> As a container)
<div> text </div>
<div> image</div>
<div id="referral">text</div>
</div>

I am having some luck getting the divs to float where I want them to, but it is still all out of whack. Like I said, I now have the thumbs sized right, but I cheated it-
.lizard_thumb {
height: 100px;
width: 100px;
background-image: url(artwork/lizard_thumb.gif);
float: right;
clear: left;
}
.boys_thumb {
height: 80px;
width: 100px;
background-image: url(artwork/boys_thumb.gif);
float: left;
clear: right;
}
.girls_thumb {
height: 80px;
width: 100px;
background-image: url(artwork/girls_thumb.gif);
float: left;
clear: right;
}

Ok, I have the thumbnails lined up, but still have to cheat it by making them backgrounds in a div. I suppose it is possible to make them fall in line, and display properly by assigning them a style, such as
.thumbs{
height: 100;
weight: 100;
}

Either way, I am willing to settle for leaving them as they are, and be done with it. It looks good in Firefox, and I don't have anything else besides I.E.5 to view it in, and it doesn't like it. I am running into an odd behavior though, all the links are running off the same css, but for some reason, only the Artwork link seems to want to behave differently than the rest, when it is the current page.

If you would care to look it over, the address is http://video-alchemy.com/v3/ . It is not finished, some links like the thumbnails aren't done, and I still want to go through it a few times with a fine tooth comb, work out some of them bugs.

Make sure the image itself has been resize in a photo editor and *never* rely on the html editor (dreamweaver, or any other) to resize your images. That's what a graphics program is used for. Then you should add the image to the html editor, using the dimensions you resized to of course.

Aside from the obvious, yes, the images are scaled to the right size, done in Photoshop, and no matter how many times I define the size as 100px h 100 px w in the page, they still blow up to 400x400. Is there something about divs that ignore the rules? The images will go into any other page just fine.

You might be aware, but since you said that you only have IE 5.5, your page a little wack in IE 7, where there are scroll bars on the images and the navigation bar on the side isn't appearing.

Also, just a suggestion, but maybe try to insert a different jpeg file, or testing it on a blank html page to see if it might be a problem with your style sheet.

They do work on other pages, so it might have something to do with the css, but I have never had this happen before.

I am also aware that the navigation bar is acting squirrely in I.E.. It works on one page, but not the other three. Which images are showing scroll bars?

your entire "content" div has a vertical and horizontal scroll bar.

That should only show up on the portfolio page. I used overflow: auto to allow more content.

Ok, I'm not seeeing the 400px behavior in IE6 at all, not in Firefox either.
Frankly, I would do that whole thing with the thumbnails and captions in a list, a Definition List is actually a handy way to do that sort of thing -

<dl>
<dt>topic/thumbnail</dt>
<dd>caption</dd>
</dl>

You can float the DTs and DD's, and have as many DD's and you can style each DL, DT, and DD. Put a class on the DL to control dimensions and placement, and use classes for the DT and DD - classes you can re-use, ID's MUST be unique.

You have repeated some IDs in your page I see, you need to change those to classes if you're going to re-use them.

Ok Lady, I cheated the thumbnails, by making them backgrounds in the divs-
<div class="lizard_thumb"></div>

.lizard_thumb {
height: 100px;
width: 100px;
background-image: url(artwork/lizard_thumb.gif);
float: left;
clear: none;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: medium solid #000000;
}

I had to do it like that, otherwise the 100x100 images blew up. That is why you aren't seeing it. However, if you look at the screenshot linked to my original post, you can see what I'm talking about. As for the Ids being repeated, which ones specifically will I have problems with? I'm more or less done, just trying to clean it up now. And surprisingly enough, it did validate all the way.

Well, the validator coughs up warnings on the duplicate IDs.. You have id="Lens" on the div and on the <img> - no biggie.

Your screenshot is of Dreamweaver, and I would NEVER rely on what it shows in it's preview window as 'accurate' - it rarely is. I would question your DW settings if that's the only place it was doing it.

If that was the only place it was doing it, I wouldn't be going nuts.
Screenshot 2

I seem to remember this happening a few times to me before in DW8.

Shot in the dark, but have you hit the refresh button for the image IN dreamweaver?
Its the blue circle arrow next to W & H in the properties inspector....

IE7 - weird - have you checked the BROWSER settings ???

Yes Rolda, I update the changes and refresh, but it is still blowing up my thumbnails.