homepage Welcome to WebmasterWorld Guest from 54.161.185.244
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

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

5+ Year Member



 
Msg#: 3500440 posted 10:29 am on Nov 9, 2007 (gmt 0)


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

 

piatkow

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



 
Msg#: 3500440 posted 2:19 pm on Nov 9, 2007 (gmt 0)

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

5+ Year Member



 
Msg#: 3500440 posted 2:39 pm on Nov 9, 2007 (gmt 0)

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

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



 
Msg#: 3500440 posted 2:56 pm on Nov 9, 2007 (gmt 0)

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

10+ Year Member



 
Msg#: 3500440 posted 12:33 pm on Nov 11, 2007 (gmt 0)

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

5+ Year Member



 
Msg#: 3500440 posted 6:15 am on Nov 12, 2007 (gmt 0)

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

5+ Year Member



 
Msg#: 3500440 posted 6:26 am on Nov 12, 2007 (gmt 0)

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

mandi_v

5+ Year Member



 
Msg#: 3500440 posted 1:07 pm on Dec 5, 2007 (gmt 0)

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

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



 
Msg#: 3500440 posted 10:31 pm on Dec 5, 2007 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
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