Hello there.. This time Google didn't help me much on this:

There are several divs in a td, but only one of them is displayed at a time (display:inline), the other having display:none for style. It would be nice if the td (table) didn't resize when switching between divs, but keep the size of the first displayed div. Then, if a div was bigger it would become scrollable.

I tried lots of combinations of height, min-height, max-height, clientHeight, overflow, table-layout:fixed, size capture on body load etc., but it didn't work out as planned..

Here is an experiment:

 <table>
<tr>
<td>
<div id="div1" style="width:100;height:100;overflow:auto;display:none">
1<br>
2<br>
</div>
<div id="div2" style="width:100;height:100;overflow:auto">
% for my $i (1..20) {
<% $i %><br>
% }
</div>
</td>
</tr>
<table>

<script type="text/javascript">
function s() {
document.getElementById("div1").style.display = "inline";
document.getElementById("div2").style.display = "none";
}
</script>

<input type="button" value="Switch" onclick="return s()" />

There are 2 divs: div1 and div2 by their IDs. Each is set "width:100;height:100;overflow", but only div2 is displayed. div2 contains the numbers from 1 to 20 each on a separate line, while div1 contains 1<BR>2. When the page loads div2 is indeed 100 x 100 with scroll bars to accommodate the long list. When I click the "Switch" button to display div1 instead and hide div2, div1 is resized to fit 1<BR>2 perfectly, being much less than 100 x 100.

If, on the other hand, I display div1 first it is 100 x 100. But when switching to div2 it gets more than 100 x 100 without scroll bars..

So.. Is it possible that the javascript code (switch) is faulty? or do I have to add smth.?

I just realized that this works fine in IE, while I'm usually using Firefox.. It doesn't work in Opera too..

Thanks for any advice.

Dani.

That is some of the ugliest code I have ever seen. Please just rewrite it in standardised markup. Once its standardised it will be easy to fix any design issues you have.

Jamie

Man.. It's a few lines of code to prove something. It will not get to NASA and even if it is badly formatted you should understand what a few lines of code do. So don't play hard to get and if you want to help just do it or else let this thread be. Thank you.

I'll never understand why people will use divs and CSS and stuff all that into a 1997 table for layout.

What Jamie meant was to ditch the tables and use CSS for layout.

Tables will stretch to fit the width of what's in them - period, that's the way they are. If you dump the tables, then you can have some finer control of the div sizing.

OK. The thing is that I'm working on a legacy web application which is table based and I use CSS and Javascript to make it sharper. I only recently heard of the CSS no-table trend, but it is not the right moment to look more into it. And if you look closer to my problem the table has little to do with it. It is actually a combination of CSS and Javascript on divs that works right in IE but fails in Firefox and Opera. I understand that you guys dislike tables. Maybe I do to, but there is a problem that I have to fix and I do not have the time to argue on trends and patterns. I appreciate your recommendations though.

No, it works WRONG in IE for various reasons - mainly the raft of BUGS in that browser. Firefox and Opera are more standards-compliant and are therefore showing you the CORRECT rendering.

Be that as it may, I understand your predicament with a legacy site.
Have you tried giving the table itself a fixed width equal to what you want ?

I"m not a script guru so I can't speak to the scripting, but you may have to TELL it in the script to re-size the table back to the original desired size.

Here are the divs without a table containing them. The problem persists: When a div is switched from display:none to display:inline it does not respect the given height, width and overflow style.

            <div id="div1" style="width:100px;height:100px;overflow:auto;display:none">
                1<br>
                2<br>
            </div>
            <div id="div2" style="width:100px;height:100px;overflow:auto">
                1<br>
                2<br>
                3<br>
                4<br>
                5<br>
                6<br>
                7<br>
                8<br>
                9<br>
                10<br>
                11<br>
                12<br>
                13<br>
                14<br>
                15<br>
                16<br>
                17<br>
                18<br>
                19<br>
                20<br>
            </div>


<script type="text/javascript">
    function s() {
        if (document.getElementById("div1").style.display == "none") {
            document.getElementById("div1").style.display = "inline";
            document.getElementById("div2").style.display = "none";
        } else {
            document.getElementById("div1").style.display = "none";
            document.getElementById("div2").style.display = "inline";
        }
    }
</script>

<input type="button" value="Switch" onclick="return s()" />

display:block instead of display:inline and it works! So you call yourselves gurus because you don't like 1997 tables.. No ****!?

Remember one thing.

The help provided here is FREE..!

I've been in this business for quite a long time and must say that if LadynRed is providing assistance, you are getting help from one of the best their is...

Remember that you have been staring at this code much, much, much longer than the people helping. At one glance, the answer doesn't always just POP UP in our face. If you have been looking at quite a few forums, you have been fretting over this for a bit.

Brainstorming is useful. And often this may be all you get. It is still worth it.

Sometimes when people do things that are a bit "unorthodox" it's not as easy to figure the best way to fix it. Sometimes legacy fixes require this, "unorthodox" fix, but when you are the one doing it you know exactly what you are trying to accomplish. At a forum like this most of the rest are trying to help with 1/10 the information they really need.

Glad you figured it out. Sometimes all we need is a good sounding board. Hopefully your next problem will bring you back. As you said, you just recently learned about tableless layout- this tells me that you are not as accomplished as many of the people here. I don't mean this as a insult.

SO come back and learn more.. you will learn a lot here, that's for sure...

Chip &;-)