IE not showing border on td when empty but all non IE browsers do

ie

[mandi_v]

<tr>
 <td colspan="6" style="height: 1px; border-bottom: 1px solid black"> </td>
</tr>

Hi all

I have tried this in Opera, Safari, Firefox.
And it shows the border in all the browsers except IE.

If i put in a   space it shows the border in IE, but obviously there is a space that i don't want.

Any Help would be very appreciated!
:)

[piatkow]

I came across that on my first web site back in the 20th century. Putting the space in has become so automatic that it never occurred to me that it might be specific to IE.

[mandi_v]

I think it is. I tested it in Maxthon2 as well.
And the same result...
I really need to do it with out the space.

Any Suggestions?

[penders]

Hhhmmmm unfortunately I think this is just the way IE (5.5, 6 and 7) works!?

There is a CSS property

empty-cells

that can take the values

hide

or

show

. All non-IE browsers default to

show

, but IE doesn't even support this property, it simply defaults to

hide

!

Does the DOCTYPE effect this behaviour? Is a workaround possible, without actually supplying content?!

[Rhys]

How about this instead......

<tr>
<td colspan="6" style="height: 1px; background-color: #000;"> </td>
</tr>

Shows a 1px black line in the right place...........

[mandi_v]

The doc type didn't make any difference, weird. :) Ahh well.

<tr>
<td colspan="6" style="height: 1px; background-color: #000;"> </td>
</tr>

I didn't think about trying that. It serves my purpose.
Thanks!

:)

[mandi_v]

I have just noticed, that in IE its 1 1px line, but in Firefox it looks a bit thicker.

[mandi_v]

I am just posting this if some one ever does have the same issue..

So here it goes.
I decided on doing both, because the one works in firefox, and the other in IE.

First you gotta detect the browser.

function browser_detection( $which_test )
{
$browser = '';
$dom_browser = '';

http_user_agent is set
$navigator_user_agent = ( isset( $_SERVER['HTTP_USER_AGENT'] ) )? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : '';

if (stristr($navigator_user_agent, "opera"))
{
$browser = 'opera';
$dom_browser = true;
}

elseif (stristr($navigator_user_agent, "msie 4"))
{
$browser = 'msie4';
$dom_browser = false;
}

elseif (stristr($navigator_user_agent, "msie"))
{
$browser = 'msie';
$dom_browser = true;
}

elseif ((stristr($navigator_user_agent, "konqueror")) ¦¦ (stristr($navigator_user_agent, "safari")))
{
$browser = 'safari';
$dom_browser = true;
}

elseif (stristr($navigator_user_agent, "gecko"))
{
$browser = 'mozilla';
$dom_browser = true;
}

elseif (stristr($navigator_user_agent, "mozilla/4"))
{
$browser = 'ns4';
$dom_browser = false;
}

else
{
$dom_browser = false;
$browser = false;
}

if ( $which_test == 'browser' )
{
return $browser;
}
elseif ( $which_test == 'dom' )
{
return $dom_browser;
}
}

--- You call the function.

$user_browser = browser_detection('browser');
if($user_browser == 'msie')
{
?>
<tr>
<td colspan="6" style="height: 1px; background-color: #000;"> </td>
</tr>
<?
}
else
{
?>
<tr>
<td colspan="6" style="height: 1px; border-bottom: 1px solid black; background-color:<? echo $color;?>;"> </td>
</tr>
<?
}

Then use the if statement, to decide which one to use.

Cheers
:)

[penders]

Browser detection scripts are unfortunately rather outdated in todays web as they are not very reliable/future proof. The User Agent string returned by the browser can easily be faked. Opera for instance gives the user the ability to change the User Agent via a menu option, to imitate other browsers - steming from people using browser detection scripts in the first place.

The only detection that you should do is detecting the support of technologies in the browser... does the browser support the W3C DOM methods? Does the browser support AJAX? etc... JavaScript allows for this and is reliable.

I think a better way to implement your method above, of styling an element one way for IE and another for all other browsers, is to use an HTML "conditional comment [webmasterworld.com]" (no JavaScript reqd). Conditional comments are only supported by IE5+ (Win only), in other browsers they are simply ignored (since they are an HTML comment). This is the recommended and future proof way of delivering content/style to IE only.

Your HTML then simply becomes:

<tr> 
<td colspan="6" class="mycell"> </td> 
</tr>

Then your CSS (in this case defined in the HEAD section, but preferably in external CSS files):

<style type="text/css"> 
/* Styles for ALL browsers */ 
.mycell { 
height: 1px; 
border-bottom: 1px solid black; 
background-color:<?php echo $color;?>; 
} 
</style> 
<!--[if IE]> 
 <script type="type/css"> 
 /* Styles for IE only, overriding any styles defined above */ 
 .mycell { 
 border-bottom: 0; 
 background-color: #000; 
 } 
 </script> 
<![endif]-->

This particular 'conditional comment' targets all versions of IE. In practise you usually only want to target particular versions.

eg. If less than or equal to IE7

<!--[if lte IE 7]>