homepage Welcome to WebmasterWorld Guest from 54.225.1.70
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
CSS borders problem
a problem with border dimensions
mita4eto




msg:3290698
 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




msg:3290957
 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




msg:3293118
 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">
<!--
body{
margin: 0px;
padding: 0px;
font-family: Arial, sans-serif;
font-size:12px;
color:#000000
}
.cell {
width:25px;
height:20px;
border-right: 1px solid #30549E;
border-bottom: 1px solid #30549E;
background-color:#DBE7F0;
}
.cellDark{
width:25px;
height:20px;
border-right: 1px solid #30549E;
border-bottom: 1px solid #30549E;
background-color:#BED3E9;
}
-->
</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" align="left" >
<tr>
<td align="center" valign="middle" class="cell">&nbsp;</td>
<td align="center" valign="middle" class="cell">&nbsp;</td>
<td align="center" valign="middle" class="cell">&nbsp;</td>
<td align="center" valign="middle" class="cell">&nbsp;</td>
<td align="center" valign="middle" class="cell">&nbsp;</td>
<td align="center" valign="middle" class="cellDark">&nbsp;</td>
<td align="center" valign="middle" class="cellDark">&nbsp;</td>
<td align="center" valign="middle" class="cell">&nbsp;</td>
<td align="center" valign="middle" class="cell">&nbsp;</td>
<td align="center" valign="middle" class="cell">&nbsp;</td>
<td align="center" valign="middle" class="cell">&nbsp;</td>
<td align="center" valign="middle" class="cellDark">&nbsp;</td>
<td align="center" valign="middle" class="cellDark">&nbsp;</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




msg:3293333
 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




msg:3293346
 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




msg:3293702
 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




msg:3294022
 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




msg:3294046
 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




msg:3294076
 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
<!--[if gte IE 6]>
<style type="text/css" media="screen">

tr {height: 30px;} /* height including 1 x 5px border IE 6 & 7 */
td {height: 100%;}

</style>
<![endif]-->

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




msg:3294349
 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:
<!--[if IE]><style type="text/css">@import "ie_fix.css";</style><![endif]-->

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved