SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Toronto
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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

  2. #2
    SitePoint Zealot DaisyChain's Avatar
    Join Date
    Aug 2002
    Location
    Manchester, England
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Toronto
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 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.
    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

  4. #4
    SitePoint Zealot DaisyChain's Avatar
    Join Date
    Aug 2002
    Location
    Manchester, England
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Toronto
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Toronto
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 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
    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>

  8. #8
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •