Single article display: table and tbody have different sizes
Ken Ballou
driving me absolutely nuts.
In Joomla! 1.5 (and later versions), the single article view
(components/com_content/views/article/tmpl/default.php) uses a table to
display the article. Normally, that's all fine and dandy. However, I
have been working on a web site where I am using an image at the top of
the single article on the front page. The layout is fixed size (a CSS
"width" specified on <body>), and the image is exactly that width.
The problem is that the layout for <table> is larger than for <tbody> --
four pixels in either direction, as it turns out. Normally, being off
by two pixels on each side wouldn't be a problem, but in this case the
result is truly ugly -- enough so that I have created a template
override for the view that does not use tables.
I tried looking at the following very simple HTML document using Firebug
in the latest version of Firefox:
<!DOCTYPE HTML "-//W3C//DTD HTML 4.01//EN">
<html>
<head><title>Table test</title></head>
<body><table><tr><td>foobar</td></tr></table></body>
</html>
With absolutely no CSS styling, Firebug shows that the <table> box is
48x26, with no padding, no border, and no margin. Firebug also shows
that the <tbody> box is 44x22, with no padding, no border, and no
margin. Where are the other pixels (two on a side) going? Is there any
way (presumably using CSS) to make that not happen? This is
reproducible in Firefox, Safari, and the dreaded IE.
Thanks for any insight anyone might have. This is really bothersome.
- Ken
Glenn (GMail)
I'm no expert in these matters, but the only thing that comes to mind
would be setting margin = -2px for tbody? Would that help? Cheers.
Glenn
bobbykjack
> I tried looking at the following very simple HTML document using Firebug
> in the latest version of Firefox:
>
> <!DOCTYPE HTML "-//W3C//DTD HTML 4.01//EN">
> <html>
> <head><title>Table test</title></head>
> <body><table><tr><td>foobar</td></tr></table></body>
> </html>
>
> With absolutely no CSS styling, Firebug shows that the <table> box is
> 48x26, with no padding, no border, and no margin. Firebug also shows
> that the <tbody> box is 44x22, with no padding, no border, and no
> margin. Where are the other pixels (two on a side) going? Is there any
> way (presumably using CSS) to make that not happen?
collapse and border-spacing are the ones that are relevant here.
Possible fixes include:
1. setting table { border-collapse: collapse; }
This should reduce the space between the boxes generated by all the
table's cells. Note that this is NOT the same as setting individual
cell's borders; they can still exist in tandem. The border-spacing
property is more analogous to margins, despite the name.
2. setting table { border-spacing: 0; }
Or any other value you require
3. The bad-old 'styling-in-markup' approach of setting the cellpadding/
cellspacing attributes. I wouldn't advise this, unless you *really*
need to support older browsers.
On that note, I've only tested these properties on the latest version
of Mac Firefox; I'm unsure of exactly how well all versions of each
and every browser handle these properties. But they're definitely a
good place to continue your experiment with.
And, of course, the root problem is using tables for layout in the
first place - you wouldn't experience this problem using more
semantically-correct elements for layout.
- Bobby
G. D. Speer
browser-default spacings to zero.
b) Use an inline style of <table cellspacing=0 cellpadding=0> to wrangle
table spacing in a fully cross-browser method.
> --
> You received this message because you are subscribed to the Google Groups
> "Joomla! General Development" group.
> To post to this group, send an email to
> joomla-de...@googlegroups.com.
> To unsubscribe from this group, send email to
> joomla-dev-gene...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/joomla-dev-general?hl=en-GB.
>
>
>
> -----
> No virus found in this message.
> Checked by AVG - www.avg.com
> Version: 2012.0.1913 / Virus Database: 2112/4797 - Release Date: 02/08/12
>
Ken Ballou
Setting border-collapse and border-spacing as suggested works
perfectly. I am somewhat disappointed that Firebug does not show these
properties in the "computed" tab.
And I definitely agree about using semantically-correct markup. It's
unfortunate that the views in com_content use tables for layout. On the
other hand, I've learned something new today. :-)
I guess I need to spend some quality time with the CSS 2.1 specification
to learn details of table styling.
- Ken
Andrea Tarr at Tarr Consulting
Ken Ballou
- Ken