Outline ·
[ Standard ] ·
Linear+
Resizing Image to <TD> Height
TSHejime
|
Mar 24 2009, 11:50 AM, updated 16y ago
|
Getting Started
|
hi there... currently i have a problem where the my TD in a table is following a CSS
height:100%; but the image i import in is much bigger than the page resolution could handle thus all other TD alignment have ran
how can i resize the image size to follow the TD height size which is storing that image
i'm using ASP.NET with javascript
|
|
|
|
gsrc
|
Mar 24 2009, 11:59 AM
|
|
Is it dynamic image? Like those generated from database? Or is it fixed?
|
|
|
|
TSHejime
|
Mar 24 2009, 12:15 PM
|
Getting Started
|
the image is fixed
taken from src -> img inside of root folder
|
|
|
|
gsrc
|
Mar 24 2009, 12:29 PM
|
|
If your table is fluid CSS style, (Width:100%; instead of Width:800px;) which is stretchable across the monitor, the image width will not change accordingly. Because image are actually "drawn" out, and the size will be fixed just like that, unlike HR or Table which can be re-drawn to fit the monitor (Or more correctly, the browser) width. So you can either create a fixed width table like CODE Width:800px; and then set your image size all to a CODE Max-width:200px; So that all the TD containing the image will have a size of 200px max. Hope that helps.
|
|
|
|
TSHejime
|
Mar 24 2009, 12:56 PM
|
Getting Started
|
nope it didn't help
the problem was regarding the height
so frustrating sometimes it is ok in Firefox but not in IE or else not ok in Firefox and ok in IE
|
|
|
|
gsrc
|
Mar 24 2009, 01:01 PM
|
|
QUOTE(Hejime @ Mar 24 2009, 12:56 PM) nope it didn't help the problem was regarding the height so frustrating sometimes it is ok in Firefox but not in IE or else not ok in Firefox and ok in IE You can also use Max-height:200px to limit the height. But yeah, IE and Firefox css compatibility is a pain in the S.
|
|
|
|
TSHejime
|
Mar 24 2009, 01:09 PM
|
Getting Started
|
currently this is the table structure » Click to show Spoiler - click again to hide... « CODE <table align="center" class="main_tbl_master" cellpadding="0" cellspacing="0"> <tr> <td align="left" class="logo" id="pop3"><a href="javascript:void(0);" onclick="javascript:Link(1);"><img id="imgLogo" runat="server" align="middle" alt="Home" border="0" /></a></td> <td align="left" class="excol" rowspan="4"><img id="imgSlide" runat="server" align="absmiddle" border="0" onclick="AppearDisappear();" title="Collapse" width="16" /></td> <td align="center" class="plug" rowspan="3"><iframe frameborder="0" height="100%" name="plug" src="welcome.aspx" width="100%"></iframe></td> </tr> <tr> <td align="center" class="time" id="pop2"><span id="datTime"></span><input id="txtDate" runat="server" style="display:none;" type="text" /></td> </tr> <tr> <td align="center" class="menu" id="pop" height="100%" rowspan="2"><iframe frameborder="0" height="100%" name="menu" scrolling="auto" src="menu.aspx" width="100%"></iframe></td> </tr> <tr> <td align="center" class="foot" id="pop"><span id="lblCopy" runat="server"></span></td> </tr> </table> and this is the CSS » Click to show Spoiler - click again to hide... « CODE .main_tbl_master { height: 100%; width: 100%; } .main_tbl_master td.foot { font-size: 11px; height: 20; } .main_tbl_master td.logo { height: 105; padding: 2 2 2 2; width: 200; } .main_tbl_master td.menu { height: 100%; padding: 2 2 2 2; width: 200; } .main_tbl_master td.plug { padding: 5 0 0 0; vertical-align: top; height:100%;} .main_tbl_master td.time { background-color: #ffff99; color: #ff0000; font-size: 11px; height: 18; padding: 0 2 0 2; width: 200; } .main_tbl_master td.excol { vertical-align:middle; width:1%; height:100%; Max-Height:450; } it works exactly what i want for Firefox but it runs in IE EDIT: How can i solve this CSS problem? » Click to show Spoiler - click again to hide... « This is Firefox View This is IE View This post has been edited by Hejime: Mar 24 2009, 02:26 PM
|
|
|
|
Hejime - Ex
|
Mar 24 2009, 02:27 PM
|
New Member
|
Small bumping up for myself with previous post edited
|
|
|
|
puaka_astro
|
Mar 24 2009, 06:17 PM
|
|
.excol img {height:200px; width:300px;}
also check your html head area, look for this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
just remove and use only <html> that should do the trick!
|
|
|
|
7899
|
Mar 24 2009, 09:01 PM
|
New Member
|
|
|
|
|
TSHejime
|
Mar 25 2009, 10:32 AM
|
Getting Started
|
QUOTE(puaka_astro @ Mar 24 2009, 06:17 PM) .excol img {height:200px; width:300px;} also check your html head area, look for this <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> just remove and use only <html> that should do the trick! by default the page doesn't have that DocType but i've tried adding it also... it makes no changes to the crazy margin by IE
|
|
|
|
puaka_astro
|
Mar 25 2009, 12:50 PM
|
|
QUOTE by default the page doesn't have that DocType but i've tried adding it also... it makes no changes to the crazy margin by IE hmmm interesting problem. the css rule i posted before works, at least when i trying on dummy image, tested on IE7,IE8. when you right click on the image what is the actual dimension?
|
|
|
|
TSHejime
|
Mar 25 2009, 03:44 PM
|
Getting Started
|
so far i've resized the image to "sort of" solve the problem
now the image default dimension is 16x188
|
|
|
|
puaka_astro
|
Mar 26 2009, 01:01 AM
|
|
Dude, is solved already?? here is some suggestion though, u might want to try your css : CODE main_tbl_master { height: 100%; width: 100%; } .main_tbl_master td.foot { font-size: 11px; height: 20; } .main_tbl_master td.logo { height: 105; padding: 2 2 2 2; width: 200; } .main_tbl_master td.menu { height: 100%; padding: 2 2 2 2; width: 200; } .main_tbl_master td.plug { padding: 5 0 0 0; vertical-align: top; height:100%;} .main_tbl_master td.time { background-color: #ffff99; color: #ff0000; font-size: 11px; height: 18; padding: 0 2 0 2; width: 200; } .main_tbl_master td.excol { vertical-align:middle; width:1%; height:100%; Max-Height:450; }
i see your problem is logo right? the house thing. try include px,pt or em to your css rules eg. height: 105px; padding: 2px; width: 200px; also make the <a> of your logo align="top"
|
|
|
|
TSHejime
|
Mar 26 2009, 09:09 AM
|
Getting Started
|
well... resizing the image does seem to sort of fix the problem because the table structure isn't stretched or doubled sized the tables works perfectly for Firefox though i've tried your CSS but it doesn't help either it is probably one of the bugs in herebut i don't know which one is it or how to implement them
|
|
|
|
puaka_astro
|
Mar 26 2009, 01:55 PM
|
|
dude i think you might want to try this one. the new structure table in td. so far i tested it ok. Layout
The HTMLCODE <table width="100%" border="0" cellspacing="0" cellpadding="0" class="main_tbl_master"> <tr> <td valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top" style="background:red;" class="logo">LOGO</td> </tr> <tr> <td valign="top" style="background:yellow;" class="time">DATE</td> </tr> <tr> <td valign="top" class="menu"><iframe frameborder="0" height="100%" name="plug" src="http://forum.lowyat.net/" width="100%"></iframe></td> </tr> </table> </td> <td valign="top" bgcolor="green"> </td> <td valign="top" class="plug"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top"><iframe frameborder="0" name="plug" src="http://www.php.net/" width="100%" height="100%"></iframe></td> </tr> <tr> <td bgcolor="yellow">FOOTER</td> </tr> </table> </td> </tr> </table>
CSSCODE .main_tbl_master { height: 100%; width: 100%; } .main_tbl_master td.foot { font-size: 11px; height: 20; } .main_tbl_master td.logo { height: 105; padding: 2 2 2 2; width: 200; } .main_tbl_master td.menu { height: 100%; padding: 2 2 2 2; width: 200; } .main_tbl_master td.plug { padding: 5 0 0 0; vertical-align: top; height:100%;} .main_tbl_master td.time { background-color: #ffff99; color: #ff0000; font-size: 11px; height: 18; padding: 0 2 0 2; width: 200; } .main_tbl_master td.excol { vertical-align:middle; width:1%; height:100%; Max-Height:450; }
the background color is for debug, but the clas name is right. also take a look at the mockup, is what u want, i mean the page layout? This post has been edited by puaka_astro: Mar 26 2009, 02:04 PM
|
|
|
|
TSHejime
|
Mar 26 2009, 02:59 PM
|
Getting Started
|
the design has changed a little but it sort of solved already
thanks for the help though
now i'm here with another problem...
how can i expand treeview which user clicks on the nodes instead of clicking on the '+' or '-' sign?
|
|
|
|
puaka_astro
|
Mar 26 2009, 03:06 PM
|
|
QUOTE how can i expand treeview which user clicks on the nodes instead of clicking on the '+' or '-' sign? well that depends on script u use. mind to post it here?
|
|
|
|
TSHejime
|
Mar 26 2009, 03:12 PM
|
Getting Started
|
may i ask which script?
|
|
|
|
puaka_astro
|
Mar 26 2009, 03:18 PM
|
|
the tree things
|
|
|
|