vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB3 Programming Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=15)
-   -   [html, css, javascript] td width acting like its not there! (https://vborg.vbsupport.ru/showthread.php?t=151242)

Lea Verou 07-03-2007 02:06 AM
[html, css, javascript] td width acting like its not there!
 
I have a table with some other tables inside it's cells.
I wanted the inside tables to be 100% the width of the table cells, and of course I want the table cells that contain them to be 100% of their table width (minus the padding)!
However, I've noticed a very weird issue, that only occurs with firefox (and perhaps Opera but not IE7). The table cells of the outer table are less wide than the table (and I'm not counting the padding) and consequently they make the inner table less wide than I want it to be!!
The table cells adjust to the automatic (defined by the content) width of the inner tables. No matter how much width="100%" I've added to the tds involved, they seem to ignore it completely! If the content is enough I get the desired result but if the content is too little they adjust to it regardless of any width definition I'm trying to apply.
And if wasn't strange enough, the problem occurs only after I hide and re-show the table via javascript. Via my javascript I change the css display attribute of the table to none in order to hide it and then to block in order to show it. If I change the javasript to change the display property to 'table' and not 'block' in order to show the table it shows up properly (the cells are 100% wide) but I have problems with IE so I discarded this solution. I need to work this out via display:block for the table.
Any ideas of what I could try? This issue is driving me mad :(

Logikos 07-03-2007 02:53 AM
Give the main <td> an attribute of width="100%" and the remaining cells a nowrap="nowrap". Post some code, I may have misunderstood.

Princeton 07-03-2007 03:16 AM
the html is wrong or javascript is changing the values

as Ken suggested .. post your code

Lea Verou 07-03-2007 01:15 PM
Ok, here is the javascript:

HTML Code:
function gotocat(cat)
    {
        switch(cat)
        {
            //forum tabs
            case 'as':
                //toggle the tabs
                document.getElementById('as').style.display = 'block';
                document.getElementById('gk').style.display = 'none';
                document.getElementById('t').style.display = 'none';
                document.getElementById('ets').style.display = 'none';
                //change the tab-header image
                document.getElementById('kartelesmenu').src = "karteles/as.gif";
                break;
            case 'gk':
                //toggle the tabs
                document.getElementById('as').style.display = 'none';
                document.getElementById('gk').style.display = 'block';
                document.getElementById('t').style.display = 'none';
                document.getElementById('ets').style.display = 'none';
                //change the tab-header image
                document.getElementById('kartelesmenu').src = "karteles/gk.gif";
                break;
            case 't':
                //toggle the tabs
                document.getElementById('as').style.display = 'none';
                document.getElementById('gk').style.display = 'none';
                document.getElementById('t').style.display = 'block';
                document.getElementById('ets').style.display = 'none';
                //change the tab-header image
                document.getElementById('kartelesmenu').src = "karteles/t.gif";
                break;
            case 'ets':
                //toggle the tabs
                document.getElementById('as').style.display = 'none';
                document.getElementById('gk').style.display = 'none';
                document.getElementById('t').style.display = 'none';
                document.getElementById('ets').style.display = 'block';
                //change the tab-header image
                document.getElementById('kartelesmenu').src = "karteles/ets.gif";
                break;
            //top tabs
            case 'ts':
                //toggle the tabs
                document.getElementById('ts').style.display = 'block';
                document.getElementById('sx').style.display = 'none';
                document.getElementById('s').style.display = 'none';
                //change the tab-header image
                document.getElementById('kartelesmenu2').src = "karteles/ts.gif";
                break;
            case 'sx':
                //toggle the tabs
                document.getElementById('ts').style.display = 'none';
                document.getElementById('sx').style.display = 'block';
                document.getElementById('s').style.display = 'none';
                //change the tab-header image
                document.getElementById('kartelesmenu2').src = "karteles/sx.gif";
                break;
            case 's':
                //toggle the tabs
                document.getElementById('ts').style.display = 'none';
                document.getElementById('sx').style.display = 'none';
                document.getElementById('s').style.display = 'block';
                //change the tab-header image
                document.getElementById('kartelesmenu2').src = "karteles/s.gif";
                break;
            default: alert('error');
        }
   
    }
and here is the html (part):

HTML Code:
<table cellpadding="0" cellspacing="0" width="742">

        <tr>
            <td><img src="karteles/ts.gif" usemap="#karteles2" id="kartelesmenu2" border="0" height="40" width="742"></td>
        </tr>
</table>
<table style="border-top:0px;" class="gradient_blue3 border_blue letters_white" id="ts" cellpadding="5" width="742">
        <tr><td>k</td></tr>
</table>
    <table style="border-top:0px;" class="gradient_orange3 border_orange letters_orange" id="sx" cellpadding="5" width="742">
        <tr><td style="padding-top: 0px;" height="1" width="100%"></td></tr>

        <tr>
            <td style="padding-top: 0px;" >
                <table cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td align="right" height="12" valign="bottom" width="12"><img src="layout_graphics/corner_top_left.png" alt="" class="roundcorners"></td>
                                <td colspan="2" class="roundedbody" height="12"></td>
                                <td align="left" height="12" valign="bottom" width="12"><img src="layout_graphics/corner_top_right.png" alt="" class="roundcorners"></td>
                            </tr>
                            <tr>

                                <td class="roundedbody" width="12"></td>
                                <td class="roundedbody" width="90">
                                    <img src="eikonidia/wol.png" alt="" border="0">
                                </td>
                                <td class="roundedbody" align="left">
                                    <h1>
                                        <a href="online.php" rel="nofollow">Συνδεδεμένοι Χρήστες  </a>: 1 (1 μέλη &amp; 0 επισκέπτες)   
                                    </h1>

                                           
                                                <span class="smallfont">
                                                    <em>Ρεκόρ : 533 χρήστες.  στίς 25/06/07 ώρα: 03:12</em><br>
                                                    <!-- BEGIN TEMPLATE: forumhome_loggedinuser -->
<a href="member.php?u=179" rel="nofollow"><font color="#ff0000"><b>Michelle</b></font></a>
<!-- END TEMPLATE: forumhome_loggedinuser -->
                                                </span>
                                    <!-- end logged-in users -->
                                   
                                </td>
                       
                                <td class="roundedbody" width="12"></td>

                            </tr>
                            <tr>
                                <td align="right" height="12" valign="bottom" width="12"><img src="layout_graphics/corner_bottom_left.png" alt="" class="roundcorners"></td>
                                <td colspan="2" class="roundedbody" height="12"></td>
                                <td align="left" height="12" valign="bottom" width="12"><img src="layout_graphics/corner_bottom_right.png" alt="" class="roundcorners"></td>
                            </tr>
                </table>
            </td>
        </tr>

        <tr>
            <td style="padding-top: 0px;" width="100%">
                <table cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td align="right" height="12" valign="bottom" width="12"><img src="layout_graphics/corner_top_left.png" alt="" class="roundcorners"></td>
                                <td colspan="2" class="roundedbody" height="12"></td>
                                <td align="left" height="12" valign="bottom" width="12"><img src="layout_graphics/corner_top_right.png" alt="" class="roundcorners"></td>
                            </tr>
                            <tr>

                                <td class="roundedbody" width="12"></td>
                                <td class="roundedbody" width="90">
                                    <img src="eikonidia/wvt.png" alt="" border="0">
                                </td>
                                <td class="roundedbody" align="left">
                                    <!-- start wvt --><!-- who has visited -->
<h1>
            Οι χρήστες που επισκεφθήκαν το e-steki τις τελευταίες 24 ώρες ήταν:  3
</h1>
<span class="smallfont">

<a rel="nofollow" href="member.php?u=178" title="02:58"><font color="#ff0000"><b>Exposed_Bone</b></font></a>*, <a rel="nofollow" href="member.php?u=179" title="03:40"><font color="#ff0000"><b>Michelle</b></font></a>, <a rel="nofollow" href="member.php?u=304" title="03:17"><span style="font-weight: bold; color: rgb(255, 120, 0);">Petros</span></a>
</span>
<!-- end who has visited -->
                                </td>
                       
                                <td class="roundedbody" width="12"></td>
                            </tr>
                            <tr>
                                <td align="right" height="12" valign="bottom" width="12"><img src="layout_graphics/corner_bottom_left.png" alt="" class="roundcorners"></td>

                                <td colspan="2" class="roundedbody" height="12"></td>
                                <td align="left" height="12" valign="bottom" width="12"><img src="layout_graphics/corner_bottom_right.png" alt="" class="roundcorners"></td>
                            </tr>
                </table>
            </td>
        </tr>
       
        <tr>
            <td style="padding-top: 0px;" width="100%">
                <table cellpadding="0" cellspacing="0" width="100%">

                            <tr>
                                <td align="right" height="12" valign="bottom" width="12"><img src="layout_graphics/corner_top_left.png" alt="" class="roundcorners"></td>
                                <td colspan="2" class="roundedbody" height="12"></td>
                                <td align="left" height="12" valign="bottom" width="12"><img src="layout_graphics/corner_top_right.png" alt="" class="roundcorners"></td>
                            </tr>
                            <tr>
                                <td class="roundedbody" width="12"></td>
                                <td class="roundedbody" width="90">
                                    <img src="eikonidia/birthday.png" alt="" border="0">

                                </td>
                                <td class="roundedbody" align="left">
                                    <h1><a href="calendar.php?do=getday&amp;day=2007-07-03&amp;sb=1">Χρόνια πολλά στους:</a></h1>
                                    <span class="smallfont"><!--rlm--><a href="member.php?u=1336">ZEUS</a> <!--rlm-->(23), <!--rlm--><a href="member.php?u=2295">black_feather</a> <!--rlm-->(20)</span>
                                </td>                       
                                <td class="roundedbody" width="12"></td>

                            </tr>
                            <tr>
                                <td align="right" height="12" valign="bottom" width="12"><img src="layout_graphics/corner_bottom_left.png" alt="" class="roundcorners"></td>
                                <td colspan="2" class="roundedbody" height="12"></td>
                                <td align="left" height="12" valign="bottom" width="12"><img src="layout_graphics/corner_bottom_right.png" alt="" class="roundcorners"></td>
                            </tr>
                </table>
            </td>
        </tr>

       
    </table>
    <table style="border-top:0px;" class="gradient_green2 border_green letters_green" id="s" cellpadding="5" width="742">
        <tr><td style="padding-top: 0px;" height="1"></td></tr>
        <tr>
            <td style="padding-top: 0px;">
                <table cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td align="right" height="12" valign="bottom" width="12"><img src="layout_graphics/corner_top_left.png" alt="" class="roundcorners"></td>
                                <td colspan="2" class="roundedbody" height="12"></td>

                                <td align="left" height="12" valign="bottom" width="12"><img src="layout_graphics/corner_top_right.png" alt="" class="roundcorners"></td>
                            </tr>
                            <tr>
                                <td class="roundedbody" width="12"></td>
                                <td class="roundedbody" width="90">
                                    <img src="eikonidia/stats.png" alt="" border="0">
                                </td>
                                <td class="roundedbody" align="left">
                                        <h1>Στατιστικά του e-steki forum </h1>

                                    <span class="smallfont">
                                        Θέματα: <strong>5.382</strong>,
                                        Μηνύματα: <strong>267.281</strong>,
                                        Μέλη: <a href="http://www.exposedbone.uni.cc/forum/memberlist.php"><strong>2.785</strong></a>
                                   
                                        <br>
                                        Μέσος όρος ηλικίας: 29.22 <br>
                                        Καλωσορίζουμε το νεότερο  μέλος μας: <a href="member.php?u=2966">LasTins</a>

                                    </span>
                                   
                                </td>
                       
                                <td class="roundedbody" width="12"></td>
                            </tr>
                            <tr>
                                <td align="right" height="12" valign="bottom" width="12"><img src="layout_graphics/corner_bottom_left.png" alt="" class="roundcorners"></td>
                                <td colspan="2" class="roundedbody" height="12"></td>
                                <td align="left" height="12" valign="bottom" width="12"><img src="layout_graphics/corner_bottom_right.png" alt="" class="roundcorners"></td>
                            </tr>

                </table>
            </td>
        </tr>
    </table>
<map name="karteles2" id="karteles2">
<area shape="rect" coords="25,5,237,33" alt="Τελευταίες συζητήσεις" onclick="gotocat('ts')"  />
<area shape="rect" coords="245,5,340,33" alt="Συνδεδεμένοι χρήστες" onclick="gotocat('sx')"  />
<area shape="rect" coords="350,5,455,33" alt="Στατιστικά" onclick="gotocat('s')"  />
</map>
Sorry for not posting code earlier, I thought it would be very boring for you to go through the whole thing so I thought it was better to describe the problem...

Ι was able to reproduce the same problem with the least possible code so if the above is too boring to scroll through (and I understand that), try the following code, it has the same td problem although the td has a width="100%" attribute. A border has been set on the table so that you can easily see the problem if you just paste it in an html page. Note that the problem only occurs with firefox afaik.

HTML Code:
<table style="display:block" border="1" width="100%">
<tr><td width="100%">test</td></tr>
</table>

Princeton 07-04-2007 08:40 PM
I'm still not sure what it is you are trying to do ..
can you post screenshots of your problem?
which browser are you testing on? version? etc

Lea Verou 07-05-2007 02:32 PM
1 Attachment(s)
I'll talk about the "stripped down to basic" problem, and not my actual one that has extra code that might tire you. If I solve this one, I'll solve the actual one I'm having.

So, this code:
HTML Code:
<table style="display:block" border="1" width="100%">
<tr><td width="100%">test</td></tr>
</table>
produces this result:
Attachment 66541

Notice how the td takes the size of the content and doesn't stretch to the whole table as it should?
This only happens in firefox...

Princeton 07-05-2007 02:57 PM
it could be an underlying bug in FF :confused:

- by default <table> and <td> are block elements not sure why you are adding "display:block"

Lea Verou 07-05-2007 03:00 PM
display:block seems out of place in the simple code above but in my actual code I use it to hide and show the table via javascript. When I want to hide it I apply a display:none via js and to show it a display:block. It's a common toggling method in js...

Princeton 07-05-2007 03:03 PM
if that's the case, I suggest wrapping the <table> within a <div> and add the toggle to it

Lea Verou 07-07-2007 01:41 AM
This is what I had thought to do in the end, but firstly I'll wait to see if I find a more "elegant" solution...


All times are GMT. The time now is 02:18 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01311 seconds
  • Memory Usage 1,877KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (4)bbcode_html_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete