Solved

removing gaps in tables for different browsers

Posted on 2008-06-24
9
659 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

Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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…

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