Go Back   vb.org Archive > vBulletin 3 Discussion > vB3 Programming Discussions
Reload this Page [html, css, javascript] td width acting like its not there!
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools Display Modes
  #1  
Old 07-03-2007, 02:06 AM
Lea Verou Lea Verou is offline
 
Join Date: Jul 2005
Location: Greece
Posts: 1,856
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default [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
Reply With Quote
  #2  
Old 07-03-2007, 02:53 AM
Logikos Logikos is offline
 
Join Date: Jan 2003
Posts: 2,924
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Give the main <td> an attribute of width="100%" and the remaining cells a nowrap="nowrap". Post some code, I may have misunderstood.
Reply With Quote
  #3  
Old 07-03-2007, 03:16 AM
Princeton's Avatar
Princeton Princeton is offline
 
Join Date: Nov 2001
Location: Vineland, NJ
Posts: 6,693
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
the html is wrong or javascript is changing the values

as Ken suggested .. post your code
Reply With Quote
  #4  
Old 07-03-2007, 01:15 PM
Lea Verou Lea Verou is offline
 
Join Date: Jul 2005
Location: Greece
Posts: 1,856
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
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>
Reply With Quote
  #5  
Old 07-04-2007, 08:40 PM
Princeton's Avatar
Princeton Princeton is offline
 
Join Date: Nov 2001
Location: Vineland, NJ
Posts: 6,693
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
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
Reply With Quote
  #6  
Old 07-05-2007, 02:32 PM
Lea Verou Lea Verou is offline
 
Join Date: Jul 2005
Location: Greece
Posts: 1,856
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
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...
Reply With Quote
  #7  
Old 07-05-2007, 02:57 PM
Princeton's Avatar
Princeton Princeton is offline
 
Join Date: Nov 2001
Location: Vineland, NJ
Posts: 6,693
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
it could be an underlying bug in FF

- by default <table> and <td> are block elements not sure why you are adding "display:block"
Reply With Quote
  #8  
Old 07-05-2007, 03:00 PM
Lea Verou Lea Verou is offline
 
Join Date: Jul 2005
Location: Greece
Posts: 1,856
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
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...
Reply With Quote
  #9  
Old 07-05-2007, 03:03 PM
Princeton's Avatar
Princeton Princeton is offline
 
Join Date: Nov 2001
Location: Vineland, NJ
Posts: 6,693
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
if that's the case, I suggest wrapping the <table> within a <div> and add the toggle to it
Reply With Quote
  #10  
Old 07-07-2007, 01:41 AM
Lea Verou Lea Verou is offline
 
Join Date: Jul 2005
Location: Greece
Posts: 1,856
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
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...
Reply With Quote
Reply

« Previous Thread | Next Thread »

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 07:42 PM.

Contact Us - Archive - Top

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04601 seconds
  • Memory Usage 2,345KB
  • Queries Executed 14 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)ad_showthread_firstpost
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (4)bbcode_html
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)navbar
  • (3)navbar_link
  • (120)option
  • (10)post_thanks_box
  • (10)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (10)post_thanks_postbit_info
  • (10)postbit
  • (10)postbit_onlinestatus
  • (10)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 
Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete