468,554 Members | 1,958 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,554 developers. It's quick & easy.

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

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
0 2837

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Jukka K. Korpela | last post: by
reply views Thread by Alex Bell | last post: by
1 post views Thread by Marek Mänd | last post: by
7 posts views Thread by Warren Post | last post: by
4 posts views Thread by Schraalhans Keukenmeester | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.