height on td not working? 1

[1DMF]

Hi,

Why doesn't this work...

td {
    display:block;
    height:40px;  
    overflow:hidden;
}

The td cell still expands to fit the content.

I did a search and found people saying overflow only works on block elements and as a td is normaly an inline element the height and overflow doesn't work.

However I've applied a display:block; attribute, yet it still expands to fit the content.

How do I resolve this?

Thanks,
1DMF.



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[vacunita]

Table cells by default grow to fit their content, and they don't support the overflow property.

You'd need to have a div inside the cell, but then again, why are you using tables?

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[1DMF]

You'd need to have a div inside the cell, but then again, why are you using tables?

Thanks Phil, that's what I ended up doing, though it means re-writing some of my JS application to now deal with this extra node!

Why am I using tables? Well because my data is a tabular display of SQL table data.

Why do you use tables? To display tabular data I hope ;-)


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[vacunita]

Yeah that works, sorry bout that.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[1DMF]

- no worries, you guys have taught me better than that you know ;-)

Though there is some funky stuff going on, when the TD cell expands when the DIV height changes, the other table cells move their content.

However, when the toggle to close the DIV back to the fixed 40px, the other data in the table cells seems to float around and mask itself over the top of the other table cell data.

The TD cells where the data should be is blank?

Then when you click the empty table cells the data jumps back into place, all very bizzarre and definately an IE browser issue not the CSS or coding!



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[vacunita]

Table cells are linked to each other because tables need to always be rectangular. If a Cell changes height, all cells in its row will change height to match.

If a cell changes width, all cells in its column will change width.

The contents inside the cell will likely also change because there's more space available to it. So probably, if you had say 2 lines of text in a cell, and its now wider than it used to be, the text will only need one line so it moves around.

If you have absolutely positioned DIVs in your cells, they may simply not move when the table changes dimensions, so its looks like they are floating.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[1DMF]

no absolute positioning

.compliance div{
    height:40px;  
    overflow:hidden; 
    cursor:pointer;  
}

Plus the data that is floating isn't in a div, it is plain text in a table cell TD tag.

So it should move back once the table dimensions change , but it doesn't?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[vacunita]

Can't seem to recreate it. The table cells and their content move back to position just fine.

#xpand{
height:20px; 
overflow:hidden; 
background-color:#CCCCCC;
cursor:pointer
}

#xpand:hover{
height:auto;
cursor:hand;
}


<table style="width:300px; border:1px solid #DDDDDD;">
<tr><td>Cell One</td><td><div id="xpand">Some txt that will be hidden, so you probably wont see this </div></td></tr>
<tr><td><div id="xpand">Some txt that will be hidden, so you probably wont see this </div></td><td>Other Cell</td><tr>
</table>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[1DMF]

well you are doing things differently than me i'm using JS like so...

// Toogle Notes
function toggleNotes(obj)
{
    if(obj.style.height == '')
    {
        obj.style.height = '40px';
    }
    
    if(obj.scrollHeight > parseInt(obj.style.height))
    {
        obj.style.height = obj.scrollHeight + 'px';
    }
    else
    {
        obj.style.height = '40px';
    }
}

and the table cell div ...

<div id="CompNotes" onclick="toggleNotes(this);">

It's all a bit bizzarre as I'm not able to easily recreate the problem, even the guy in compliance has found since MS update yesterday it's not happeneing so much, though occassionaly it still is.

I have found that an error meant that all div id's were called CompNotes , instead of having the recid appended to it to create a unique ID for each div, perhaps that was part of the problem? though the onclick JS used 'this' so the object was sent to the script and not obtained via getElementById.

The easy fix is to valign = top all the cells, apart from giving you access to our system, I'm not sure how any one could help spot any error or stupid mistake I may have made?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts