Using CSS to get expandable cell

[Manil]

I usually have no problem with Firefox, but here is a rare instance of IE displaying a table with image slices correctly and Firefox adding space where I seemingly have none. Is there anything I can do to fix this? Reasons for the problem may be that I have a cell in the table that acts as an expandable cell so that one can adjust the window and it will widen to keep the header at 98% of the window. Also, there is a text box and a menu box inside cells.

Can this be redone, without tables, using CSS and still give me the functionality I want and not fracture under different browsers or window sizes?

This is the code I have-

<table border="0" cellpadding="0" cellspacing="0" width="99%" bgcolor="#00006 6" height="62" style="height: 62px;">
<!-- fwtable fwsrc="cpindex_ header.png" fwbase="cpindex _header.jpg" fwstyle="Dreamw eaver" fwdocid = "1727768851 " fwnested="0" -->
<tr>
<td width="179" style="backgrou nd-color: white;"><img src="images/spacer.gif" width="179" height="1" border="0" alt=""></td>
<td style="backgrou nd-color: white;"><img src="images/spacer.gif" width="9" height="1" border="0" alt=""></td>
<td style="backgrou nd-color: white;"><img src="images/spacer.gif" width="344" height="1" border="0" alt=""></td>
<td style="backgrou nd-color: white;"><img src="images/spacer.gif" width="59" height="1" border="0" alt=""></td>
<td width="109" style="backgrou nd-color: white;"><img src="images/spacer.gif" width="109" height="1" border="0" alt=""></td>
<td width="1" height="1" style="backgrou nd-color: white;"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
</tr>
<tr>
<td width="179" rowspan="2" height="54"><a href=""><img name="cpindex_h eader_r1_c1" src="images/cpindex_header_ r1_c1.jpg" width="179" height="54" border="0"></a></td>
<!--- THIS IS THE EXPANDABLE CELL --->
<td rowspan="3" height="60" style="backgrou nd-image: url(images/cpindex_header_ r1_c2.jpg); height: 60px; background-color: navajowhite;"></td>
<td width="403" colspan="2" height="27" style="height: 27px;"><img name="cpindex_h eader_r1_c3" src="images/cpindex_header_ r1_c3.jpg" width="403" height="27" border="0" usemap="#m_cpin dex_header_r1_c 3" alt="C&amp;P Index Home"></td>
<td rowspan="3" width="109" height="60" style="backgrou nd-image: url(images/cpindex_header_ r1_c4.jpg); font-family: Arial Narrow; height: 60px;">
<a href="" class="navbar1" >Advanced Search</a><br>
<!--- SECURITY CHECK --->
<CFIF IsDefined("cook ie.matrix_admin ")>
<!--- <A href="search_fo rm.cfm?search_s witch=adv_searc h" class="navbar1" >Custom Reports</A><br> --->

<!--- Check to see if the cookie has enough elements for the check --->
<CFIF #ListLen(cookie .matrix_admin, "_")# GT "2">
<!--- Check what sort of administrator it is. --->
<!--- there's a CFSWITCH here that's been redacted --->

<!--- Show the logout link --->
<a href="matrix_lo gout.cfm" class="navbar1" >Log Out</a><br>
<CFELSE>
<!--- If the cookie is too short (probably zero elements) assume the user has logged out. --->
<a href="matrix_lo gin.cfm" class="navbar1" >Log In</a><br>
</CFIF>
<CFELSE>
<a href="" class="navbar1" >About</a> <br>
</CFIF>
<!--- SECURITY CHECK --->
<CFIF cookie.v_hide NEQ "Y">
<!--- there's a bunch of CFIFs and CFLOOPS here that've been redacted --->
</CFIF>

</td>
<td height="27" style="height: 27px; background-color: white;"><img src="images/spacer.gif" width="1" height="27" border="0" alt=""></td>
</tr>

<tr>
<td width="344" rowspan="2" style="backgrou nd-image: url(images/cpindex_header_ r2_c3.jpg); text-align: right;">
<input name="docu_titl e" type="text" onfocus="value= ''" value="Name/Word" size="15" maxlength="30" style="margin-right: .3em;">
<select name="cat_list" style="margin-top: .3em; margin-right: .3em;">
<option value="" selected>All</option>
<option value="PROC">Pr ocess</option>
<option value="201">Com mand Media</option>
<option value="240">IDS Site Manual/Proc</option>
<option value="204">For ms/Checklists</option>
<option value="203">Tra ining Courses</option>
<option value="210">Bri efing</option>
<option value="208">Ref erence</option>
<option value="205">Tea m</option>
<option value="66">Team Member</option>
</select>
<input name="searchtyp e" type="hidden" value="title">
<input name="meth" type="hidden" value="res_by_t itle">

<input type="button"
name="Submit"
value="&gt;&gt; "
onclick="if(thi s.value == '&gt;&gt;') this.form.submi t(); this.value = '-X-';">
</td>

<td width="59" rowspan="2" height="33"><im g name="cpindex_h eader_r2_c4" src="images/cpindex_header_ r2_c5.jpg" width="59" height="33" border="0" alt=""></td>
<td height="27" style="height: 27px; background-color: white;"><img src="images/spacer.gif" width="1" height="27" border="0" alt=""></td>
</tr>

<tr>
<td height="6"><img name="cpindex_h eader_r3_c1" src="images/cpindex_header_ r3_c1.jpg" width="179" height="6" border="0" alt=""></td>
<td height="6" style="height: 6px; background-color: white;"><img src="images/spacer.gif" width="1" height="6" border="0" alt=""></td>
</tr>
</table>

[Stang02GT]

Please use code tags when posting code.

If you search around there have been a lot of questions dealing with IE7 and Firefox displaying things differently.

I gave another memeber the same advice i am going to give you. Google this issue, there are tons of information out there on this.


What you can do is attach an IE specific style sheet so that what you are doing displays correctly in IE

LINK


In the mean time i am preparing a tutorial on this subject, because of the amount of questions I see on this issue.