Solved

removing gaps in tables for different browsers

Posted on 2008-06-24
9
658 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 110

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
Industry Leaders: 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!

 
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
 

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 110

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

Technology Partners: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Form Data Disappears Using Back Button 4 21
Website not secure message 4 61
Change how page is organized 3 37
Web content filtering solution 6 33
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
This article discusses four methods for overlaying images in a container on a web page
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

726 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