How to comply with all...css help needed

Dev Shed Forums Sponsor:

August 19th, 2003, 04:51 AM

belena

Junior Member

Join Date: Aug 2003

Location: London

Posts: 2

Time spent in forums: < 1 sec
Reputation Power: 0

How to comply with all...css help needed

Hi All,

I have a problem to solve.

I have a table whose rows can be either in edit or view mode. For that I need to toggle the visibility and the display of both of them. I had all of this working in MSIE 5.5...but I thought it would be a lot better if I could make it work in Opera. And I made it work...it took some code refining, adjusting firmly to w3 standards but...I end up with a solution that was working in Opera 7 but not working in IE 5.5. And from what I have seen in forums, the solotion for Opera 7 its not supported by MSIE...

This is a mockup of my code in Opera:
<table>
<tr style="visibility: visible; display: table-row">
<td> Some data</td>
</tr>
</table>

whereas in MSIE I would use display: inline...

I inmediately thought of browser sniffing...but that means keeping two sets of code for the javascript file ...and then I have to take care too of the embedded styles in the html pages. This puts me off a bit. I would also like to achieve the ideal of one code works for both...

I have been playing with the idea of not using a table and using divs instead of rows...but I would like to keep it in that way...
Has anyone got any idea of how can I do it keep the rows, and make it work both in Opera and MSIE? That would be very useful? Has anyone solved this problem before?

Thanks in advance for your help!

Belen

August 19th, 2003, 05:54 AM

jerom

Contributing User

Join Date: May 2003

Posts: 1,014

Time spent in forums: 1 Day 17 h 34 m 25 sec
Reputation Power: 9

How about this. It uses the behavior that IE will throw an error when trying to set the display property to 'table-row'. The script instead sets the property to 'inline' in case an error would have been reported... It works in IE5.5, Opera7 and Mozilla.

Code:

function showHideRow(id) {
	var myElem = document.getElementById(id)
	if (myElem.style.display == 'none') {
		try {
			myElem.style.display = 'table-row'
		}
		catch(e) {
			myElem.style.display = 'inline'
		}
	}
	else {
		myElem.style.display = 'none'
	}
}
</script>
</head>
<body>
<div onclick="showHideRow('mytablerow')">show/hide</div>
<table>
<tr id="mytablerow">
<td> Some data</td>
</tr>
</table>

Hope this helps,
Jeroen

August 19th, 2003, 09:49 AM

belena

Junior Member

Join Date: Aug 2003

Location: London

Posts: 2

Time spent in forums: < 1 sec
Reputation Power: 0

Thanks a lot for your help! I'll try right now.

August 19th, 2003, 12:12 PM

knew youzr

The New User

Join Date: Jul 2003

Location: CA, USA

Posts: 109

Time spent in forums: < 1 sec
Reputation Power: 6

Devshed just had an article on error catching but, correct me if i'm wrong, it only works with IE6 and NS6+. Thus it might not work on IE5.5, like you have. Hope that helps.

http://www.devshed.com/Client_Side/...tion/page1.html <-- link to the article

--Neil

August 19th, 2003, 05:07 PM