...

View Full Version : Why does firefox put unwanted spaces in a table



masten
02-19-2009, 07:38 PM
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


<!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>

BoldUlysses
02-19-2009, 07:45 PM
I think the larger question is why are you using tables for layout (http://phrogz.net/css/WhyTablesAreBadForLayout.html)?

Have a go with this CSS:


table {
border-collapse:collapse;
}

masten
02-19-2009, 07:53 PM
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

Lamped
02-19-2009, 08:00 PM
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 :p

BoldUlysses
02-19-2009, 08:05 PM
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 :p

Agreed, but I disagree about removing the DOCTYPE. The proper way is to use a correct DOCTYPE (http://www.alistapart.com/stories/doctype/) and validate your page (http://validator.w3.org/). That's the first step to making a page consistent cross-browser.

VIPStephan
02-19-2009, 08:07 PM
I’ll tell you a secret. But only if you promise to learn how to write semantic HTML (http://boagworld.com/technology/semantic_code_what_why_how/) (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/Images,_Tables,_and_Mysterious_Gaps

Lamped
02-22-2009, 10:15 AM
Agreed, but I disagree about removing the DOCTYPE. The proper way is to use a correct DOCTYPE (http://www.alistapart.com/stories/doctype/) and validate your page (http://validator.w3.org/). 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. ;)

masten
02-24-2009, 06:39 PM
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:


<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


<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

itsallkizza
02-24-2009, 07:14 PM
You can probably use the frameset doctype, but you don't really need one since you don't have validatable code.

xhtml frameset:

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

html frameset:

<!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.

_Aerospace_Eng_
02-24-2009, 08:02 PM
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?

itsallkizza
02-24-2009, 08:14 PM
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.

drhowarddrfine
02-24-2009, 11:34 PM
you don't have validatable code.I think he just made up a word.:thumbsup:

VIPStephan
02-24-2009, 11:41 PM
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 (http://w3schools.com/tags/tag_DOCTYPE.asp) 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. ;)

masten
02-26-2009, 01:51 PM
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

itsallkizza
02-26-2009, 03:11 PM
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:


<style type="text/css">
img
{
display: block;
}

/*or just for inside tables*/
table img
{
display: block;
}
</style>


Or inline like this:


<img src="" alt="" style="display:block;" />

VIPStephan
02-26-2009, 03:23 PM
What does that do and why do I need it […]

Please take a minute to read this article on Images, Tables, and Mysterious Gaps (https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps). It explains why there’s a gap below the images (doesn’t just apply to tables). Imagine that an image is treated like text and making an image display as block element gets rid of that gap.

With inline styles it would look like this: <img src="…" alt="…" style="display: block;"> (HTML) or <img src="…" alt="…" style="display: block;" /> (XHTML)

masten
03-02-2009, 09:42 AM
Just to say thankyou.

For some reason now with that doctype ff isnt rendering it right. Im sure it was before. Ive tried the style: block thing and it makes no difference. Probably the way Ive got the code set up.(in a bit of a mess)

I really have run out of time on it so its going to go out as is for now.

Anyway, learnt alot and thanks for all your input

Till next time

Masten

denisechapman
11-20-2009, 08:48 PM
Thanks for posting this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Never knew that could fix it.. all my problems gone.. ya, I know not proper CSS.. but hopefully I'll learn more...:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum