constant table size [Archive]

Antoniohawk

03-20-2003, 04:17 AM

I have a table like the one below. The problem is that the table gets larger when i add rows to it. I need the table to stay the same size and the the rows to have smaller heights when more and more are added. All of the those blahs are links and the style applied to them might have something to do with the problem. I also want the border that occurs on hover of the links to be as wide as the table.

a, a:visited, a:active {
font: bold 10px Verdana, Helvetica;
color: white;
padding: 3px;
text-decoration: none;
display: block;
}
a:hover, a:visited:hover, a:active:hover {
color: white;
background-color: gray;
border-color: darkred;
}

<table height="170" width="120">
<tr>
<td>blah</td>
</tr>
<tr>
<td>blah</td>
</tr>
<tr>
<td>blah</td>
</tr>
<tr>
<td>blah</td>
</tr>
<tr>
<td>blah</td>
</tr>
<tr>
<td>blah</td>
</tr>
<tr>
<td>blah</td>
</tr>
<tr>
<td>blah</td>
</tr>
<tr>
<td>blah</td>
</tr>
<tr>
<td>blah</td>
</tr>
</table>

cg9com

03-20-2003, 04:55 AM

well, the padding will do that, but it will expand anyway.
you can use CSS to assign a height to your <td>, but im pretty sure the table will flex no matter what, if need be.
you can also just use the same td CSS branch to make that hover border you want, dont make the border on the anchor, but around the table cell.
you couldnt use the :hover pseudo on a <td> so you would need some javascript event handlers.

for your hover list, just use a:hover {} , that will cover it.

Antoniohawk

03-20-2003, 05:10 AM

thx alot for ur help, but i cant figure out the script needed to accomplish this. It would b great if you could help me out.

Cris79

03-20-2003, 07:50 AM

a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. see more at http://www.w3schools.com/css/css_pseudo_classes.asp?output=print

Cris79

03-20-2003, 08:29 AM

Here is a little script that I made maybe It will help you. If table height/ tr numbers < font size then the script is have no effect.
-----------------------------------
<HTML>
<HEAD>
<TITLE></TITLE>
<script>
var h_tab=400
var nr_tr=12 //nr_tr= the numbers of tr + 1 :rolleyes:
function redim(idx){
document.getElementById("idtab").height= h_tab
for (var i=1;(obj=document.getElementById("idtd" + i));i++){
if (obj.id!="iVal"+idx){
obj.height = h_tab/nr_tr;}
}
}
</script>
</HEAD>
<BODY>
<table width="120" border="1" id="idtab">
<tr>
<td id="idtd1">blah 1</td>
</tr>
<tr>
<td id="idtd2">blah 2</td>
</tr>
<tr>
<td id="idtd3">blah 3</td>
</tr>
<tr>
<td id="idtd4">blah 4</td>
</tr>
<tr>
<td id="idtd5">blah 5</td>
</tr>
<tr>
<td id="idtd6">blah 6</td>
</tr>
<tr>
<td id="idtd7">blah 7</td>
</tr>
<tr>
<td id="idtd8">blah 8</td>
</tr>
<tr>
<td id="idtd9">blah 9</td>
<tr>
<td id="idtd10">blah 10</td>
</tr>
<tr>
<td id="idtd11">blah 11</td>
</tr>
</tr>
</table>
<input type="button" value="redim" onclick="redim()">
</BODY>
</HTML>
-----------------------------------

Antoniohawk

03-21-2003, 12:16 AM

ty for ur help
i think ill just forget the border and go with a simple bg color change onMouseOver. If you can help me with a little angelfire i-frame problem, it would b great.

http://www.angelfire.com/games4/guidetorune/calc/hopeful.html

if u click on the 'v' in the input window a little drop down list appears. if u click on the link marked fishing, the fishing content should appear in the iframe in the output window. istead the page is redirected to some angelfire error. any help would b greatly appreciate, thx in advance.