Recreating 3 column, 4 row table with css. Having some problems.

[arossphoto]

Hi,

I am taking my first crack at a table-less design and I'm trying to rebuild a photography portfolio page with css. Unfortunately, I'm having some serious cross-browser issues with several areas on the page. I was hoping someone could look at my code and tell me if there is something I should change. The page is available here or if it's preferred I can post the code.

Problem 1 - I had a 3 column, 4 row table that holds thumbnail images and, with the help of some code from allistapart.com, I've got it looking pretty good in IE6 and Mozilla Firebird for Windows. But in Netscape 6 and Opera 5.1 the thumbnails don't display properly at all. Also, in IE6 there is some extra space under the thumbnails that doesn't appear in Mozilla.

Problem 2 - The main image that is swapped when you click on a thumbnail is overlapping the bottom of its container in IE6 and the top in Opera, but looks perfect in Mozilla and Netscape. The images and the containers are all set to 300px high.

Problem 3 - I have an 11px copyright statement at the bottom of the page and I want it vertically centered in the 20px high div, but I just can't get it to do this in IE6 or Netscape, even though it looks fine in Mozilla, and not bad in Opera.

I hope this isn't too much to ask, but I would really appreciate some help or else I may just have to stick with my tables.

Cheers,

Andrew

[DaisyChain]

afraid I couldn't see the first two problems that you listed but I might be able to help on the third. Add a padding-bottom: number px
to the copyright div and that should do it.

[arossphoto]

afraid I couldn't see the first two problems that you listed but I might be able to help on the third. Add a padding-bottom: number px
to the copyright div and that should do it.

Thanks for having a look. What browser/OS were you using?

I tried padding at the bottom of the copyright div, but all this seems to do is expand the size of the div. I thought it made sense if the div was 20px and the text is 11px that if I added 5px padding-top and 4px padding-bottom, it should be pretty close to the center. But I have done this and the div now measures 32px in all browsers. I have uploaded this version if you want to have a look.

Re: Problem 2 - I have reverted back to an old version of this file that doesn't use absolute positioning anywhere and where the overlapping problem didn't occur. But now the left position of the container with the thumbnails varies from browser to browser. That's why I added absolute positioning in the first place.

I could live with this if I could get the thumbs to display properly in Netscape6 and Opera.

Thanks and there are any other suggestions I would love to hear them. Maybe there is a better way to display the thumbs on my page.

Cheers,

Andrew

[DaisyChain]

you might need to remove the margin from the footer text if its contained within a <p>. I'd suggest remove the padding from the div altogether and define it in the <p> or <span> that contains the footer. By default <p> has quite a bit of top and bottom margin so to remove it you have to specify margin: 0;

[arossphoto]

I'm still struggling with this and I went back to scratch and started over with the container to display the thumbnails as 3 columns and 4 rows. I used the source code from allistapart.com that I referred to above and it is working better than before in all browsers, but the extra space underneath each row of images that I mentioned in my first post is still there in IE6 and NS6. In Opera5 and Firebird0.7 it is perfect.

Here's a link to a test page.

Can anyone tell me why this extra space is there? This is so easy with tables I'm really beginning to wonder about the advantages of CSS.

Thanks,

Andrew

[Zoef]

You're probably going in the right direction using floats. You might want to have a look at this tutorial to help you out some more.

Rik

[arossphoto]

You're probably going in the right direction using floats. You might want to have a look at this tutorial to help you out some more.
Rik

Thanks Rik. I have used the example in that tutorial to rebuild my page and it is working the best so far. I was able to get rid of the extra padding below the images in IE6 simply by moving the </div> tag up onto the same line as the image tag.

But I can't get rid of this extra padding in NS6. Here is a test page that clearly shows the extra padding below the images. Is this just a bug in NS that I have to live with?

Here's the code as well:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>css_test</title>
<style type="text/css">

div.container
{
border: 1px dashed #666;
background-color: #f9f9f9;
}

.thumbnail
{
float: left;
width: 60px;
border: 1px solid #999;
margin: 0 5px 5px 0;
padding: 2px;
}

.clearboth { clear: both; }

</style>
</head>

<body>
<div class="container">
<div class="clearboth">
&nbsp;
</div>
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"></div>
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"></div>
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"></div>
<br class="clearboth">
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"></div>
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"></div>
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"></div>
<div class="clearboth">
&nbsp;
</div>
</div>

</body>
</html>

[Zoef]

I guess it just might be, I saw the same effect in Moz1.0 and NS6.2 which share the same rendering engine. (If I'm not mistaken). It's ok in Firebird 0.6, Opera 6.05, and even in IE5.0. (All running under Win98 btw.)

Rik