JavascriptBeginner
asked on
A simple question about table width
<!-- I created a table which has three columns. I want the first column and last column to be static(which does not change its width), and the middle one when the browser gets resized, I want the overflow to be hidden. I added a style for overflow:hidden, but it still shows up...I don't want to give fixed width(because it has dynamic content).Please help to fix this.-->
<body onLoad="innertext();">
<table class="FavBar" width="100%" id="FavBar" onContextMenu="FavBarConte
<tr>
<td id="FavbarLeftEndcap" style="font-family:Tahoma;
<a onClick="GetList();" style="cursor:hand;" onMouseOver="this.style.te
<nobr>
<img src="images/icon_grey_fold
<span id="scrname" l10n="_text">Loading...</s
</nobr>
</a>
</td>
<td id="IEFavorites" align="left" style="position:relative; padding-right:25px" >
<span id="FavoritesArea" style="overflow:hidden;cur
<div id="FavOverflow" align="right" style="display:none;width:
<img src="images/overflow_arrow
</div>
</td>
</tr>
</table>
</body>
<body onLoad="innertext();">
<table class="FavBar" width="100%" id="FavBar" onContextMenu="FavBarConte
<tr>
<td id="FavbarLeftEndcap" style="font-family:Tahoma;
<a onClick="GetList();" style="cursor:hand;" onMouseOver="this.style.te
<nobr>
<img src="images/icon_grey_fold
<span id="scrname" l10n="_text">Loading...</s
</nobr>
</a>
</td>
<td id="IEFavorites" align="left" style="position:relative; padding-right:25px" >
<span id="FavoritesArea" style="overflow:hidden;cur
<div id="FavOverflow" align="right" style="display:none;width:
<img src="images/overflow_arrow
</div>
</td>
</tr>
</table>
</body>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thats not a mistake...l10n is a internationalization tag. With that tag and a script we can change the text to any language dynamically.
ASKER
I cannot give fixed width, because the content of the span is going to be dynamic by javascript.Is there any other solution?
What does dynamic content have to do with the width? You want overflow when content is wider than the container. If you are going to set the width based on content then there is no overflow.
You can't have it both ways. Either it is fixed width with overflow, or it is dynamic width and there is no overflow. You can flip back and forth between presentation formats but at any given point in time it must be one or the other it cannot be both.
Cd&
You can't have it both ways. Either it is fixed width with overflow, or it is dynamic width and there is no overflow. You can flip back and forth between presentation formats but at any given point in time it must be one or the other it cannot be both.
Cd&
ASKER
I never asked for fixed width. I do not want to give fixed width when the content is less...because it occupies unwanted space. I want it to overflow only when the content is more.
I guess there is some kind of communication problem. <B><U><BLINK> Without fixed width there is no overflow.</BLINK></U></B>
You either generate the page with the styling you need or you analyze the content on the client and do it with script. Either way just looking at content and coming up with the right setting is little more than a guess; and even if you get it right, the user can do a settings change that messes it up.
Cd&
You either generate the page with the styling you need or you analyze the content on the client and do it with script. Either way just looking at content and coming up with the right setting is little more than a guess; and even if you get it right, the user can do a settings change that messes it up.
Cd&
PS: An answer you do not like might still be a valid answer. Please do not punish bearers of bad news
<<<<<<<<<<<<< <span id="scrname" l10n="_text">Loading...</s
l10n="_text" ?
<body onLoad="innertext();">
<table class="FavBar" width="100%" id="FavBar" onContextMenu="FavBarConte
<tr>
<td id="FavbarLeftEndcap" style="font-family:Tahoma;
<a onClick="GetList();" style="cursor:hand;" onMouseOver="this.style.te
<nobr>
<img src="images/icon_grey_fold
<span id="scrname" l10n="_text">Loading...</s
</nobr>
</a>
</td>
<td id="IEFavorites" align="left" style="position:relative; padding-right:25px" >
<span id="FavoritesArea" style="overflow:hidden;cur
<div id="FavOverflow" align="right" style="display:none;width:
<img src="images/overflow_arrow
</div>
</td>
</tr>
</table>
</body>
sean