Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Jan 2004
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Why does firefox put unwanted spaces in a table

    Hello

    Can somebody be so kind as to tell me why firefox puts unwanted spaces between table rows in the following code, and how to fix it. Works fine in IE 6

    Many thanks

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script type="text/javascript" src="swfobject.js">
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <link rel="stylesheet" href="virtutour_web_site.css"> 
    <style type="text/css">
    <!--
    -->
    </style> 
    </head>
    
    <body bgcolor="#000000" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
    <div align="center"> </div><table width="822" border="0" cellspacing="0" cellpadding="0" align="CENTER"><tr><td width="62" background="images/background_text_left.gif">&nbsp;</td><td width="225" bgcolor="#06075B"><p align="CENTER"><img src="images/logo_hodsock_priory.gif" width="190" height="100"></p></td><td width="474" bgcolor="#06075B" class="main">Text 
    here </td><td width="61" background="images/background_text_right.gif">&nbsp;</td></tr><tr><td width="62" background="images/background_text_left.gif">&nbsp;</td><td width="225" bgcolor="#06075B"><p align="CENTER"><img src="images/logo_lakeside.gif" width="190" height="100"></p></td><td width="474" bgcolor="#06075B" class="main">Text 
    here </td><td width="61" background="images/background_text_right.gif">&nbsp;</td></tr><tr><td width="62" background="images/background_text_left.gif">&nbsp;</td><td width="225" bgcolor="#06075B"><p align="CENTER"><img src="images/logo_the_viceroy.gif" width="190" height="100"></p></td><td width="474" bgcolor="#06075B" class="main">"Text 
    here </td><td width="61" background="images/background_text_right.gif">&nbsp;</td></tr><tr><td width="62" background="images/background_text_left.gif">&nbsp;</td><td width="225" bgcolor="#06075B"><p align="CENTER"><img src="images/logo_langar_hall.gif" width="190" height="100"></p></td><td width="474" bgcolor="#06075B" class="main">"Text 
    here </td><td width="61" background="images/background_text_right.gif">&nbsp;</td></tr></table><table border="0" cellspacing="0" cellpadding="0" align="CENTER"> 
    <tr > <td colspan="3"><img src="images/background_text_bottom.gif" width="823" height="17"></td></tr> 
    </table><p>&nbsp;</p>
    </body>
    </html>

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    I think the larger question is why are you using tables for layout?

    Have a go with this CSS:

    Code:
    table {
      border-collapse:collapse;
    }
    matt | design | blog

  • #3
    New Coder
    Join Date
    Jan 2004
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi Matt

    Thanks but I dont have time to learn CSS. Site needs to be working by Monday. There must be a quick fix for this? Is it something to do with quirks mode?

    Masten

  • #4
    Super Moderator
    Join Date
    Feb 2009
    Location
    England
    Posts
    539
    Thanks
    8
    Thanked 63 Times in 54 Posts
    You're claiming your page is XHTML 1, which is clearly isn't. Remove that DOCTYPE and try again. You may be surprised

    Browsers use a different rendering system depending on the DOCTYPE specified.

    Also, on a side note. Your title "Why does firefox put unwanted spaces in a table" is wrong. It should be "Why doesn't IE put spaces in a table when proper browsers do". Generally assume Firefox is right, and IE is wrong

  • #5
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Quote Originally Posted by ComputerX View Post
    Your title "Why does firefox put unwanted spaces in a table" is wrong. It should be "Why doesn't IE put spaces in a table when proper browsers do". Generally assume Firefox is right, and IE is wrong
    Agreed, but I disagree about removing the DOCTYPE. The proper way is to use a correct DOCTYPE and validate your page. That's the first step to making a page consistent cross-browser.
    matt | design | blog

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    I’ll tell you a secret. But only if you promise to learn how to write semantic HTML (and continue to write semantic HTML only, styling it with CSS) after you’ve completed this project by Monday. PROMISE!!!

    https://developer.mozilla.org/en/Ima...ysterious_Gaps

  • #7
    Super Moderator
    Join Date
    Feb 2009
    Location
    England
    Posts
    539
    Thanks
    8
    Thanked 63 Times in 54 Posts
    Quote Originally Posted by msuffern View Post
    Agreed, but I disagree about removing the DOCTYPE. The proper way is to use a correct DOCTYPE and validate your page. That's the first step to making a page consistent cross-browser.
    Absolutely, but he clearly wanted a "omg, make it werk quick liek!! plz!" method.

  • #8
    New Coder
    Join Date
    Jan 2004
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi ComputerX

    Well. Guess what. That worked. Excellent. Just took out the doctype and works on IE and firefox so got the project done.

    Can I ask though what the doctype should be. At the moment Ive got this:

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <script type="text/javascript" src="swfobject.js">
    </script>
    as first few lines of the code.

    and this later on which calls some xml

    Code:
    <script type="text/javascript">
    var so = new SWFObject("plugins/show_pano.swf", "tour", "700", "376", "6.0.65", "8");
    so.addVariable("movie", "tour.swf");
    so.addVariable("redirect", window.location);
    so.addParam("allowFullScreen","true");
    so.addVariable("xml_file","tour.xml");
    so.addParam("scale", "noscale");
    so.write("flashcontent");
    </script>
    Hi Stephan

    Thanks for the link, but unfortunately I have no time at all to learn proper coding. I run my own business alone, do everything myself and the coding is just one of the many things I have to do - so if it looks OK and works OK for the client - then that'll have to do for now.
    One day I hope to emply someone to do all the coding and make it correct and proper and everything which would be great as it does get on my nerves that its not done right. Anyway, Untll then.

    cheers

    Masten

  • #9
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    You can probably use the frameset doctype, but you don't really need one since you don't have validatable code.

    xhtml frameset:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    html frameset:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
    You can also use transitional to trigger quirks mode but since you're using tables frameset describes your document better.
    Last edited by itsallkizza; 02-24-2009 at 08:19 PM.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by itsallkizza View Post
    You can also use transitional to trigger quirks mode but since you're using tables frameset describes your document better.
    I hope you are being sarcastic. Tables are not frames so a frameset doctype is not what you should use. Not using a doctype at all isn't a solution. The solution was given by VIPStephan. To the OP if you aren't going to listen to our advice then what is the point?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    Ya I'm sorry, I skimmed through the thread and for some reason got into my head he was using framesets. Just use a loose doctype (almost-strict doctypes ignore the hanging spacer on img tags) or none at all.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #12
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by itsallkizza View Post
    you don't have validatable code.
    I think he just made up a word.

  • #13
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Quote Originally Posted by itsallkizza View Post
    Ya I'm sorry, I skimmed through the thread and for some reason got into my head he was using framesets. Just use a loose doctype (almost-strict doctypes ignore the hanging spacer on img tags) or none at all.
    As stated before “none at all” is the worst solution.
    Masten, I understand that you’re not a master and just want things to work quickly. However, a doctype is pretty crucial for making things work. “Work” means not just display on a computer screen in one or two random major browsers, it also includes displaying alright on mobile devices, printing properly, and in the best case being accessible for other devices that may not even display anything in the currently usual way.

    And for the transition of old, non-standard tag soup into standards compliant code was the transitional doctype invented which is what you should use at least. This may also make it easier for a potential web developer to improve your site later on. As a business owner you should know already that you always have to plan ahead and think in advance.

    So, in a nutshell: Use the HTML transitional doctype and make the images in the table display: block. That’s the best way to get rid of the gaps while keeping at least a little dignity.

  • Users who have thanked VIPStephan for this post:

    masten (02-26-2009)

  • #14
    New Coder
    Join Date
    Jan 2004
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi Stephan

    Masten, I understand that you’re not a master coder
    Understatement of the century.

    I have tried various doctypes before and none work. That one does. Renders perfect on IE and FF It works without putting display:block in. What does that do and why do I need it and would it just go like this for example

    <img src="images/right.gif" height="376" display:block>

    thanks very much

    Masten

  • #15
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    As long as quirks mode is triggered or you manually insert a transitional type doctype, then most browsers will not render the hanging space below the inline element <img> - which is what you want.

    However, adding display:block to images circumvents the issue altogether as the <img>s are no longer rendered as inline.

    You can do it like this:
    Code:
    <style type="text/css">
    img
    {
    display: block;
    }
    
    /*or just for inside tables*/
    table img
    {
    display: block;
    }
    </style>
    Or inline like this:
    Code:
    <img src="" alt="" style="display:block;" />
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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