asked on

forced bottom padding in wordpress table cells or images or links :(

Hello All,

One of those problems that drives you crazy...

i have added a table based rollover menu for a wordpress website. each of my images has a 2 pixel border between rows which i cannot remove.. please review below for reference...

http://www.jennplayford.com/uncategorized/hello-world/#

before i start posting code I will mention everything i have done to try to fix it....

- added inline styles to all the images, td and tr and table tags
- rewritten the table html
- removed the tables altogether and built it with DIV tags
- added inline style to the images
- removed all style relating to tables from the CSS
- removed the template CSS (still had the space)
- removed all javascript from the website
- removed all plugin CSS from the website

that last 3 points have really stumped, with no CSS/javascript at all, it still has the space, WTF!!! Also after removing the table tags and using it divs, it still had it, makes no think it is from the img tag, but no luck there..

please help before i put my fist through my monitor :)

Jason C. Levine

What happens if you remove the table cell height attributes completely?

jblayney

ASKER

Hi Jason,

Just tried, no change. I had actually just added them...

Jason C. Levine

This will be a fun one. I'm looking it over.

jblayney

ASKER

no kidding, firebug is not helping either, it shows my border/padding/margin anything.. i am going to add negative margins to the images to see if that helps and works on every OS and browser..

ASKER CERTIFIED SOLUTION

jeremyjared74

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jonahzona

Something is changing. Looks like you are onto something!

jonahzona

Add this:

tr img {
  display: block;
}

Open in new window

It will take care of the remaining gaps.

jonahzona

Here is a screenshot

SOLUTION

jonahzona

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jason C. Levine

What I *THINK* may be going on is the page is not valid so the browser is going into quirks mode and that could cause the table to basically ignore the CSS and/or the cellpadding, cellspacing attributes on the table. When I look at the table in Dreamweaver, I don't see the gaps until I remove the cellpadding and cellspacing on the table. That kind of oddball behavior leads me to think about quirks mode:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.jennplayford.com%2Funcategorized%2Fhello-world%2F%23&charset=%28detect+automatically%29&doctype=Inline&group=0

Still messing with it, though.

Jason C. Levine

Hell, should have refreshed first.

jblayney

ASKER

wow, thanks everyone, while i was doing my negative margin hack, i didn't notice all the comments..

i removed my hack and added

.menu_img_style {
      display: block;}

tr img {
display: block;
}

tr {
line-height:0 !important;
}

and now it works, thanks everyone...

for the quirks mode - well i hope not, this is a fresh WP install, i would hope it is valid...

Jason C. Levine

It's not WP, it's the code you add to it :)

Anyway, the other folks were correct. Glad you got it working!

jblayney

ASKER

now looking it over and thinking, the solution must be

.menu_img_style {
display: block;}

because 2 hours ago i had rewritten the whole code without tables and used DIVs, and still had the problem..