homepage Welcome to WebmasterWorld Guest from 67.202.56.112
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
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




msg:3500442
 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




msg:3500577
 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




msg:3500597
 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




msg:3500620
 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




msg:3502073
 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




msg:3502554
 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




msg:3502556
 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




msg:3520862
 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




msg:3521244
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved