• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 254
  • Last Modified:

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 :)









0
jblayney
Asked:
jblayney
  • 5
  • 4
  • 4
  • +1
2 Solutions
 
Jason C. LevineNo oneCommented:
What happens if you remove the table cell height attributes completely?
0
 
jblayneyAuthor Commented:
Hi Jason,

Just tried, no change. I had actually just added them...
0
 
Jason C. LevineNo oneCommented:
This will be a fun one.  I'm looking it over.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
jblayneyAuthor Commented:
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..
0
 
jeremyjared74Commented:
Add this one line of CSS to fix it:

tr {
line-height:0 !important;
}
0
 
jonahzonaCommented:
Something is changing. Looks like you are onto something!
0
 
jonahzonaCommented:
Add this:

tr img {
  display: block;
}

Open in new window


It will take care of the remaining gaps.
0
 
jonahzonaCommented:
Here is a screenshot

 screenshot
0
 
jonahzonaCommented:
I saw you used a class and some negative margins to fix.

FYI, you don't need them if you give it a display:block.

.menu_img_style {
    display: block;
}

Open in new window


0
 
Jason C. LevineNo oneCommented:
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.
0
 
Jason C. LevineNo oneCommented:
Hell, should have refreshed first.
0
 
jblayneyAuthor Commented:
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...
0
 
Jason C. LevineNo oneCommented:
It's not WP, it's the code you add to it :)

Anyway, the other folks were correct.  Glad you got it working!
0
 
jblayneyAuthor Commented:
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..
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 5
  • 4
  • 4
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now