Solved

removing gaps in tables for different browsers

Posted on 2008-06-24
9
655 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
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…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

863 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

27 Experts available now in Live!

Get 1:1 Help Now