Menu
Okay,
now in IE, Mozilla, Opera, EVERY browser there is (usually in the view menu) a command to increase or decrease the overall FONT or TEXT SIZE. This operates globally to the entire page and generally increments all sizes by a similar factor, so small/medium/large fonts remain relative to each other but are globally increased or decreased in size.
Now for the problem:
Given this set of images:
Vertical Line (l_c_line.gif)
Middle Node Line (l_c_mid.gif)
End Node Line (l_c_end.gif)
(these are attached for better comprehension)
And the following html:
[code]
<table border=1 cellpadding=0 cellspacing=0 width=100%><tr>
<td valign=middle background=”icons/l_c_line.gif” ><img src=”icons/l_c_line.gif” width=20 height=20 border=0></td>
<td valign=top ><img name=”Icon.3_0″ id=”Icon.3_0″ src=”icons/node_open.gif” width=20 height=20 border=0></a></td>
<td valign=middle width=100% ><a name=”Link.3_0″ id=”Link.3_0″ href=”javascript:void(0)” target=_top>Folder 1</a></td>
</tr></table>
<table border=1 cellpadding=0 cellspacing=0 width=100%><tr>
<td valign=top ><img src=”icons/l_c_end.gif” width=20 height=20 border=0></td>
<td valign=top ><img name=”Icon.3_2″ id=”Icon.3_2″ src=”icons/node_open.gif” width=20 height=20 border=0></a></td>
<td valign=middle width=100% ><a name=”Link.3_2″ id=”Link.3_2″ href=”javascript:void(0)” target=_top>Folder 3</a></td>
</tr></table>
I am getting a very obvious problem. (And before anyone comments, I KNOW that border has been set to “1”, this is on purpose. The final product doesn’t have any borders, but they help for visual referencing in the development phase.)
As you increase the TEXT SIZE, via the browser, the “END NODE” image becomes further disconnected from the preceding row. Nowhere in any Javascript tutorial or reference is there an indication that one can “Stretch” an image. Supposedly, having the <td> “valign=top” should keep that image at the REAL TOP of the td element, but it doesn’t.
I’ve seen other code that is similar, especially in the HTML final product, and their end product doesn’t behave like this.
Why?
How can i fix it so that when I put “VALIGN=TOP” it ACTUALLY stays at the top and does not move downward no matter how much the text font size increases or decreases.
Thanks
Jaeden “Sifo Dyas” al’Raec Ruiner
[upl-file uuid=e8ffb378-98b3-4014-8e97-76ea285ce48b size=125B]l_c_line.gif
[upl-file uuid=1a1af3bb-9811-462d-832b-8358d24f3ae8 size=128B]l_c_mid.gif
[upl-file uuid=2ec34213-b322-4088-9ff3-0c1b65e94735 size=121B]l_c_end.gif