Solved

table border problem in firefox

Posted on 2004-10-18
12
649 Views
Last Modified: 2012-08-14
Hi, playing with XHTML & CSS I noticed that FF rendering of table borders is quite different from IE & Opera ones: FF seems to apply the border outside the parent box... is this a standard bahavior? How can I fix this to make my page crossbrowser?

Here's a simple page that shows the problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

<title></title>

<style type="text/css">

body {
  margin: 0px;
  padding: 0px;
}

table {
  border-collapse: collapse;
  border: 1px solid #000;
}

table td {
  padding: 2px 4px;
  border: 1px solid #000;
}

#box {
  margin: 40px;
  background-color: #DDD;
  width: 200px;
  height: 200px;
}

</style>

</head>

<body>

<div id="box">
  <table>
    <tr>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
    </tr>
    <tr>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
    </tr>
    <tr>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
    </tr>
    <tr>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
    </tr>
  </table>
</div>

</body>

</html>
0
Comment
Question by:Kupi
  • 3
  • 3
  • 2
  • +2
12 Comments
 
LVL 11

Assisted Solution

by:raj3060
raj3060 earned 83 total points
ID: 12341675
Here use this, you are providing height and width to box but not to the table:
++++++++++=
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

<title></title>

<style type="text/css">

body {
  margin: 0px;
  padding: 0px;
}

table {
  border-collapse: collapse;
  border: 1px solid #000;
      width:100%;
      height:100%;
}

table td {
  padding: 2px 4px;
  border: 1px solid #000;
}

#box {
  margin: 40px;
  background-color: #DDD;
  width: 200px;
  height: 200px;
}

</style>

</head>

<body>

<div id="box">
  <table>
    <tr>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
    </tr>
    <tr>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
    </tr>
    <tr>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
    </tr>
    <tr>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
      <td style="width: 25%;">&nbsp;</td>
    </tr>
  </table>
</div>

</body>

</html>

++++++++
0
 
LVL 3

Author Comment

by:Kupi
ID: 12342113
Look at the output size:

IE & Opera: 200x200px
FF: 201x201px

In FF the top and left borders are outside the box! Why does this happen??
0
 
LVL 18

Expert Comment

by:arantius
ID: 12342146
Ahhhhh the famous box model problem.

In short, yes, the standard says one thing, and IE does something totally different.  In lots of ways, Opera is the tame sheep, and just does what IE does to stay with the herd.  Firefox follows the standard, because standards are important.  Here's a nice page about it.  http://encyclopedia.thefreedictionary.com/Internet%20Explorer%20box%20model%20bug
Quote: "According to the specification for CSS published by the World Wide Web Consortium, when a width is explicitly specified for any block-level element it should determine only the width of the content within the box, with the padding, borders and margins added afterwards. Internet Explorer incorrectly includes the padding and borders withing the specified width, resulting in a narrower box when displayed."

In short the most-guaranteed-compatible solution is to apply borders and margins to one div, and then enclose that inside another div where your size is set.  That's not very clean though.  It's a problem we all have to deal with.
0
 
LVL 3

Author Comment

by:Kupi
ID: 12342388
But my problem is with table borders... :)

Top and left borders seem to go outside the box as the table margin was -1px 0px 0px -1px!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12342414
To be realistic about it for a moment; who really cares?  How many of yor users are bring up the page in multiple browsers for comparison?  Who other than you actually sees the difference?.  If this is a case where your design is so tight that a few pixels if going mess up randering and make it impossible to support both multiple browsers, then you need to re-think your design  philosophy.  If you are coding pages so tightly that this sort of thing is a problem, then you are not doing layout, you are drawing images, and you are going to spend most of your time fixing pages that get broken every time a new version of a browser is introduced.

I learned my lesson with IE 5.  I completely re-did a bunch pf pages because IE 5 did things differently than IE4.  Then IE 5.5 came along and the pages were screwed up all over again.  keep you pages loose and fluid and leth whatever browser the user is using optimize.

Cd&
0
IT, Stop Being Called Into Every Meeting

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!

 
LVL 3

Author Comment

by:Kupi
ID: 12342623
COBOLdinosaur, what you say is right but I still would like to know a possible workaround, if there is one.

A web developer's challenge is also to create a pixel perfect layout that looks the same on every modern browser, isn't it? No matter what the future brings, it's not a good reason to be superficial... I'll edit my pages, if needed! Playing with something is the best way to learn it... and that's just what I'm doing! So I'd like to understand and, if possible, find a way to prevent this strange table bahavior that I never noticed before!

Any suggestion is appreciated! :)
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 83 total points
ID: 12342784
>>>A web developer's challenge is also to create a pixel perfect layout that looks the same on every modern browser, isn't it?

IMO? No it is not.  It is well down the priority list.  Number one is content quality.  It does not mater how good or bad a site looks if it has valueable content that users want.  Some of the highest trafficed sites on the internet have terrible presentation and layout, but have great content.  You don't have to look any further then this site to see that.

Number two is performance/relaibility/security.  It does not matter how great a site look if the pages don't get delivered correctly and quickly.  Any site that even comes close to to threatening user security, is a blot on the development community and we should do everything we can to get such sites of the Internet.

Number three is accessibility.  There are many, many sites on the Internet where the developers have been so concerned about making sure users see the page the way they think it should be presented, that they have reduced accessibility for those who MUST have loose definition to be able to use the sites, and use reading aids.  This has become such a problem that we now have governments passing laws that require minimum levels of accessibility.  The last thing we need is government regulation of how we layout pages, but many developers are beggig for it by insisting that page must render the way they want them presented.

Number 4 is usability/navigation.  Cute page, neat tricks and magic renderings don't do a thing for anyone after they have seen them once or twice, and will be seen as a negative if they get in the way of moving around easily.

Then we get to layout and presentation.  

If I was you all I would do is worry about getting acceptable rendering in each browser.  There is a difference in the render for a simple reason that has already been given; Firefox is following the standards. If something is rendering outside the box, then make the box bigger and if user of the defect browser complain, tell them it is becasue they are using a defective product.  Or if having it pixel perfect is that import then do seperate pages for each browser.  While you are doing all that extra work your competitors will be concentrating on putting better content on their site, and your better presentation will lose out to content.

Cd&
0
 
LVL 19

Accepted Solution

by:
dakyd earned 84 total points
ID: 12343167
For what it's worth, though, I don't quite think the box model is to blame for the differences in rendering.  Yes, you get different widths because of IE's screwy box model, but the "culprit" for different positioning of the borders seems to be the table's border-collapse.  The table's border and the border for its container (#box) are being merged into a single border.  What you're seeing is actually the table's border being treated as its container's border where the two borders touch.

You can do a couple things to prove this to yourself.  First, try increasing the size of the td's borders to something more noticable, like 10 px (I'll only put the CSS for brevity's sake):
<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
}

table {
  border-collapse: collapse;
}

table td {
  padding: 2px 4px;
  border: 10px solid #000;
}

#box {
  margin: 40px;
  background-color: #DDD;
  width: 200px;
  height: 200px;
}
</style>

Notice that the border seems to stick out half-way, so that the border is actually centered at the edge of the parent container.  This is consistent with the model for collapsed borders on a table cell.  It's just being transferred to #box because the two borders collapsed into one.

Now, try removing the border-collapse and move the border to the table instead of the table's cells:
<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
}

table {
  border: 1px solid #000;
}

table td {
  padding: 2px 4px;
}

#box {
  margin: 40px;
  background-color: #DDD;
  width: 200px;
  height: 200px;
}
</style>

This time around, the borders for the table are within the parent container, no sticking out at all.  You can make the border larger if you like, it'll still be contained within #box.  The difference here is that the outer border for the table isn't collapsing with the border for #box, so it's still within the container.

Now, as arantius explained above, IE is screwy - even for collapsed borders, it just shrinks the content area so that you always get 200px for the width.  FF sticks to the standards, so it actually plops the border outside of the #box container, resulting in a width of 201px.  End of the day, though, I think Cd&'s right - you can afford to ignore a 1px difference.  Anyhow hope that helps.
0
 
LVL 11

Expert Comment

by:raj3060
ID: 12507405
Point split
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12514682
sure.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

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

17 Experts available now in Live!

Get 1:1 Help Now