By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
439,993 Members | 1,947 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 439,993 IT Pros & Developers. It's quick & easy.

Why does MSIE (but not Mozilla) expand my table beyond its width?

P: n/a
I have a table I hide show/hide through a pair of divs. The show/hide
part works fine in both Mozilla and MSIE. When switching between the
hide and show versions the Mozilla browser keeps them in small width,
about 740 pixels.

When switching between show/hide with MSIE the "show" table wants to
display about 960 pixels. If I set the outer table to '
style="table-layout: fixed;" ' then MSIE chooses to force the width to
960 pixels.

When I remove the ' width="XXX" ' clauses the table displays small, as
with Mozilla. Problem is, I want the columns to squish to the left as
much as possible.

So my question is two sided:
* Can I make MSIE behave with the "width" clauses, so it keeps actual
displayed width at 740?
* Can I make the columns squish to the left (minimize white space
between columns by forcing maximum white space to the right of all of
the columns) through some other means (stylesheet)?

Thanks very much,
Jerome.
What follows is a stripped-down example that does the bad tricks:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>
<SCRIPT language="javascript">
function minMaxData(min, max) {
document.getElementById(min).style.display = "none";
document.getElementById(max).style.display = "inline";
}

function maxData(max) {
document.getElementById(max).style.display = "inline";
}
</SCRIPT>
</HEAD>

<BODY>
<DIV align="center">
<FORM name="sampleOrderForm" method="post">

<DIV id="infoMin" style="DISPLAY: inline">
<TABLE borderColor="black" width="740" border="1">
<TBODY>
<TR>
<TD align="left" width="20%">&nbsp;</TD>
<TD align="middle" width="60%"><B>ATTACHMENT INFO</B></TD>
<TD align="right" width="20%" nowrap>
click to add attachments -&gt;&nbsp;&nbsp;
<A href="javascript:minMaxData('infoMin',
'infoMax');">[max]</A>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>

<DIV id="infoMax" style="DISPLAY: none">
<TABLE borderColor="black" width="740" border="1">
<TBODY>
<TR>
<TD>

<TABLE width="100%" border="1" bordercolor="black">
<TBODY>
<TR>
<TD align="left" width="20%">&nbsp;</TD>
<TD align="center" width="60%">
<B>ATTACHMENT INFO</B>
</TD>
<TD align="right" width="20%">
<A href="javascript:minMaxData('infoMax',
'infoMin');">[min]</A>
</TD>
</TR>
</TBODY>
</TABLE>

<TABLE width="100%" border="2" bgcolor="#00FF00">
<TBODY>
<TR>
<TD width="2%" bgcolor="#FFFF00">&nbsp;</TD>
<TD width="10%" bgcolor="#FF00FF">&nbsp;Name</TD>
<TD width="10%" bgcolor="#00FFFF">&nbsp;Uploaded</TD>
<TD width="10%" bgcolor="#FFCC22">&nbsp;Expired</TD>
<TD width="68%" bgcolor="#CCCCDD">&nbsp;</TD>
</TR>
<TR>
<TD>4) </TD>
<TD><INPUT size="50" name="attachment4"> </TD>
<TD><INPUT size="10" name="uploadDate4"> </TD>
<TD><INPUT size="10" name="expireDate4"> </TD>
<TD><FONT color="red"><B>&nbsp;</B></FONT> </TD>
</TR>
<TR>
<TD width="2%">&nbsp;</TD>
<TD width="98%" colSpan="4">
<INPUT size="98" name="source4">
</TD>
</TR>
</TBODY>
</TABLE>

</TD>
</TR>
</TBODY>
</TABLE>
</DIV>

</FORM>
</DIV>
</BODY>

</HTML>

Jul 24 '05 #1
Share this question for a faster answer!
Share on Google+

This discussion thread is closed

Replies have been disabled for this discussion.