CSS border problem

Muiter · January 30, 2011

I have several border problem as i'm a bit new to CSS so I can't solve these problems. I hope someone can help me.In the circles you seen an thin line of background. How can I prevent this?On the left you see an blue border. That is OK, where I have drawn on red line there in no border shown but there should be the blue border as well.My code:

#content {	float: left;	width: 1200;	padding: 20px 50px 30px 60px;	font-family: Arial;	font-size: 12px;}  .top_table {	background-color: #DDDDFD;	font-family: Arial;	font-size: 12px;	font-weight: bold;	cursor:auto;}  .normal {	font-family: Arial;	font-size: 12px;	cursor:pointer;}	.highlight {	background-color: #DDDDFD;	font-family: Arial;	font-size: 12px;	cursor:pointer;}	.selected {	background-color: #DDDDFD;	font-family: Arial;	font-size: 12px;	cursor:auto;	border-top: solid;	border-right: solid;	border-left: solid;	border-color: #0065a5;}	.pulldown {	background-color: #DDDDFD;	font-family: Arial;	font-size: 12px;	cursor:auto;	border-right: solid;	border-bottom: solid;	border-left: solid;	border-color: #0065a5;}

The header has class "top_table".The rest of the table has some events to pick the right class:

<script type="text/javascript">function addHighlight(el) {	if (el.className.indexOf('highlight') == -1) {		el.className += ' highlight';	}}function removeHighlight(el) {	if (el.className.indexOf('hold') == -1) {		el.className = el.className.replace('highlight','');	}}function setSelected(el) {	if (el.className.indexOf('hold') == -1) {		el.className += ' hold';	} else {		el.className = el.className.replace('selected','');	}}</script><?phpecho '<tr onMouseOver="addHighlight(this);" onMouseOut="removeHighlight(this);" onclick="setSelected(this)">?>

dsonesuk · January 31, 2011

Its difficult to offer advise, without having the html to go with the css styling you have listed, have you set table border, cellspacing, cellpadding, to zero?It could be that you just need to set the td cells borders to same colour as the tr background when events 'onmouseover', 'onclick' etc changes the class name, because at the moment you seem to be targeting the tr only.example below

.highlight td { border-color:#DDDDFD;}

Muiter · January 31, 2011

Setting table border, cellspacing, cellpadding to zero did work.Now I'm still stuck with the missing border.

dsonesuk · January 31, 2011

if you set the border to zero, then all border should disappear, as the borders within your css styling have no border-width: set, at all.are your looking for something similar to this?

<!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>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function addHighlight(el) {	if (el.className.indexOf('highlight') == -1) {		el.className += ' highlight';	}}function removeHighlight(el) {	if (el.className.indexOf('hold') == -1) {		el.className = el.className.replace('highlight','');	}}function setSelected(el) {	if (el.className.indexOf('hold') == -1) {		el.className += ' hold';	} else {		el.className = el.className.replace('selected','');	}}/*--*//*]]>*/</script><style type="text/css">#content {	float: left;	width: 1200px;	padding: 20px 50px 30px 60px;	font-family: Arial;	font-size: 12px;}  .top_table {		font-family: Arial;	font-size: 12px;	font-weight: bold;	cursor:auto;	background-color:#F1F1F1;	border:1px solid #0065a5;}.top_table tr, .top_table td{border-width:0;}  .normal {	font-family: Arial;	font-size: 12px;	cursor:pointer;}	.highlight {	background-color: #DDDDFD;	font-family: Arial;	font-size: 12px;	cursor:pointer;}	.selected {	background-color: #DDDDFD;	font-family: Arial;	font-size: 12px;	cursor:auto;	border:1px solid #0065a5;	border-bottom-width:0;		}	.pulldown {	background-color: #DDDDFD;	font-family: Arial;	font-size: 12px;	cursor:auto;	border:1px solid #0065a5;	border-top-width:0;}</style></head><body><table width="800" class="top_table" cellspacing="0" cellpadding="0"> <tr onmouseOver="addHighlight(this);" onmouseOut="removeHighlight(this);" onclick="setSelected(this)" class="">	<td>0</td>	<td>0</td>	<td>0</td>	<td>0</td>  </tr> <tr onmouseOver="addHighlight(this);" onmouseOut="removeHighlight(this);" onclick="setSelected(this)" class="">	<td>1</td>	<td>1</td>	<td>1</td>	<td>1</td>  </tr> <tr onmouseOver="addHighlight(this);" onmouseOut="removeHighlight(this);" onclick="setSelected(this)" class="">	<td>2</td>	<td>2</td>	<td>2</td>	<td>2</td>  </tr> <tr onmouseOver="addHighlight(this);" onmouseOut="removeHighlight(this);" onclick="setSelected(this)" class="">	<td>3</td>	<td>3</td>	<td>3</td>	<td>3</td>  </tr></table>

dsonesuk · January 31, 2011

or maybe below(repeated styling removed), as i said without html code jusyt guessing here

<!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>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function addHighlight(el) {	if (el.className.indexOf('highlight') == -1) {		el.className += ' highlight';	}}function removeHighlight(el) {	if (el.className.indexOf('normal') == -1) {		el.className = el.className.replace('highlight','');	}}function setSelected(el) {	if (el.className.indexOf('selected') == -1) {		el.className += ' selected';	} else {		el.className = el.className.replace('selected','');	}}/*--*//*]]>*/</script><style type="text/css">#content {	float: left;	width: 1200px;	padding: 20px 50px 30px 60px;	font-family: Arial;	font-size: 12px;}  .top_table {		font-family: Arial;	font-size: 12px;	font-weight: bold;	cursor:auto;	background-color:#F1F1F1;	border:1px solid #0065a5;}.top_table tr, .top_table td{border-width:0;}.top_table tr{	cursor:pointer;	}  .normal {	  	background-color: #F1F1F1;}	.highlight {	background-color: #DDDDFD;}	.selected {	background-color: #DDDDFD;	}	.pulldown {	cursor:auto;}</style></head><body><table width="800" class="top_table" cellspacing="0" cellpadding="0"> <tr onmouseOver="addHighlight(this);" onmouseOut="removeHighlight(this);" onclick="setSelected(this)" class="">	<td>0</td>	<td>0</td>	<td>0</td>	<td>0</td>  </tr> <tr onmouseOver="addHighlight(this);" onmouseOut="removeHighlight(this);" onclick="setSelected(this)" class="">	<td>1</td>	<td>1</td>	<td>1</td>	<td>1</td>  </tr> <tr onmouseOver="addHighlight(this);" onmouseOut="removeHighlight(this);" onclick="setSelected(this)" class="">	<td>2</td>	<td>2</td>	<td>2</td>	<td>2</td>  </tr> <tr onmouseOver="addHighlight(this);" onmouseOut="removeHighlight(this);" onclick="setSelected(this)" class="">	<td>3</td>	<td>3</td>	<td>3</td>	<td>3</td>  </tr></table></body></html>

Muiter · January 31, 2011

This is what I have right now:

#content {	float: left;	width: 1200;	padding: 20px 50px 30px 60px;	font-family: Arial;	font-size: 12px;}  .top_table {	background-color: #DDDDFD;	font-family: Arial;	font-size: 12px;	font-weight: bold;	cursor: auto;	border-width: 0px;}  .normal {	font-family: Arial;	font-size: 12px;	cursor: pointer;	border-width: 0px;}	.highlight {	background-color: #DDDDFD;	font-family: Arial;	font-size: 12px;	cursor: pointer;	border-width: 3px;}	.selected {	background-color: #DDDDFD;	font-family: Arial;	font-size: 12px;	cursor:auto;	border-top: solid;	border-right: solid;	border-left: solid;	border-color: #0065a5;	border-width: 3px;}	.pulldown {	background-color: #DDDDFD;	font-family: Arial;	font-size: 12px;	cursor: auto;	border-right: solid;	border-bottom: solid;	border-left: solid;	border-color: #0065a5;	border-width: 3px;}

				// tabelkop				echo '<table id="header1" cellspacing="0" cellpadding="0" width="100%">					  <tr class="floating header top_table">						  <td width=200>'.$lang['klantnaam'].' <a href="'.$_SERVER['PHP_SELF'].'?sort_name=klantnaam&sort=asc" title="'.$lang['sorteer_asc'].'"><img src="images/icon/asc.png"></a> <a href="'.$_SERVER['PHP_SELF'].'?sort_name=klantnaam&sort=desc" title="'.$lang['sorteer_desc'].'"><img src="images/icon/desc.png"></a></td>						  <td width=200>'.$lang['adres'].' <a href="'.$_SERVER['PHP_SELF'].'?sort_name=adres&sort=asc" title="'.$lang['sorteer_asc'].'"><img src="images/icon/asc.png"></a> <a href="'.$_SERVER['PHP_SELF'].'?sort_name=adres&sort=desc" title="'.$lang['sorteer_desc'].'"><img src="images/icon/desc.png"></a></td>						  <td width=100>'.$lang['postcode'].' <a href="'.$_SERVER['PHP_SELF'].'?sort_name=postcode&sort=asc" title="'.$lang['sorteer_asc'].'"><img src="images/icon/asc.png"></a> <a href="'.$_SERVER['PHP_SELF'].'?sort_name=postcode&sort=desc" title="'.$lang['sorteer_desc'].'"><img src="images/icon/desc.png"></a></td>						  <td width=175>'.$lang['plaats'].' <a href="'.$_SERVER['PHP_SELF'].'?sort_name=plaats&sort=asc" title="'.$lang['sorteer_asc'].'"><img src="images/icon/asc.png"></a> <a href="'.$_SERVER['PHP_SELF'].'?sort_name=plaats&sort=desc" title="'.$lang['sorteer_desc'].'"><img src="images/icon/desc.png"></a></td>						  <td width=150>'.$lang['tel'].'</td>						  <td width=150>'.$lang['fax'].'</td>						  <td></td>						  <td></td>					  </tr>';									// inhoud				while ($row = mysql_fetch_array($res))				{					echo '<tr onMouseOver="addHighlight(this);" onMouseOut="removeHighlight(this);" onclick="setSelected(this),showDetails('.$row['id'].')"  class="normal">								<td class="dblclick" id="adressen|klantnaam|'.$row['id'].'" >'.htmlentities($row['klantnaam']).'</td>								<td>'.htmlentities($row['adres']).'</td>								<td>'.$row['postcode'].'</td>								<td>'.htmlentities($row['plaats']).' <img src="images/flags/'.$row['land_code'].'.gif" title="'.htmlentities($row['land']).'"></td>								<td>'.$row['tel'].'</td>								<td>'.$row['fax'].'</td>								<td>'; if(!empty($row['email'])) { echo '<a href="mailto:'.$row['email'].'" title="'.$lang['mail_verstuur'].'"><img src="images/icon/mail.png"></a>'; } echo '</td>								<td>'; if(!empty($row['www'])) { echo '<a href="'.$row['www'].'" title="'.$lang['website_bezoek'].'" target="_blank"><img src="images/icon/web.png"></a>'; } echo '</td>						  </tr>						  <tr>							  <td colspan="9"> <div id="details'.$row['id'].'"> </div> </td>						  </tr>';				}								// einde tabel				echo '</table>';

dsonesuk · February 1, 2011

if the code i provided, gives the effect (not including background color as it is wrong ) you require, then use css and javascript provided, and you should get the same result.

Muiter · February 1, 2011

I can change all colors and that will work on the page. When I add an border nothing happens.

dsonesuk · February 1, 2011

where do you require the border? round table? row of selected td cells top, left right bottom?

Muiter · February 4, 2011

An couple of nights sleeping over it helps! I have it all sorted out now. I never knew you can't add an border on tr No I have put my header in an table and another table in the while loop.There is one other problem with the alignment now because of the different tables:

				// tabelkop				echo '<table class="top_table" cellspacing="0" cellpadding="0" width="100%">					  <tr>						  <td width=10></td>						  <td width=300>'.$lang['klantnaam'].'</td>						  <td width=300>'.$lang['adres'].'</td>					  </tr>					  </table>';									// inhoud				while ($row = mysql_fetch_array($res))				{					echo '<table class="normal" cellspacing="0" cellpadding="0" width="100%">						  <tr>							  <td width=10></td>								<td width=300>'.htmlentities($row['klantnaam']).'</td>								<td width=300>'.htmlentities($row['adres']).'</td>						  </tr>						  <tr>							  <td colspan="9"> <div id="details'.$row['id'].'"> </div> </td>						  </tr>';				}								// einde tabel				echo '</table>';

dsonesuk · February 4, 2011

NOooooo! don't separate tables just for the header, you will have no end of problems, different widths of tables, and different widths of cells that won't line-up. I would combine to one table, which will fix these problems, and instead of targeting the table with class="top_table" target the row

				// tabelkop				echo '<table  class="normal" cellspacing="0" cellpadding="0" width="100%">					  <tr class="top_table">						  <td width=10></td>						  <td width=300>'.$lang['klantnaam'].'</td>						  <td width=300>'.$lang['adres'].'</td>					  </tr>';									// inhoud				while ($row = mysql_fetch_array($res))				{				   						  <tr>							  <td width=10></td>								<td width=300>'.htmlentities($row['klantnaam']).'</td>								<td width=300>'.htmlentities($row['adres']).'</td>						  </tr>						  <tr>							  <td colspan="9"> <div id="details'.$row['id'].'"> </div> </td>						  </tr>';				}								// einde tabel				echo '</table>';

then use

  .top_table td {	background-color: #DDDDFD;	font-family: Arial;	font-size: 12px;	font-weight: bold;	cursor: auto;	border-width: 0px;}

edit: i'm pretty sure you get away with just '.top_table' but depends on what you want to do border wise.

Muiter · February 4, 2011

If I use one table I have this result:

dsonesuk · February 4, 2011

that looks like its has a background image assigned to each cell? where is it picking up that from?

Muiter · February 5, 2011

  .top_table {	background-color: #DDDDFD;	font-family: Arial;	font-size: 12px;	font-weight: bold;	cursor: auto;	border-width: 0px;	/*--CSS3 Rounded Corners--*/	-webkit-border-radius: 7.5px;	-moz-border-radius: 7.5px;	border-radius: 7.5px;}

dsonesuk · February 5, 2011

Right! because this was used within a table the round corners would apply to the table width and height, now we want combine to the table, to avoid varying width in cells compared to header and tabular data cells, we will have to apply the round corner to the far left and right cells only.

.top_table td {	background-color: #DDDDFD;	font-family: Arial;	font-size: 12px;	font-weight: bold;	cursor: auto;	border-width: 0px;}td.top_table_start {		/*--CSS3 Rounded Corners--*/-webkit-border-top-left-radius: 7.5px;-webkit-border-bottom-left-radius: 7.5px;-moz-border-radius-topleft: 7.5px;-moz-border-radius-bottomleft: 7.5px;border-top-left-radius: 7.5px;border-bottom-left-radius: 7.5px;}td.top_table_end {		/*--CSS3 Rounded Corners--*/-webkit-border-top-right-radius: 7.5px;-webkit-border-bottom-right-radius: 7.5px;-moz-border-radius-topright: 7.5px;-moz-border-radius-bottomright: 7.5px;border-top-right-radius: 7.5px;border-bottom-right-radius: 7.5px;}

// tabelkop				echo '<table  class="normal" cellspacing="0" cellpadding="0" width="100%">					  <tr class="top_table">						  <td width=10 class="top_table_start"></td>						  <td width=300>'.$lang['klantnaam'].'</td>						  <td width=300 class="top_table_end">'.$lang['adres'].'</td>					  </tr>';									// inhoud

the first cell will have a left rounded border only, the right, a right rounded border only. and all cells will have the required background color for that row of cells only, so they blend together.

Muiter · February 5, 2011

That works fantastic What is with the td? You have put that in the css but it does work (in Chrome) without it.

dsonesuk · February 5, 2011

do you mean .top_table td ??.top_table on its own will target row and bg color will overlap round corners, whereas.top_table td will target the td belonging to row with .top_table class.The td.top_table_start will give the same effect as .top_table_start in this situation, the first will target any td element with class 'top_table_start' whereas .top_table_start on its own will target ALL elements with class 'top_table_start', so you can remove the td if you require.top_table td will work in most browsers, IE not included (because its Kack), .top_table won't

Muiter · February 6, 2011

Thank you for helping me out!

CSS border problem

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived