• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 674
  • Last Modified:

table border problem in firefox

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
Kupi
Asked:
Kupi
  • 3
  • 3
  • 2
  • +2
3 Solutions
 
raj3060Commented:
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
 
KupiAuthor Commented:
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
 
arantiusCommented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
KupiAuthor Commented:
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
 
COBOLdinosaurCommented:
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
 
KupiAuthor Commented:
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
 
COBOLdinosaurCommented:
>>>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
 
dakydCommented:
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
 
raj3060Commented:
Point split
0
 
COBOLdinosaurCommented:
sure.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 3
  • 3
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now