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

removing gaps in tables for different browsers

I'm putting together what I thought was a pretty simple site and come to find that I am getting gaps in the table, thus ruining the appearance of the site. I am getting DIFFERENT gaps in different browsers as well.

In IE7, there is a  horizontal gap in the content area to the left of a graphic (doctor with photos around him) which needs to disappear to retain graphic continuity.

In Firefox 2.0, I'm getting vertical gaps between most of the navigation cells in the header of the site.

I've tried messing with the style sheet and HTML to remove these gaps. What do I need to do to make sure my final site doesn't have these gaps?
0
DesignersCafe
Asked:
DesignersCafe
  • 4
  • 3
  • 2
1 Solution
 
scrathcyboyCommented:
the way to get a handle on this is to use CSS with the following attributes --

TABLE  margin:0px; padding:0px; overflow:visible;
TD   .. same ...
TR  ... same ....
.image  .. same ...

in addition to whatever other CSS you have for tables, TDs and TRs.  This will set NO margins and NO padding, which will get you to ground zero -- then you can work up from there.  The overflow:visible is a special hack for M$ IE, which stupidly pads form fields, images and other elements in ways that M$ thought was cute, but turns out to be a supreme nuisance -- typical of M$, always doing non-compliant stuff.   For the image you would use class="image" in the <IMG tag -- the rest of the table structure will automatically pick up the CSS above.

Also, realize that the image itself might have been made with a border.  If so, use the free irfanview (www.irfanview.com) to crop and resave the image.  When you specify your TD width, also you should make it the same width as the image itself.  When all done, you will have everything touching each other, which is very uncomfortable to view, especially reading text.  But this is the starting point, you then increase the padding or margins until it is comfortable.
0
 
Ray PaseurCommented:
This is what I would try...

In your block elements (body, tables, images, etc.) add to CSS margin:0px; border:0px; padding:0px;

Then you can do explicit margins, pads and borders as needed.
0
 
DesignersCafeAuthor Commented:
Well, I've tried both tips. I've cured the image gap in IE7. Unfortunately, the vertical gaps in Firefox still persist. Anything else before I start pulling my hair out?
0
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.

 
scrathcyboyCommented:
simply remember that margin:0px and padding:0px refer to margins and padding on ALL sides.

To specify them individually, you use --

margin-top:3px; margin-bottom:4px; margin-left:1px; margin-right:1px;

Likewise for padding.  Play with the numbers, and save your hair.  You will have a lot less in 15 years.
0
 
DesignersCafeAuthor Commented:
I've played with tons of style elements and still no success in Firefox.
0
 
scrathcyboyCommented:
FF2 is more standards compliant than IE, and Mozilla is even more standards compliant that FF2.  Using the correct Table structure or CSS, I can remove ANY and ALL gaps in table padding on IE.  So it is clearly something that you are missing or not doing.  SO where do you want to go from here?  Resign yourself to the fact that it cannot be fixed ....or fix it.  Which?
0
 
DesignersCafeAuthor Commented:
I want to thank everyone for their help and tips. I found an incompatible link style that was the culprit.
0
 
scrathcyboyCommented:
to close the question then, assign points (split) to the answers that best approached the problem and needs
0
 
Ray PaseurCommented:
Going forward, get yourself a copy of Firefox and install the Firebug plug-in.  You can display your CSS on the screen with your web page and as you run your mouse over the CSS statements it will color-highlight the design elements on the browser window.  You can see borders, margin, padding, divs, classes, all that good stuff.  Saved me a lot of hair.  It only works with Firefox and we will still have to live with IE6 for a while longer (15% of my visitors still have IE6) but you'll be able to troubleshoot a LOT of issues instantly.

Best regards, ~Ray
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now