100% height of a div inside a TD

L

Lamberti Fabrizio

I've got the problem described in the table above.

I've put a div red with some text inside a TD, but its height is less than 100% of TD height as you can see.

I've defined the following styles:

div.test { background-color:red; height:100%; width: 100%; }
table.test { border: 1px solid #CCCCCC; background-color:yellow; }
td.test { border: 1px solid #CCCCCC; }

does anyone know a solution ?

Please help me.

Regards to all

2
2b 1
4 5
7 8
 
L

Lamberti Fabrizio

The table example is this:

2
2b 1
4 5
7 8




I've got the problem described in the table above.

I've put a div red with some text inside a TD, but its height is less than 100% of TD height as you can see.

I've defined the following styles:

div.test { background-color:red; height:100%; width: 100%; }
table.test { border: 1px solid #CCCCCC; background-color:yellow; }
td.test { border: 1px solid #CCCCCC; }

does anyone know a solution ?

Please help me.

Regards to all

2
2b 1
4 5
7 8
 
R

Roy Schestowitz

__/ [Lamberti Fabrizio] on Monday 29 August 2005 08:51 \__


Hi Lamberti,

I have read your message twice, but I still fail to grasp what you are
trying to achieve, why, and how.
The table example is this:

2
2b 1
4 5
7 8


What is the symbolic meaning of the digits? Could you pad it with some
hyphens ("-") and vertical pipes ("|")?

I've got the problem described in the table above.


Have you got a URL where this can be viewed? Code and rendered HTML is
easier to appraise/criticise.

I've put a div red with some text inside a TD, but its height is less than
100% of TD height as you can see.

It is not good practice to embed divs in table cells.

I fail to see it, but maybe somebody else can visualise it more easily than
me.

I've defined the following styles:

div.test { background-color:red; height:100%; width: 100%; }
table.test { border: 1px solid #CCCCCC; background-color:yellow; }
td.test { border: 1px solid #CCCCCC; }


It would be helpful to see the corresponding HTML so that we can view it our
browsers.

does anyone know a solution ?

Please help me.

Regards to all

2
2b 1
4 5
7 8


I sincerely wish to help, but I would argue that you did not provide enough
clear information. I could venture some guesses, but will not be able to
test the outcome as I lack the corresponding (X)HTML code.

Roy
 
E

Els

Lamberti said:
The table example is this:

That's not a table.
Even if I open the HTML version of this post (do not send as html
again!) I don't see a table.

Upload your example somewhere on a server, and give the URL.
That way we can see what is happening.
 
E

Els

Lamberti said:
sorry this is the table:

2
2b 1
4 5
7 8

What you are showing there, is /not/ a table, and is even less capable
of showing any height problems.

Give us a URL to a real live example.

Also:
You're not reading what I wrote.
And you're not quoting what I wrote either, that may have something to
do with that.

Please quote what it is you are replying to, do not post in HTML, and
read a post before you reply to it.

TIA.
 
R

Roy Schestowitz

__/ [Lamberti Fabrizio] on Monday 29 August 2005 09:50 \__
sorry this is the table:

2
2b 1
4 5
7 8

You mean /this/?

==================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content="MSHTML 6.00.2800.1515" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY>
<STYLE>
div.test {
background-color:red;
height:100%;
width: 100%;
}
span.test {
background-color:blue;
height:100%;
width:100%;
}
table.test {
border: 1px solid #CCCCCC;
background-color:yellow;
}
td.test {
border: 1px solid #CCCCCC;
}
</STYLE>

<STYLE>
div.test {
background-color:red;
height:100%;
width: 100%;
}

span.test {
background-color:blue;
height:100%;
width:100%;
}
table.test {
border: 1px solid #CCCCCC;
background-color:yellow;
}
td.test {
border: 1px solid #CCCCCC;
}
</STYLE>

<TABLE class=test id=Table1 cellSpacing=0 cellPadding=0
width=300 border=0>
<TBODY>
<TR>
<TD class=test>2<BR>2b</TD>
<TD class=test>
<DIV class=test>1</DIV></TD></TR>
<TR>
<TD class=test>4</TD>
<TD class=test>5</TD></TR>
<TR>
<TD class=test>7</TD>
<TD=20
class=test>8</TD></TR></TBODY></TABLE></DIV></FONT></DIV></DIV></BODY></HTML>

==================================

In UseNet, you should never post HTML messages. It causes confusion and
results on chaos. The above is _not_ a copy extracted from the source (Els
and others, you can copy and paste the above to view). I had to clean up
about 30 invalid characters just to be able to view it as a page.

I think what you want is <td valign="center"> or an equivalent in pure CSS.

Hope it helps,

Roy
 
E

Els

Roy said:
__/ [Lamberti Fabrizio] on Monday 29 August 2005 09:50 \__
sorry this is the table:

2
2b 1
4 5
7 8

You mean /this/?

==================================

[snip code]
==================================

In UseNet, you should never post HTML messages. It causes confusion and
results on chaos. The above is _not_ a copy extracted from the source (Els
and others, you can copy and paste the above to view). I had to clean up
about 30 invalid characters just to be able to view it as a page.

Thanks, Roy :)

Lamberti: the reason the height of 100% isn't obeyed by IE, is that
you didn't say 100% of what. The TD hasn't a set height.
To get both IE and other browsers to obey, feed IE a 1px height to the
TD. Like so:
td.test{_height:1px;} (the underscore makes the style invisible for
anything but WinIE)

Best is though to not want a div in a table cell for colour. Just set
the colour to the table cell itself.
 
L

Lamberti Fabrizio

Lamberti: the reason the height of 100% isn't obeyed by IE, is that
you didn't say 100% of what. The TD hasn't a set height.
To get both IE and other browsers to obey, feed IE a 1px height to the
TD. Like so:
td.test{_height:1px;} (the underscore makes the style invisible for
anything but WinIE)

Simple and perfect solution...thnx
Best is though to not want a div in a table cell for colour. Just set
the colour to the table cell itself.
I know but it's necessary to use a DIV in this case
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top