SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    midnight coder
    Join Date
    Dec 2000
    Location
    The flat edge of the world
    Posts
    838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mozilla leaves gaps between image table cells

    I've made a site interface, sliced it up and put them in tables, the table structure is pretty basic.

    One bit of it has a image sliced in half horizontally, place in separate table cells, with cellspacing, cellpadding, and border set to zero, all the tables does not have height set (not valid XHTML, and didn't solve the problem anyway) IE renders it the way I want it to, however Mozilla leaves a gap at the bottom of the first cell, creating a gap between the two images.

    Anyone know how I can get Mozilla to render the table correctly so the two images from different cell will be together with no gaps in between?
    Attached Images Attached Images
    Work smarter, not harder. -Scrooge McDuck

  2. #2
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm guessing that dimension figures aren't being added up properly somewhere in the code.

    Any chance of posting the code or a url so we can see the problem more completely?

    It might give us a better chance of identifying the solution.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  3. #3
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's "caused" by mozilla/Netscape's better support for the CSS2 box model.

    http://www.mozilla.org/docs/web-developer/faq.html, Item 2.

    Or, for a more detailed overview:

    http://devedge.netscape.com/viewsource/2002/img-table/

    Whether the CSS2 Box model is an improvement, in this circumstance, I shall leave as a mental exercise for the reader.

  4. #4
    midnight coder
    Join Date
    Dec 2000
    Location
    The flat edge of the world
    Posts
    838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, the CSS fixed it.

    It's good that Mozilla sticks to standards, sites that don't have the proper DOCTYPE isn't affected by this anyway, so most sites shouldn't be broken by this.
    Work smarter, not harder. -Scrooge McDuck

  5. #5
    SitePoint Zealot MetalAges's Avatar
    Join Date
    Jan 2003
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know this thread seems a little old but I am having the same issue. I read the URLs provided but none of the tricks seemed to work for me, inclusing removing the Doc TYPE line to see how it reacted. Still have gaps. Here's my url for reference:
    http://www.readingzero.com/index2.html
    I have the gap on the right and bottom. Driving me a bit nuts I must say! (Only in Mozilla). Any other ideas or did I do something wrong possibly (shouldnt removing the Doc type like it said tell me if it's the compatibility problem the URLs speak about?)

  6. #6
    midnight coder
    Join Date
    Dec 2000
    Location
    The flat edge of the world
    Posts
    838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can't say I can see any gaps in the site you gave us.

    Adding this to the CSS fixed it for me:

    td img {display: block;}
    Work smarter, not harder. -Scrooge McDuck

  7. #7
    SitePoint Zealot MetalAges's Avatar
    Join Date
    Jan 2003
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What version of Mozilla do you have? I am on 1.1a .

    I seem to have (for the time being at the point in the design process I am in) found a solution or workaround for this. Instead of having my table on one level, I nested a separate table on the left nav side and put all the left side images within that and it seemed to take away the gaps. I still have a headache though...


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
  •