Solved

removing gaps in tables for different browsers

Posted on 2008-06-24
9
654 Views
Last Modified: 2013-12-07
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
Comment
Question by:DesignersCafe
  • 4
  • 3
  • 2
9 Comments
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 21859877
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
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 21859893
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
 

Author Comment

by:DesignersCafe
ID: 21861558
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
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 21861605
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:DesignersCafe
ID: 21876241
I've played with tons of style elements and still no success in Firefox.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 21879900
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
 

Author Comment

by:DesignersCafe
ID: 21879919
I want to thank everyone for their help and tips. I found an incompatible link style that was the culprit.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 21879929
to close the question then, assign points (split) to the answers that best approached the problem and needs
0
 
LVL 108

Accepted Solution

by:
Ray Paseur earned 500 total points
ID: 21882597
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now