[Question] What am I Doing Wrong? IMGs and Tables

Discussion in 'Web Design and Development' started by macjram, Jun 25, 2009.

  1. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    One issue is that the table cells need to be top aligned,
    Code:
    td {
     vertical-align: top;
    }
    You should also make the .sleeve have a 334px width, and have the margin set for '0 auto.' That should get you closer. I was tweaking the site using Firefox and got it pretty close to what you are wanting. I didn't mess with background colors though and not sure how you want the header and the content after the iPhone to appear.
     
  2. macjram thread starter macrumors 6502a

    macjram

    Joined:
    Dec 20, 2008
    #3
    Thanks ! I edited the CSS but I'm still having some problems with the tables

     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    The following width is causing the issue with the right side hanging off.
    Code:
    .image {
    ...
     width: 334px;
    }
    As a note, I've been using the Firebug add-on to track down the issues.
     
  4. macjram thread starter macrumors 6502a

    macjram

    Joined:
    Dec 20, 2008
    #5
    Thanks ! I appreciate it. How do I use that Fire-Bug add-on?

    I removed the width, and the right side has shortened, but I still see a separation between the middle and right side and the bottom as well.

    Sorry, I'm completely lost on what to do next =\.
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    Explaining Firebug is a little difficult. Once you have it installed and activated (by opening from the Tools menu or from the icon in the status bar area) you'll want to be on the HTML tab. From there you can select on HTML tags in your source. As you do, you'll get CSS info on that element on the right sidebar. You can disable/edit/add CSS properties too. You just have to kind of play around with it.

    As for that space I changed the height of a td tags from 416 to 414. It's in the table row just above where the gap is occurring. It's hard to describe exactly where it's at. The td also has a width of 278, which will help you track it down.
     
  6. macjram thread starter macrumors 6502a

    macjram

    Joined:
    Dec 20, 2008
    #7
    I just noticed the pictures I posted were not to scale. By uploading a "scaled" image, the right gap disappeared, but there is still a gap at the bottom.

    Is it coming from

     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    OK, do as I said before about the 416 to 414, the also in the CSS find,
    Code:
    .image img {
    ...
     padding: 0 0 10px;
    }
    and get rid of the 10px;
     
  8. macjram thread starter macrumors 6502a

    macjram

    Joined:
    Dec 20, 2008
    #9
    That worked perfectly ! Thank you so much, and sorry for asking so many questions. I really appreciate it
     
  9. macjram thread starter macrumors 6502a

    macjram

    Joined:
    Dec 20, 2008

Share This Page