The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
#1
|
|||
|
|||
[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 |
#2
|
|||
|
|||
Give the main <td> an attribute of width="100%" and the remaining cells a nowrap="nowrap". Post some code, I may have misunderstood.
|
#3
|
||||
|
||||
the html is wrong or javascript is changing the values
as Ken suggested .. post your code |
#4
|
|||
|
|||
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'); } } 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 μέλη & 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&day=2007-07-03&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> Ι 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> |
#5
|
||||
|
||||
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 |
#6
|
|||
|
|||
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> 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... |
#7
|
||||
|
||||
it could be an underlying bug in FF
- by default <table> and <td> are block elements not sure why you are adding "display:block" |
#8
|
|||
|
|||
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...
|
#9
|
||||
|
||||
if that's the case, I suggest wrapping the <table> within a <div> and add the toggle to it
|
#10
|
|||
|
|||
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...
|
Thread Tools | |
Display Modes | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|