Row padding
craigdurling - February 28, 2006 - 04:29
I am working on modifying a theme but am experiencing an issue in Firefox where the rows of a table have a few pixels of padding at the top and bottom (but not the sides). The result is a thin space between each row. This issue does not seem to happen in IE.
I have checked my code up and down and also have gone through the theme and default stylesheet but cannot find the answer. I have even tested disabling the stylesheets and comparing IE to Firefox and still see the same issue so now I'm wondering if the stylesheet has anything to do with it.
I have searched the forums for this problem but am finding very little. Does anyone have any ideas?
Is there a border to the table?
When you start the table you probable want something like
<table cellpadding="0" cellspacing="0" border="0">You may also want/need to set border-collapse (in css) to collapse. If you want to apply it only to this table you will need to add a id and/or class.
If this does help, posting a link to your site would make it easier to help (otherwise it is a bit of a shot in the dark).
testing site
Thanks, but I think my HTML is fine and border-collapse is set to collapse. Here is my testing site. Remember, this is only happening in Firefox.
http://rescueboard.durling.ca
another shot in the dark
but XHTML strict apparently renders images inline instead of block when out of quirksmode
http://www.quirksmode.org/css/quirksmode.html
- a subtle change that may break a few layouts (by adding a tiny bit of space to otherwise snug tables), but is more valid conformance apparently.
I've never seen it in practice, but there's more than you ever wanted to know at that link.
the fix looks easy
http://www.coders.co.nz/
Don't think that explains no padding on sides
Thanks for the suggestion.
I had a look but I always use doctype tag and the box model differences from strict to quirksmode do not explain why there appears to be padding or spacing on the tops and bottoms of cells, but not to the left or right.
I've pasted the link to my site above (previous post) if you don't mind having a look. It's nice to have a second set of eyes look at it as I've been looking at it so long that I'll likely not pick up on any coding mistakes.
Please let me know if you see anything that jumps out as strange.
I had the same problem
I had the same problem, but thanks to dman it was solved.
Read the img display on http://www.quirksmode.org/css/quirksmode.html
Some CSS errors
If you validate the CSS you will find the follow CSS errors
URI : http://rescueboard.durling.ca/themes/rescueboard/style.css
* Line: 15 Context : tr.odd td, tr.even td
Invalid number : padding only 0 can be a length. You must put an unit after your number : 0.3 em
* Line: 229 Context : .node .taxonomy
Invalid number : padding em is not a padding-right value : 0 em
Fixing these may or may not solve the problem, but if you fix them it will remove them as a possible cause.
Why use a table for that?
Why use a table for that?
Well, anyways.. you didn't set a height for the cells or there's a margin/padding spacing it out. Possibly the reason there's no margin on the sides is because there's something causing the table rows to collapse. Try setting the height on the table cell or zeroing out the padding/margin.
btw, I'm looking at it from a tool to preview CSS layouts that uses webkit as the renderer -safari's basically- and it shows the same issue.
-joon
www.dvessel.com