CSS borders problem

Forum Moderators: not2easy

Message Too Old, No Replies

CSS borders problem

a problem with border dimensions

mita4eto

8:51 am on Mar 23, 2007 (gmt 0)

Hi, colleagues!
I needed to have a data visualization in a table with more than 10 rows and columns. Okay, I created the table, also the styles for that table and did border definitions in the .css class for the cells. The problem is that defining a border dimention (1px for example) IE6 and gecko-based browsers accept the border dimentions in different ways - its width is either a part of the whole Cell width, or it is applied additionally to the width of the cell. In that way, imagine a table with 30 rows and 30 cells what enormous differences has...
How can I create a table cell class with border that is rendered equally by IE6 and Gecko browsers?
Here the class is:
.myCell{
width:24px;
height:19px;
border: solid;
border-width:0px 1px 1px 0px;
border-color:#30549E;
background-color:#DBE7F0;
}

Fotiman

2:58 pm on Mar 23, 2007 (gmt 0)

The difference has to do with IE's box model when running in quirks mode. In order to correct this, you want IE to run in standards mode, NOT quirks mode. To do that, all you need to do is include a fully qualified DOCTYPE on the first line of your document. For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

mita4eto

8:39 am on Mar 26, 2007 (gmt 0)

Hi, Fotiman!
Yes, sounds reasonable ;-) The first thing I did was ensuring that the DTD definition is correct in my document. So, no doubt I did it and in spite of that, the code was still rendered differently by IE6 and Mozilla. You can check here <snip>
The width of the table is rendered equally but look at the height - it is different. May you give me any proposal?

[sample code added]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.:: Test Doc ::.</title>
<style type="text/css">

</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" align="left" >
<tr>
<td align="center" valign="middle" class="cell"> </td>
<td align="center" valign="middle" class="cell"> </td>
<td align="center" valign="middle" class="cell"> </td>
<td align="center" valign="middle" class="cell"> </td>
<td align="center" valign="middle" class="cell"> </td>
<td align="center" valign="middle" class="cellDark"> </td>
<td align="center" valign="middle" class="cellDark"> </td>
<td align="center" valign="middle" class="cell"> </td>
<td align="center" valign="middle" class="cell"> </td>
<td align="center" valign="middle" class="cell"> </td>
<td align="center" valign="middle" class="cell"> </td>
<td align="center" valign="middle" class="cellDark"> </td>
<td align="center" valign="middle" class="cellDark"> </td>
</tr>
</table>
</body>
</html>

there are many more rows and columns but this should be enough to see

[edited by: SuzyUK at 9:32 am (utc) on Mar. 26, 2007]
[edit reason] Please no URI's per TOS #13 [WebmasterWorld.com] [/edit]

Fotiman

2:23 pm on Mar 26, 2007 (gmt 0)

Your example looks identical to me in IE6 and Firefox 1.5.0.11, so I'm not sure why you're seeing a problem.

mita4eto

2:37 pm on Mar 26, 2007 (gmt 0)

Just look at this URL here: <snip>
The height in Mozilla and IE6 of the entire table is different and it comes from the rendering of the bottom border. Just do a printscreen and measure the height and you'll see the difference.

It is pretty weird that in width I already managed to tell the browsers that this should be rendered equally but I can not do that for the height ... Looking forward to see your decision ;-) Thanks in advance for that!

[edited by: Robin_reala at 9:08 pm (utc) on Mar. 26, 2007]
[edit reason] Removing URL as per TOS #13 [webmasterworld.com] [/edit]

Fotiman

9:24 pm on Mar 26, 2007 (gmt 0)

Ok before you said the width. Comparing both widths, they are the same. But you are correct about the height being different. It's easier to see if you increase the height and bottom border values. I'm not sure yet why the difference though.

mita4eto

6:24 am on Mar 27, 2007 (gmt 0)

I think the different height comes from the different interpretation of box model by IE6 and Mozilla(I don't have any other reasonable explanations): the one takes the total width of a box TOGETHER with its borders and the other takes the defined width as a container width and adds the borders OUTSIDE. Just I'm looking for a way how to get around that and till this moments I have read hundreds of tuts and postings and nobody knows exactly the decision. Hope here I will find it

Setek

7:03 am on Mar 27, 2007 (gmt 0)

I think the different height comes from the different interpretation of box model by IE6 and Mozilla(I don't have any other reasonable explanations): the one takes the total width of a box TOGETHER with its borders and the other takes the defined width as a container width and adds the borders OUTSIDE. Just I'm looking for a way how to get around that and till this moments I have read hundreds of tuts and postings and nobody knows exactly the decision. Hope here I will find it

You're right about that ;)

Padding on the cells will ruin your height, as will borders. Also, since IE 6 interprets your height value fluidly,

line-height

along with

font-size

could also be mucking with it.

If you can barebones all of those properties (no padding, no borders, 1px

line-height

and

font-size

) then you'll hit it :)

Just out of curiosity, has anybody asked you about purpose?

By the looks of the eensy-weensy height and width you have there, it doesn't particularly look like you're using the table for tabular data...

SuzyUK

8:00 am on Mar 27, 2007 (gmt 0)

Funnily enough I think it's only IE6 and 7 that are different never noticed that before..

and yes there's a way to achieve it with the easiest solution being a conditional because of the need to target only IE6/7

here was presuming a 25px content height + 5px border

CSS:
td {
width: 25px;
height: 30px; /* height including 1 x 5px border */
}
CC

the cells in IE6/7 inherit the height from the row instead this seems to work in my tests anyway (presuming the compliant rendering Doctype in your code)

Suzy

mita4eto

1:56 pm on Mar 27, 2007 (gmt 0)

Yeah, thank you for your help, guys! Actually, I found 2 workarounds about the problem. The first is a problem that I have just learned about: if you want to define a height of any box, do NOT use "height: ..px;" Instead you should use "line-height: ..px;" I do not know why but that was the key of my border problems. Wow, I am still surprised with the new discovery ;-)
And the second decision was the advice of you, guys and I am so grateful! You gave me an advice to use conditional comments to specify the concrete chunks of code that are not rendered properly by IE. I did a second .css file with the definitions only of the buggy classes and used the condition if the browser is IE6, it should use the alternative .css class:

So, once again guys, thank you for your help!