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

resizing td element under mozilla

P: n/a
i want to resize dynamically table cols.
But some strange behaviour occurs under mozilla.
I cannot resize a col smaller than the largest element, even with overflow
hidden and table-layout fixed.
With one exception:
Inserting a initial css table-width like 10px in the html. In this case i
can resize to smaller sizes.
I can live with that (need to calc all td widths, set each and then put the
table to 1px),
but why can't i add this table width dynamically after rendering, to allow
shrinking?
I don't want to modify the html/css, as it comes from an other engine. Just
Javascript DOM.

Does anybody knows a hint, how to resize all tables in the way of the first
example without any hardcoded HTML-CSS.
Allowing shrink to zero under mozilla ?

the example:
***************************************
<head>
<style>td{ overflow:hidden}</style>

<script>
function mod(ob, siz){
var tab = document.getElementById(ob);
tab.style.tableLayout = "fixed";
tab.style.width = "1px"; // does not work in mozilla
var tds = tab.getElementsByTagName("TD"); //just to simplify the example
tds[0].style.width= siz+"px";
tds[0].style.color="red";
tds[1].style.width= "50px";
tds[1].style.color="blue";
}
</script>
</head>
<body>
<br />
first example this way it should be: <a
href='javascript:mod("t1",10);'>10px</a>&nbsp;<a
href='javascript:mod("t1",200);'>200px</a><br />
<table id='t1' style='width:20px;table-layout:fixed; '
border='1'><tr><td>massabombassa</td><td>massabombassa</td></tr><tr><td>mass
abombassa</td><td>massabombassa</td></tr></table>

<br />second example only larger works: <a
href='javascript:mod("t2",10);'>10px</a>&nbsp;<a
href='javascript:mod("t2",200);'>200px</a><br />
<table id='t2' style='table-layout:fixed;'
border='1'><tr><td>massabombassa</td><td>massabombassa</td></tr><tr><td>mass
abombassa</td><td>massabombassa</td></tr></table>

<br />any unknown table: <a href='javascript:mod("t3",10);'>10px</a>&nbsp;<a
href='javascript:mod("t3",200);'>200px</a><br />
<table id='t3'
border='1'><tr><td>massabombassa</td><td>massabombassa</td></tr><tr><td>mass
abombassa</td><td>massabombassa</td></tr></table>
</body>


-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----
Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
andres obrero wrote:
i want to resize dynamically table cols.
But some strange behaviour occurs under mozilla.
I cannot resize a col smaller than the largest element, even with overflow
hidden and table-layout fixed.
[...]
the example:
***************************************
<head>
<style>td{ overflow:hidden}</style>

<script>
[...]


<http://validator.w3.org/>
PointedEars
Jul 23 '05 #2

P: n/a
yeah,
very helpful to understand the skills of how to communicate without saying
nothing,
but does not lead to any solution of my problem.
as the validator just want a few headers more.

[[[

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang='de'>
<head>
<title></title>
<style type="text/css" >
td{ overflow:hidden}
</style>

<script type="text/javascript" >

]]]
maybe it helps to read my question a bit more carefully.

"Thomas 'PointedEars' Lahn" <Po*********@nurfuerspam.de> schrieb im
Newsbeitrag news:41**************@PointedEars.de...
andres obrero wrote:
i want to resize dynamically table cols.
But some strange behaviour occurs under mozilla.
I cannot resize a col smaller than the largest element, even with overflow hidden and table-layout fixed.
[...]
the example:
***************************************
<head>
<style>td{ overflow:hidden}</style>

<script>
[...]


<http://validator.w3.org/>
PointedEars



-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----
Jul 23 '05 #3

P: n/a
andres obrero wrote:
very helpful to understand the skills of how to
communicate without saying nothing,
You just did not understand.
but does not lead to any solution of my problem.
as the validator just want a few headers more.
These are not headers, they are markup declarations and attributes
as parts of Valid (X)HTML.
[[[
What is this supposed to mean?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
Unlikely. You are using <br /> which is XHTML Syntax.
[...]
At least this part is Valid now.
]]]
maybe it helps to read my question a bit more carefully.
Maybe it helps to learn what you are using ...
[Top post]


.... and stop that, see the FAQ (for both).
PointedEars
Jul 23 '05 #4

P: n/a
DU
andres obrero wrote:
i want to resize dynamically table cols.
But some strange behaviour occurs under mozilla.
I cannot resize a col smaller than the largest element, even with overflow
hidden and table-layout fixed.
If I was an user, I would expect or even demand that a browser never
collapse cells or columns up to a point that I can not have access to
its content. That expectation should also meets the web author's own
expectation too: let the content be reached, viewed, accessed by the user.
CSS declaration table-layout: fixed have pretty much nothing to do here,
unless you are willing to define width for each column. And in the code
you provided, you did not.
With one exception:
Inserting a initial css table-width like 10px in the html. In this case i
can resize to smaller sizes.
I can live with that (need to calc all td widths, set each and then put the
table to 1px),
but why can't i add this table width dynamically after rendering, to allow
shrinking?
I don't want to modify the html/css, as it comes from an other engine. Just
Javascript DOM.

For someone outside of your webpage design thinking, reasoning, and not
knowing exactly your webpage requirements, analysis, etc.., it's a bit
difficult to follow your line of thinking here.
Does anybody knows a hint, how to resize all tables in the way of the first
example without any hardcoded HTML-CSS.
Allowing shrink to zero under mozilla ?

Again, what you're trying to achieve here goes against normal,
reasonable behavior of a web page.
the example:
***************************************
<head>
It would be much more preferable, convenient and useful for readers of
your post willing to offer assistance, suggestions, insight if you could
upload your example and provide an url. It would also be quite useful to
make such document with valid/validated markup and css code, you know.
<style>td{ overflow:hidden}</style>

<script>
function mod(ob, siz){
var tab = document.getElementById(ob);
tab.style.tableLayout = "fixed";
table-layout: fixed is aimed at parsing and rendering a table and such
declaration has requirements, otherwise the table is rendered with the
slow approach. So, here, I think your assignment is pointless.
tab.style.width = "1px"; // does not work in mozilla
Well, how or why should a whole table as wide as 1px would achieve
something?
var tds = tab.getElementsByTagName("TD"); //just to simplify the example
tds[0].style.width= siz+"px";
tds[0].style.color="red";
tds[1].style.width= "50px";


Just forget about browsers here. How should a human (or a genius,
whatever) comply with your table width and cell widths
demands/requirements here? I'm not even asking what you're trying to do
here; I'm asking how could anyone be able to achieve what you are
requesting here. The whole table should be 1px wide but some of its
table cells should be 50px wide.

[snipped code]

If you want meaningful help, assistance, then the best policy to adopt,
to adhere to is to post the most helpful, most meaningful, useful post
you can provide about your webpage situation. If you want respect, be
respectful and be respectable yourself. If you want a friend, act like
one. etc,etc.

Why we won't help you
"(...) Guru Designer replies, telling Newbie Designer that their page
doesn’t validate, and that they should go validate their page before
asking such questions. There is no further discussion; no further
replies are posted; no one else is willing to help.(...)"
http://diveintomark.org/archives/200..._wont_help_you

DU
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.