Image border issue & hiding table columns outside of IE

BenBox

07-31-2006, 01:15 PM

Hey all,

I've got 2 little issues which I'm not sure how to go about.. both being because I'm not familiar with making things compatible outside of IE. The examples I've got below work in IE, but how can I adapt them to work in other browsers, such as FireFox and the like?

This first one is actually CSS.. it works perfectly in IE, and means I don't have to put border="0" on every image.. but doesn't transfer outside of IE..

image {
border: 0 none;
}

This second problem is to do with showing/hiding a navigation table, again.. works in IE but messes up in FireFox.. how can I change this to work universally?

Edit: This does actually work, but there's an issue with the column width remaining the same.. just hiding or showing its contents, is there a way around this?

var browserType;

if (document.layers) {browserType = "nn4"}
if (document.all) {browserType = "ie"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {browserType= "gecko"}

///////////////////////////////

function toggle_nav(do_show) {

var tbl;

if (browserType == "gecko" )
tbl = document.getElementById('mainTable');
else (browserType == "ie")
tbl = document.all['mainTable'];

// var tbl = document.getElementById('mainTable');
var rows = tbl.getElementsByTagName('tr');

if( do_show == true ) {
var cels = rows[0].getElementsByTagName('td');
cels[0].style.display='none';
cels[1].style.display='block';
}
else {
var cels = rows[0].getElementsByTagName('td');
cels[0].style.display='block';
cels[1].style.display='none';
}

}

Many thanks for any help! :D

vwphillips

07-31-2006, 01:48 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<style type="text/css">

</style>

<script language="JavaScript" type="text/javascript">

</script>
</head>

<body>
<a href="#" ><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif"></a>
<table id="mainTable" border="1">
<tr>
<td >123</td>
<td>1234</td>
</tr>
</table>
<input type="button" name="" value="Test" onclick="toggle_nav()">
<input type="button" name="" value="Test" onclick="toggle_nav(true)">
</body>

</html>

BenBox

07-31-2006, 02:00 PM

Ah ha! Awesome :D

Thank you! :thumbsup:

BenBox

07-31-2006, 02:05 PM

Actually, another quick question..

At the moment I have in the body tag onLoad="toggle_nav(true)" but what I ideally want it to do is remember the toggle status for each page viewed (possibly just for the duration of the session).

How can I go about putting cookies into this for that?

vwphillips

07-31-2006, 02:19 PM

have you any experience of cookies?

if not, google for tutorial first

then each page will have a cookie name

set the cookie value with true or false in 'toggle_nav(do_show)'

then <BODY>/window window call toggle_nav(do_show) with the cookie value as the parameter