Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 1 of 2
TD’s splitting up
 
XPSM1730
Member
 
Total Posts:  70
Joined:  2008-02-27
 

I’m creating a landing page with some tables, but they seem to break up.
When i browse with firefox i get to see a white space between each TD. The shop is like i downloaded it, i didn’t modify anything.
Does anybody else have the same problem? The attachment to this post contains a screenshot.

This is the html markup i used:

<table id="Table_01" width="400" height="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/test_01.gif" width="182" height="99" alt=""></td>
<td>
<img src="images/test_02.gif" width="218" height="99" alt=""></td>
</tr>
<tr>
<td>
<img src="images/test_03.gif" width="182" height="41" alt=""></td>
<td>
<img src="images/test_04.gif" width="218" height="41" alt=""></td>
</tr>
<tr>
<td>
<img src="images/test_05.gif" width="182" height="60" alt=""></td>
<td>
<img src="images/test_06.gif" width="218" height="60" alt=""></td>
</tr>
</table>

Image Attachments
test.gif
 
Magento Community Magento Community
Magento Community
Magento Community
 
XPSM1730
Member
 
Total Posts:  70
Joined:  2008-02-27
 

I created a static block with above images + html code and tested it in a category, but it still shows white spaces between the cells....
Can this be a CSS bug/issue? I appreciate any help.

 
Magento Community Magento Community
Magento Community
Magento Community
 
XPSM1730
Member
 
Total Posts:  70
Joined:  2008-02-27
 

Anyone?
I think i will stop using magento, I’m experiencing too many of such little issues and i don’t have time to fix it all.

 
Magento Community Magento Community
Magento Community
Magento Community
 
bozmac
Jr. Member
 
Total Posts:  18
Joined:  2008-06-17
 

simple. don’t put spaces between the td tags and your img tags. it’s not magento’s fault. you need to learn some basic html at least.

 
Magento Community Magento Community
Magento Community
Magento Community
 
XPSM1730
Member
 
Total Posts:  70
Joined:  2008-02-27
 
bozmac - 23 June 2008 11:44 PM

simple. don’t put spaces between the td tags and your img tags. it’s not magento’s fault. you need to learn some basic html at least.

Lol, even if i create it like this:

<tr>

<td>

<img src"images/lala.gif">

</td>
</tr>

It shouldn’t display any white spaces because i didn’t define any white space.

I rewrote the markup with div’s and css, but even then i get to see white spaces.

 
Magento Community Magento Community
Magento Community
Magento Community
 
sherrie
Moderator
 
Avatar
Total Posts:  1655
Joined:  2007-12-14
Waterloo, ON
 

Hate to break it to you but bozmac is right.  This would apply whether you’re in Magento or not.  If you’ve had it work the other way you must be using an editor that takes out the spaces on its own.

 
Magento Community Magento Community
Magento Community
Magento Community
 
XPSM1730
Member
 
Total Posts:  70
Joined:  2008-02-27
 

Ehhh no honey, it works fine outside of magento. I removed the spaces between the TD tags, but i still get to see white spaces. And yes i cleaned the cache etc.
I rewrote the whole thing into div’s and css, and even with div’s it creates white spaces.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

if it’s my layout, I will look into CSS Specificity for the table or td tag before blaming Magento.

http://www.google.com/search?hl=en&q;=CSS+specificity&btnG;=Google+Search

 
Magento Community Magento Community
Magento Community
Magento Community
 
XPSM1730
Member
 
Total Posts:  70
Joined:  2008-02-27
 

Yeah, IF i created my own CSS which i didn’t. I didn’t modify anything in the lay-out, CSS or whatever. Also, it’s only shown like that in firefox, so firefox is misinterpreting a css definition somewhere. When i open the page in internet explorer, there are no white spaces. So it’s nonsense that i have to remove the spaces between the cells and image, i know my HTML…

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 
XPSM1730 - 27 June 2008 01:30 AM

i know my HTML…

Perhaps you need to know your CSS too, and learn to know the browser behaviour working with CSS layout LOL

Honestly you are not helping yourself by not positing your site for us to take a look. If you are so sure it’s Magento problem, the only way we can help you find out whether it’s really Magento problem is to take a look at your page.  The code you posted about with an image won’t help much.

One thing about Firefox, is that it adds a few pixel extra at the bottom of an image (I think it only occur when image is linked).  Quite annoying indeed . Adding a ‘display:block’ should make it goes away. The image you posted, is really hard to tell what was that about, but now that you mentioned it only occur in Firefox, makes me think this must be the problem.

Try something like this:
img {display:block}

or
td img {display:block}

if you want to be very specific, use something like

#tablename td img {display: block}

 
Magento Community Magento Community
Magento Community
Magento Community
 
XPSM1730
Member
 
Total Posts:  70
Joined:  2008-02-27
 

http://img516.imageshack.us/img516/3060/breakdownhc1.png

Image Attachments
breakdown.png
 
Magento Community Magento Community
Magento Community
Magento Community
 
bozmac
Jr. Member
 
Total Posts:  18
Joined:  2008-06-17
 

okay smart***, here’s how you fix it.

1. install firebug in firefox
2. use the inspect button and click the td you’re having trouble with.
3. see those CSS rules on the right pane? look at the computed values and the raw values. try and see if there’s a rule that’s adding padding or margins to the block elements you’re using.

 
Magento Community Magento Community
Magento Community
Magento Community
 
XPSM1730
Member
 
Total Posts:  70
Joined:  2008-02-27
 
bozmac - 09 July 2008 02:19 AM

okay smart***, here’s how you fix it.

1. install firebug in firefox
2. use the inspect button and click the td you’re having trouble with.
3. see those CSS rules on the right pane? look at the computed values and the raw values. try and see if there’s a rule that’s adding padding or margins to the block elements you’re using.

Thank you smartypants for that very nice firefox plugin, it’s very useful.

 
Magento Community Magento Community
Magento Community
Magento Community
 
XPSM1730
Member
 
Total Posts:  70
Joined:  2008-02-27
 
ohminu - 27 June 2008 07:49 AM

XPSM1730-
It’s always easier to blame something/someone other than the blamer’s lack of knowledge - if a basic html like yours breaks without any Magento functionality attached to it, surely you should think of the possibility that it’s a browser bug. There’s many browser bugs that you will need to deal with in any other ecommerce application, as it is inherent to each individual browsers. It’s your loss by not learning it. smile

Probably your problem is caused by firefox’s tendency to create an empty space below images, as chinesedream mentioned in the previous reply.

Ofcourse it is, but again - without any magento functionality it works fine. It breaks up once it’s implemented inside a magento CMS page.
basic html code outside magento - good smile
basic html code Inside magento CMS page - bad confused
I’m going to take look at the problem tomorrow with the firefox plugin that “bozmac” mentioned. I’ll let you know the results.

I love magento and i am trying to learn it.

 
Magento Community Magento Community
Magento Community
Magento Community
 
nikefido
Guru
 
Avatar
Total Posts:  481
Joined:  2008-07-11
New Haven, CT
 

there’s no need to define and images width and height within the image tag. that could be part of the problem.

There also might be some CSS rules that you aren’t aware of causing the problem. (for instance, margins or padding around your images, or around your table rows / cells)

Your set up is also a bad setup as far as getting backgrounds into tables.

I would use a DIVs (as you said you changed them into)
Might want to use an image for the upper area to get the rounded corners
make the background black
use a 2nd div with an image for the bottom of the rounded corner.

 
Magento Community Magento Community
Magento Community
Magento Community
 
jogle
Jr. Member
 
Total Posts:  3
Joined:  2008-09-28
 

I have same problem.
IE works
Firefox does not works
This error happen when I have modified Default Skin and templates.
I have eliminate all CSS references of template but <TD> or <IMG tag continues adding one space below image
it seems as if magento defined some specifications css for tables or images before obtaining css files of template and skin

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 1 of 2