 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
Mikustykus
Joined: 03 Oct 2007
Posts: 6
|
 Posted: Thu Nov 08, 2007 2:30 am table 'resizes' |
 |
|
|
Hi,
Ok, technically, the table doesn't resize - it is actually replaced with another table by some simple javascript I've tried my hand at. The thing is, in IE it keeps its size nicely to achieve the effect I'm after, but in Mozilla the tables you get when clicking on the areas 'shrink'. I just can't see why!?? They are pretty much the same tables after all. Any suggestions?
This code will show you what I mean...
(I imagine there's a better way of achieving this effect but still...)
<div class="baesstandard">
<script type="text/javascript">
<!--
function setDisplay(objectID,state) { var object = document.getElementById (objectID); object.style.display = state; }
//-->
</script>
<table cellpadding="4" id="llsmhead" class="baescontacts" width="100%">
<tbody>
<tr>
<th width="25%" bgcolor="#cba2c7">
<a href="javascript:void('')" onClick="setDisplay('llsm1','block'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','none'),
setDisplay('llsm4','none');" class="stafflist">North of the City</a>
</th>
<th width="25%" bgcolor="#a9dcf2">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','block'),
setDisplay('llsm3','none'),
setDisplay('llsm4','none');" class="stafflist">South of the City</a>
</th>
<th width="25%" bgcolor="#fccd82">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','block'),
setDisplay('llsm4','none');" class="stafflist">East of the City</a>
</th>
<th width="25%" bgcolor="#EA8B9B">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','none'),
setDisplay('llsm4','block');" class="stafflist">Brasshouse</a>
</th>
</tr></tbody></table>
<table cellpadding="4" id="llsm1" class="baescontacts" width="100%" style="display:none;">
<tbody>
<tr>
<th width="25%" bgcolor="#cba2c7">
<a href="javascript:void('')" onClick="setDisplay('llsm1','block'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','none'),
setDisplay('llsm4','none');" class="stafflist">North of the City</a>
</th>
<th width="25%" bgcolor="#a9dcf2">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','block'),
setDisplay('llsm3','none'),
setDisplay('llsm4','none');" class="stafflist">South of the City</a>
</th>
<th width="25%" bgcolor="#fccd82">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','block'),
setDisplay('llsm4','none');" class="stafflist">East of the City</a>
</th>
<th width="25%" bgcolor="#EA8B9B">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','none'),
setDisplay('llsm4','block');" class="stafflist">Brasshouse</a>
</th>
</tr>
<tr>
<td bgcolor="#cba2c7">
<p align="left"><font size="2"><strong>info</strong></font></p>
</td>
<td bgcolor="#cba2c7">
<p align="right"><font size="2"><strong>info </strong></font></p>
</td>
<td bgcolor="#cba2c7" align="right" colspan="2">
<p><font size="2" color="#000000"><strong>info<br />
</strong></font></p>
</td>
</tr>
<tr>
<td bgcolor="#cba2c7">
<p align="left"><font size="2"><strong>info<br />
</strong></font></p>
</td>
<td bgcolor="#cba2c7">
<p align="right"><font size="2"><strong>info<br />
</strong></font></p>
</td>
<td bgcolor="#cba2c7" align="right" colspan="2">
<p><font size="2" color="#000000"><strong>info</strong></font></p>
</td>
</tr>
<tr>
<td bgcolor="#cba2c7">
<p align="left"><font size="2"><strong>info<br />
</strong></font></p>
</td>
<td bgcolor="#cba2c7">
<p align="right"><font size="2"><strong>info<br />
</strong></font></p>
</td>
<td bgcolor="#cba2c7" align="right" colspan="2">
<p><font size="2" color="#000000"><strong>info</strong></font></p>
</td>
</tr>
</tbody>
</table>
<table cellpadding="4" id="llsm2" class="baescontacts" style="display:none;" width="100%">
<tbody>
<tr>
<th width="25%" bgcolor="#cba2c7">
<a href="javascript:void('')" onClick="setDisplay('llsm1','block'),
setDisplay('llsm2','none'),
setDisplay('llsm3','none'),
setDisplay('llsm4','none');" class="stafflist">North of the City</a>
</th>
<th width="25%" bgcolor="#a9dcf2">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsm2','block'),
setDisplay('llsm3','none'),
setDisplay('llsm4','none');" class="stafflist">South of the City</a>
</th>
<th width="25%" bgcolor="#fccd82">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','block'),
setDisplay('llsm4','none');" class="stafflist">East of the City</a>
</th>
<th width="25%" bgcolor="#EA8B9B">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','none'),
setDisplay('llsm4','block');" class="stafflist">Brasshouse</a>
</th>
</tr>
<tr>
<td bgcolor="#a9dcf2"">
<p align="left"><font size="2"><strong>info<br />
</strong></font></p>
</td>
<td bgcolor="#a9dcf2">
<p align="right"><font size="2"><strong>info<br />
</strong></font></p>
</td>
<td bgcolor="#a9dcf2" align="right" colspan="2">
<p><font size="2" color="#000000"><strong>info<br />
</strong></font></p>
</td>
</tr>
<tr>
<td bgcolor="#a9dcf2">
<p align="left"><font size="2"><strong>info<br />
</strong></font></p>
</td>
<td bgcolor="#a9dcf2">
<p align="right"><font size="2"><strong>info<br />
</strong></font></p>
</td>
<td bgcolor="#a9dcf2" align="right" colspan="2">
<p><font size="2" color="#000000"><strong>info</strong></font></p>
</td>
</tr>
</tbody>
</table>
<table cellpadding="4" id="llsm3" class="baescontacts" style="display:none;" width="100%">
<tbody>
<tr>
<th width="25%" bgcolor="#cba2c7">
<a href="javascript:void('')" onClick="setDisplay('llsm1','block'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','none'),
setDisplay('llsm4','none');" class="stafflist">North of the City</a>
</th>
<th width="25%" bgcolor="#a9dcf2">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','block'),
setDisplay('llsm3','none'),
setDisplay('llsm4','none');" class="stafflist">South of the City</a>
</th>
<th width="25%" bgcolor="#fccd82">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','block'),
setDisplay('llsm4','none');" class="stafflist">East of the City</a>
</th>
<th width="25%" bgcolor="#EA8B9B">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','none'),
setDisplay('llsm4','block');" class="stafflist">Brasshouse</a>
</th>
</tr>
<tr>
<td bgcolor="#fccd82">
<p align="left"><font size="2"><strong>info<br />
</strong></font></p>
</td>
<td bgcolor="#fccd82">
<p align="right"><font size="2"><strong>info<br />
</strong></font></p>
</td>
<td bgcolor="#fccd82" align="right" colspan="2">
<p><font size="2" color="#000000"><strong>info<br />
</strong></font></p>
</td>
</tr>
<tr>
<td bgcolor="#fccd82">
<p align="left"><font size="2"><strong>info<br />
</strong></font></p>
</td>
<td bgcolor="#fccd82">
<p align="right"><font size="2"><strong>info<br />
</strong></font></p>
</td>
<td bgcolor="#fccd82" align="right" colspan="2">
<p><font size="2" color="#000000"><strong>info</strong></font></p>
</td>
</tr>
</tbody>
</table>
<table cellpadding="4" id="llsm4" class="baescontacts" style="display:none;" width="100%">
<tbody>
<tr>
<th width="25%" bgcolor="#cba2c7">
<a href="javascript:void('')" onClick="setDisplay('llsm1','block'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','none'),
setDisplay('llsm4','none');" class="stafflist">North of the City</a>
</th>
<th width="25%" bgcolor="#a9dcf2">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','block'),
setDisplay('llsm3','none'),
setDisplay('llsm4','none');" class="stafflist">South of the City</a>
</th>
<th width="25%" bgcolor="#fccd82">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','block'),
setDisplay('llsm4','none');" class="stafflist">East of the City</a>
</th>
<th width="25%" bgcolor="#EA8B9B">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','none'),
setDisplay('llsm4','block');" class="stafflist">Brasshouse</a>
</th>
</tr>
<tr>
<td bgcolor="#EA8B9B">
<p align="left"><font size="2"><strong><br />
</strong></font></p>
</td>
<td bgcolor="#EA8B9B">
<p align="right"><font size="2"><strong>info<br />
</strong></font></p>
</td>
<td bgcolor="#EA8B9B" align="right" colspan="2">
<p><font size="2" color="#000000"><strong><br />
</strong></font></p>
</td>
</tr>
</tbody>
</table>
Many thanks!
Mikey |
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 771
Location: Biloxi, MS
|
| Posted: Fri Nov 23, 2007 4:40 pm |
|
|
|
You have many errors in your code. Possibly correct these and it should work ok in FF. Use FF to get your pages and code working. It meets most of the latest CSS2 standards. IE really doesn't care a whit and is very lenient. Even though it may look like it works, it will not in other browsers.
I would CSS to style the tables. Use inline styling if you must. Better than nothing.
Code Errors
Ron |
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 771
Location: Biloxi, MS
|
| Posted: Fri Nov 23, 2007 8:00 pm |
|
|
|
OK. This works in FF and IE for me:
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="generator" content="Matrix Y2K from van IJperen Software Inc. - http://www.crystalfibers.com">
<script type="text/javascript">
<!--
function setDisplay(objectID,state) { var object = document.getElementById (objectID); object.style.display = state; }
//-->
</script>
<style type="text/css">
body { font-size: 12pt; }
.table1 { width: 800px; padding: 4px;}
.table2, .table3, .table4, .table5 { width: 800px; padding: 4px; display:none; }
td.rgt { text-align: right; }
th { width: 800px; line-height: 25px;}
</style>
</head>
<body>
<table class="baescontacts table1" id="llsmhead" summary="">
<tbody>
<tr>
<th style="background-color: #cba2c7;">
<a href="javascript:void('')" onClick="setDisplay('llsm1','block'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','none'),
setDisplay('llsm4','none');" class="stafflist">North of the City</a>
</th>
<th style="background-color: #a9dcf2;">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','block'),
setDisplay('llsm3','none'),
setDisplay('llsm4','none');" class="stafflist">South of the City</a>
</th>
<th style="background-color: #fccd82;">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','block'),
setDisplay('llsm4','none');" class="stafflist">East of the City</a>
</th>
<th style="background-color: #ea8b9b;">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','none'),
setDisplay('llsm4','block');" class="stafflist">Brasshouse</a>
</th>
</tr>
</tbody>
</table>
<table class="table2 baescontacts" id="llsm1" summary="">
<tbody>
<tr>
<th style="background-color: #cba2c7;">
<a href="javascript:void('')" onClick="setDisplay('llsm1','block'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','none'),
setDisplay('llsm4','none');" class="stafflist">North of the City</a>
</th>
<th style="background-color: #a9dcf2;">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','block'),
setDisplay('llsm3','none'),
setDisplay('llsm4','none');" class="stafflist">South of the City</a>
</th>
<th style="background-color: #fccd82;">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','block'),
setDisplay('llsm4','none');" class="stafflist">East of the City</a>
</th>
<th style="background-color: #ea8b9b;">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','none'),
setDisplay('llsm4','block');" class="stafflist">Brasshouse</a>
</th>
</tr>
<tr>
<td style="background-color: #cba2c7;">
<strong>info</strong><!-- North of the City 1st Row, 1st Column -->
</td>
<td class="rgt" style="background-color: #cba2c7;">
<strong>info</strong><!-- North of the City 2nd Row, 1st Column -->
</td>
<td class="rgt" style="background-color: #cba2c7;" colspan="2">
<strong>info</strong><!-- North of the City 3rd Row, 1st Column -->
</td>
</tr>
<tr>
<td style="background-color: #cba2c7;">
<strong>info</strong>
</td>
<td class="rgt" style="background-color: #cba2c7;">
<strong>info</strong>
</td>
<td class="rgt" style="background-color: #cba2c7;" colspan="2">
<strong>info</strong>
</td>
</tr>
<tr>
<td style="background-color: #cba2c7;">
<strong>info</strong>
</td>
<td class="rgt" style="background-color: #cba2c7;">
<strong>info</strong>
</td>
<td class="rgt" style="background-color: #cba2c7;" colspan="2">
<strong>info</strong>
</td>
</tr>
</tbody>
</table>
<table class="table3 baescontacts" id="llsm2" summary="">
<tbody>
<tr>
<th style="background-color: #cba2c7;">
<a href="javascript:void('')" onClick="setDisplay('llsm1','block'),
setDisplay('llsm2','none'),
setDisplay('llsm3','none'),
setDisplay('llsm4','none');" class="stafflist">North of the City</a>
</th>
<th style="background-color: #a9dcf2;">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsm2','block'),
setDisplay('llsm3','none'),
setDisplay('llsm4','none');" class="stafflist">South of the City</a>
</th>
<th style="background-color: #fccd82;">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','block'),
setDisplay('llsm4','none');" class="stafflist">East of the City</a>
</th>
<th style="background-color: #ea8b9b;">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','none'),
setDisplay('llsm4','block');" class="stafflist">Brasshouse</a>
</th>
</tr>
<tr>
<td style="background-color: #a9dcf2;">
<strong>info</strong>
</td>
<td class="rgt" style="background-color: #a9dcf2;">
<strong>info</strong>
</td>
<td style="background-color: #a9dcf2;" align="right" colspan="2">
<strong>info</strong>
</td>
</tr>
<tr>
<td style="background-color: #a9dcf2;">
<strong>info</strong>
</td>
<td class="rgt" style="background-color: #a9dcf2;">
<strong>info</strong>
</td>
<td style="background-color: #a9dcf2;" align="right" colspan="2">
<strong>info</strong>
</td>
</tr>
</tbody>
</table>
<table class="table4 baescontacts" id="llsm3" summary="">
<tbody>
<tr>
<th style="background-color: #cba2c7;">
<a href="javascript:void('')" onClick="setDisplay('llsm1','block'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','none'),
setDisplay('llsm4','none');" class="stafflist">North of the City</a>
</th>
<th style="background-color: #a9dcf2;">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','block'),
setDisplay('llsm3','none'),
setDisplay('llsm4','none');" class="stafflist">South of the City</a>
</th>
<th style="background-color: #fccd82;">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','block'),
setDisplay('llsm4','none');" class="stafflist">East of the City</a>
</th>
<th style="background-color: #ea8b9b;">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','none'),
setDisplay('llsm4','block');" class="stafflist">Brasshouse</a>
</th>
</tr>
<tr>
<td style="background-color: #fccd82;">
<strong>info</strong>
</td>
<td class="rgt" style="background-color: #fccd82;">
<strong>info</strong>
</td>
<td class="rgt" style="background-color: #fccd82" colspan="2">
<strong>info</strong>
</td>
</tr>
<tr>
<td style="background-color: #fccd82;">
<strong>info</strong>
</td>
<td class="rgt" style="background-color: #fccd82;">
<strong>info</strong>
</td>
<td style="background-color: #fccd82;" align="right" colspan="2">
<strong>info</strong>
</td>
</tr>
</tbody>
</table>
<table class="table5 baescontacts" id="llsm4" summary="">
<tbody>
<tr>
<th style="background-color: #cba2c7">
<a href="javascript:void('')" onClick="setDisplay('llsm1','block'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','none'),
setDisplay('llsm4','none');" class="stafflist">North of the City</a>
</th>
<th style="background-color: #a9dcf2">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','block'),
setDisplay('llsm3','none'),
setDisplay('llsm4','none');" class="stafflist">South of the City</a>
</th>
<th style="background-color: #fccd82">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','block'),
setDisplay('llsm4','none');" class="stafflist">East of the City</a>
</th>
<th style="background-color: #ea8b9b;">
<a href="javascript:void('')" onClick="setDisplay('llsm1','none'),
setDisplay('llsmhead','none'),
setDisplay('llsm2','none'),
setDisplay('llsm3','none'),
setDisplay('llsm4','block');" class="stafflist">Brasshouse</a>
</th>
</tr>
<tr>
<td style="background-color: #ea8b9b;">
<strong>No text was here</strong>
</td>
<td class="rgt" style="background-color: #ea8b9b;">
<strong>info</strong>
</td>
<td class="rgt" style="background-color: #ea8b9b;" colspan="2">
<strong>No text was here</strong>
</td>
</tr>
</tbody>
</table>
</body></html> |
Ron |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
