Welcome to WebmasterWorld Guest from 50.16.24.12

Forum Moderators: incrediBILL

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

ie

   
10:29 am on Nov 9, 2007 (gmt 0)

5+ Year Member




<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 &nbsp; space it shows the border in IE, but obviously there is a space that i don't want.

Any Help would be very appreciated!
:)

2:19 pm on Nov 9, 2007 (gmt 0)

WebmasterWorld Senior Member piatkow is a WebmasterWorld Top Contributor of All Time 5+ Year Member



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.
2:39 pm on Nov 9, 2007 (gmt 0)

5+ Year Member



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?

2:56 pm on Nov 9, 2007 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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?!

12:33 pm on Nov 11, 2007 (gmt 0)

10+ Year Member



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...........

6:15 am on Nov 12, 2007 (gmt 0)

5+ Year Member



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!

:)

6:26 am on Nov 12, 2007 (gmt 0)

5+ Year Member



I have just noticed, that in IE its 1 1px line, but in Firefox it looks a bit thicker.
1:07 pm on Dec 5, 2007 (gmt 0)

5+ Year Member



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
:)

10:31 pm on Dec 5, 2007 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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]>
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month