872540 - In table cells, border properties are sized by text and by wrap, not by cell boundaries

Status: RESOLVED INVALID

(Core :: General, defect)

Description

[Ed Wischmeyer]

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; Gulfstream Aerospace)

Steps to reproduce:

Tried to use cell border-top propert and it only drew a border over the text, not over the whole cell.  


Actual results:

Top-border appeared only over the text. And when text wrapped in a cell, I got border around each line of the text. For two lines of text, I got a "C" and a backwards "C".


Expected results:

Top-border should have appeared across the width of the cell, or better, the entire row from within the <tr> tag. Full border should have gone around the cell boundaries, not around the text.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Can you please link to or attach your HTML?  It sounds like you have a "display: inline" style on your "cell", but I'd like to verify that.

Comment 2

[Ed Wischmeyer]

Here's the code, stripped down as much as I could. Thanks for the help!


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>One Big Screen Demo</title>
<style type="text/css">

.container {
	width: 2048px;
	background: #FFF;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}

table {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	/*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
	user-select: none;
	color: #009;
}


TopBorder /* This outlines table cells, making them look like buttons. These are okay */
{	border-top:1px solid white; 
	padding-left:1px;
}	
	

mayDo /* This outlines table cells, making them look like buttons. Used for departure frequency, also for checklist helps */
{	border:1px solid white; 
	border-radius:3px;
	padding-left:2px;
	padding-right:2px;
	color:white;
}	

toDo /* This outlines table cells, making them look like buttons. These need attention */
{	border:2px solid white; 
	border-radius:3px;
	padding-left:5px;
	padding-right:5px;
	color:white;
}	

done /* This outlines table cells, making them look like buttons. These are okay */
{	border:1px solid green; 
	border-radius:3px;
	padding-left:5px;
	padding-right:5px;
	color:green;
}	

.NormalTable {
	font-family: Verdana, Geneva, sans-serif;
}
.tableCell {
	font-size: medium;

}
.normalCell {
	font-family: Verdana, Geneva, sans-serif;
	font-size: small;
	font-weight: bolder;
	border-color:#FF0033;
	table-layout:auto;
	background-color: #999;
	color: #000;
	background-repeat: no-repeat;
}
.Class_1
	{
	color:#006;
	font: bold 84% 'trebuchet ms',helvetica,sans-serif;
	background-color:#FFE;
	border:1px solid;
 	border-color: #696 #363 #363 #696;
	border-radius:3px;	
	}
	
button
	{
	border-radius:3px;
	border:1px solid;
	}
input.Class_2
	{
	color:#006600;
	/* [disabled]font: bold 84% 'trebuchet ms',helvetica,sans-serif; */
	background-color:#00CC88;
	border:1px solid;
	border-color: #696 #363 #363 #696;
	border-radius:3px;
	}
input.windowBgnd
	{
	color:#006;
	font: bold 84% 'trebuchet ms',helvetica,sans-serif;
	background-color:#FFFFCC;
	border:1px solid;
 	border-color: #696 #363 #363 #696;
	border-radius:3px;
	}

input.Class_1
	{
	color:#BB1111;
	font: bold 84% 'trebuchet ms',helvetica,sans-serif;
	background-color:#F9C;
	border:1px solid;
 	border-color: #696 #363 #363 #696;
	border-radius:3px;
	}
	
input.blankButton
	{
	background-color:#BEBEBE;
	border:none;
	}

body {
	background-color: #090;
	background-image: url(grayBackground.jpg);
}
</style>

<script type="text/javascript"> 

function hideWindow(theID) { theID.style.visibility = "hidden"; }

function showWindow(theID) { theID.style.visibility = "visible"; }
	
function noPx (str) {
	var strLength = str.length;
	return Number(str.substring(0,strLength-2));
}

function addPx(num) {
    return String(num) + "px";
}

function bringUpRelative(baseID,movableID,Xoffset,Yoffset)
	{ 
	showWindow(movableID);
	movableID.style.left	= addPx(noPx(baseID.style.left) + Xoffset);
	movableID.style.top		= addPx(noPx(baseID.style.top) + Yoffset);
}

function bringUpAbsolute(itsID,Xposition,Yposition)
	{ 
	showWindow(itsID);
	itsID.style.left	= addPx(Xposition);
	itsID.style.top		= addPx(Yposition);
}

</script>

</head>

<body>


<!-- Sometimes I may want to do just the text, but I definitely need to be able to do the whole cell... -->
<!-- Thanks for the help! -->
<!-- And you've probably noticed I'm still coming back up to speed on CSS. Been too many years since I took the class -->

<div id=WINDOW1  title="WINDOW1" 
	style="position:absolute; z-index:1000; top:130px; left:140px; width:235px;" class="unselectable"  > 
    
    <table  title="WINDOW1 Table Title" border="0" cellspacing="0" cellpadding="0" height="36" cols="3"  >
    <col width="15px" />
    <col width="135px" />
    <col width="80px" />
 
    <tr><th scope="col" class="Class_1" colspan="3" onmousedown="startDragging(event);" onmouseup="finishDragging(event);" > 
    <span>WINDOW1</span></th></tr>
       
    
    <tr border-bottom="1px  white" padding="5px" border-bottom="1px white"   ><td width="200px" bgcolor="#222244" style="padding:2px" COLSPAN="3" onMouseover="this.bgColor='#666666' " onmouseout="this.bgColor='#222244'" 
    onClick="hideWindow(EngineStartChecklist)">
    <font face="Arial" color="#DDDDDD" size="2" ><TopBorder> > SOME STUFF...  </TopBorder></font>  </td> </tr>
    
    <tr border-bottom="1px  white" padding="5px"  ><td width="200px" bgcolor="#222244" style="padding:2px" COLSPAN="3" onMouseover="this.bgColor='#666666' " onmouseout="this.bgColor='#222244'" 
    onClick="hideWindow(EngineStartChecklist)"> 
    <font face="Arial" color="#DDDDDD" size="2" ><mayDo> > MORE STUFF...  </mayDo></font>  </td> </tr>
    
</table>    
</div>

</body>
</html>

Comment 3

[Loic]

Attachment: Reporter's testcase

Comment 4

[Loic]

IE9 has the same rendering.

Comment 5

[Boris Zbarsky [:bzbarsky]]

That HTML sets the border on the <TopBorder> element, not on the cell.  That's an unknown element, hence inline, hence will wrap with the text.

If you want to have a border on the cell, put it on the cell itself?  Alternately, you could at least style the TopBorder with "display: block"....

Rendering looks correct to me given the markup.

Comment 6

[Ed Wischmeyer]

Could not get display=block to work. 

And you're right, I've got <TopBorder> in the sample code, but I want it to go the full width of the cell, not just over the text.

When I had a full border around the text and the text wrapped, I got a right-facing "C"-shaped outline around the first line and a left-facing C around the second line...

Comment 7

[Boris Zbarsky [:bzbarsky]]

> Could not get display=block to work. 

How did you do it?

> but I want it to go the full width of the cell, not just over the text.

Then set display:block on the TopBorder.

> When I had a full border around the text and the text wrapped, I got a right-facing
> "C"-shaped outline around the first line and a left-facing C around the second line...

Yes, that's how borders on inlines behave.

Comment 8

[Ed Wischmeyer]

Thanks, Boris!

I'm a happy camper now, problem fixed. It was at my end, not a real bug at all.