?
Solved

table border problem in firefox

Posted on 2004-10-18
12
Medium Priority
?
665 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
[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
  • 3
  • 3
  • 2
  • +2
12 Comments
 
LVL 11

Assisted Solution

by:raj3060
raj3060 earned 332 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
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 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
 
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 332 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 336 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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 add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month12 days, 23 hours left to enroll

777 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