471,601 Members | 1,210 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,601 software developers and data experts.

Using CSS to get expandable cell

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="#000066" height="62" style="height: 62px;">
<!-- fwtable fwsrc="cpindex_header.png" fwbase="cpindex_header.jpg" fwstyle="Dreamweaver" fwdocid = "1727768851" fwnested="0" -->
<td width="179" style="background-color: white;"><img src="images/spacer.gif" width="179" height="1" border="0" alt=""></td>
<td style="background-color: white;"><img src="images/spacer.gif" width="9" height="1" border="0" alt=""></td>
<td style="background-color: white;"><img src="images/spacer.gif" width="344" height="1" border="0" alt=""></td>
<td style="background-color: white;"><img src="images/spacer.gif" width="59" height="1" border="0" alt=""></td>
<td width="109" style="background-color: white;"><img src="images/spacer.gif" width="109" height="1" border="0" alt=""></td>
<td width="1" height="1" style="background-color: white;"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
<td width="179" rowspan="2" height="54"><a href=""><img name="cpindex_header_r1_c1" src="images/cpindex_header_r1_c1.jpg" width="179" height="54" border="0"></a></td>
<td rowspan="3" height="60" style="background-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_header_r1_c3" src="images/cpindex_header_r1_c3.jpg" width="403" height="27" border="0" usemap="#m_cpindex_header_r1_c3" alt="C&amp;P Index Home"></td>
<td rowspan="3" width="109" height="60" style="background-image: url(images/cpindex_header_r1_c4.jpg); font-family: Arial Narrow; height: 60px;">
<a href="" class="navbar1">Advanced Search</a><br>
<CFIF IsDefined("cookie.matrix_admin")>
<!--- <A href="search_form.cfm?search_switch=adv_search" 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_logout.cfm" class="navbar1">Log Out</a><br>
<!--- If the cookie is too short (probably zero elements) assume the user has logged out. --->
<a href="matrix_login.cfm" class="navbar1">Log In</a><br>
<a href="" class="navbar1">About</a> <br>
<CFIF cookie.v_hide NEQ "Y">
<!--- there's a bunch of CFIFs and CFLOOPS here that've been redacted --->

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

<td width="344" rowspan="2" style="background-image: url(images/cpindex_header_r2_c3.jpg); text-align: right;">
<input name="docu_title" 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">Process</option>
<option value="201">Command Media</option>
<option value="240">IDS Site Manual/Proc</option>
<option value="204">Forms/Checklists</option>
<option value="203">Training Courses</option>
<option value="210">Briefing</option>
<option value="208">Reference</option>
<option value="205">Team</option>
<option value="66">Team Member</option>
<input name="searchtype" type="hidden" value="title">
<input name="meth" type="hidden" value="res_by_title">

<input type="button"
onclick="if(this.value == '&gt;&gt;') this.form.submit(); this.value = '-X-';">

<td width="59" rowspan="2" height="33"><img name="cpindex_header_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>

<td height="6"><img name="cpindex_header_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>
May 28 '08 #1
1 3546
1,208 Expert 1GB
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


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

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by Doug | last post: by
1 post views Thread by axlq | last post: by
reply views Thread by chris | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by CCCYYYY | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.