Regarding images and tables

hey all,
2 questions:

  1. why does my images in the gallery have some white space at the bottom (when clicking on them) ? on IE browsers it seems to work fine but not on the other browsers
    http://sospets.brinkster.net/newsite/gallery.asp

  2. i got a code that repeats its self up to 3 times for each dog image, i use <td> tags to get the name of the dogs just above their image, my question is, its ok to use tables for it? or can it be achieved in a better way? look in this link where the test, test2 are.
    http://sospets.brinkster.net/newsite/index.asp

thanks

Hi ulthane,

Question 1)

Images are inline elements by default and they are treated like text when displayed inline. That white space you see at the bottom is the space reserved for text descenders such as the stem of a “p” or a “j”. It is caused by the default vertical-align value of baseline.

To fix it either change the img v-align to bottom or change the display value to block.

To target just the images in the gallery add this new selector to your ddphpalbum.css


#thumbBox #thumbImage[COLOR=Blue] img [/COLOR]{
vertical-align:bottom;
}

Question 2)

I would be using a list for that since it’s a list of images with captions.

View the page source of that link above for the css. I changed the ID to “doglist” in the html below.
Something like this with text-align:center on the li would get you pointed in the right direction. Bring the dog name before the img and use a <br> tag to drop the image below the text.

<ul id="doglist">
    <li>Dog Name<br><img src="images/dog1.jpg" width="150" height="100" alt="#"></li>
    <li>Dog Name<br><img src="images/dog2.jpg" width="150" height="100" alt="#"></li>
    <li>Dog Name<br><img src="images/dog3.jpg" width="150" height="100" alt="#"></li>
</ul>

hey Rayzur,

regarding question 1, it didn’t solve it, also i forgot to mention that on my old website (http://sospets.brinkster.net/gallery.asp) it didn’t have this problem, so thats probably a mistake somewhere in my css file (default.css)
ignore the encoding problem.

regarding question 2, it works nicely :slight_smile: but still having problems in IE 6, 7 (however in the link u gave this problem doesn’t exist, and i dont think i changed anything that can cause this problem…)
the problem is that the list goes down a line after every image.

thanks for the help.

I took a copy of your code, added the vertical-align: bottom and the white strip before the image was gone.

However the only difference I’m seeing in code between the site without and the site width was that besides a larger image (or different JS?) was a width added. So it’s the descender space but didn’t see why it also didn’t show on the other site.

oh ok, i just added the valign line again and it worked, dunno what was the problem in the last time, my bad

any solution for the 2nd question ? :slight_smile:

note that IE 6, 7 also gets a list type of Disc, which it shouldn’t get…

If I could scroll down to see it, I would, but I can’t. You set the body height to 100%. That means no scrolling available to me. You must have a ginormous sized monitor. Can you assume all your visitors do as well??

I clicked on your link #2 in your first post.

You set the list style originally on the list element and IE7 and under need you to remove it from there also.


#mdogs li {
    display:-moz-inline-box;
    display:inline-block;
    vertical-align:top;
    margin:5px 0 0 3px;
    border:1px solid #000;
    font-weight:bold;
   [B]     list-style:none;[/B]
}
[B]* html #mdogs li{display:inline}/* ie6 inline-block fix*/
*+html #mdogs li{display:inline}/* ie7 inline-block fix*/[/B]

You also need the inline-block fix shown above for ie6 and 7 or they won’t work.

If I could scroll down to see it, I would, but I can’t. You set the body height to 100%. That means no scrolling available to me. You must have a ginormous sized monitor. Can you assume all your visitors do as well??

I clicked on your link #2 in your first post.

oh yeah, i noticed it aswell when i used a different computer with a smaller screen, changed it but forgot to upload it, try now and it should be fine :slight_smile:

Edit * Thanks Paul, solved it :slight_smile:

1 more question regarding this, is there a way to get IE 6, 7 also have those rounded borders like all the other browsers has?

Not unless you use images or [URL=“http://css3pie.com/”]javascript.