Welcome Guest ( Log In | Register )

Outline · [ Standard ] · Linear+

 Resizing Image to <TD> Height

views
     
TSHejime
post Mar 24 2009, 11:50 AM, updated 16y ago

Getting Started
**
Junior Member
262 posts

Joined: Oct 2006
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
post Mar 24 2009, 11:59 AM

Casual
***
Junior Member
396 posts

Joined: Apr 2007
From: Penang, Malaysia



Is it dynamic image? Like those generated from database? Or is it fixed?
TSHejime
post Mar 24 2009, 12:15 PM

Getting Started
**
Junior Member
262 posts

Joined: Oct 2006
the image is fixed

taken from src -> img inside of root folder
gsrc
post Mar 24 2009, 12:29 PM

Casual
***
Junior Member
396 posts

Joined: Apr 2007
From: Penang, Malaysia



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
post Mar 24 2009, 12:56 PM

Getting Started
**
Junior Member
262 posts

Joined: Oct 2006
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
post Mar 24 2009, 01:01 PM

Casual
***
Junior Member
396 posts

Joined: Apr 2007
From: Penang, Malaysia



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
post Mar 24 2009, 01:09 PM

Getting Started
**
Junior Member
262 posts

Joined: Oct 2006
currently this is the table structure

» Click to show Spoiler - click again to hide... «


and this is the CSS

» Click to show Spoiler - click again to hide... «


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 post has been edited by Hejime: Mar 24 2009, 02:26 PM
Hejime - Ex
post Mar 24 2009, 02:27 PM

New Member
*
Junior Member
4 posts

Joined: Mar 2009


Small bumping up for myself with previous post edited
puaka_astro
post Mar 24 2009, 06:17 PM

Casual
***
Junior Member
331 posts

Joined: Jun 2007
From: Isketambola


.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
post Mar 24 2009, 09:01 PM

New Member
*
Junior Member
29 posts

Joined: Mar 2009


There is a reason why doctype should be in the first line of your HTML.

http://www.alistapart.com/articles/doctype/
http://www.w3.org/QA/2002/04/valid-dtd-list.html
TSHejime
post Mar 25 2009, 10:32 AM

Getting Started
**
Junior Member
262 posts

Joined: Oct 2006
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
post Mar 25 2009, 12:50 PM

Casual
***
Junior Member
331 posts

Joined: Jun 2007
From: Isketambola


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
post Mar 25 2009, 03:44 PM

Getting Started
**
Junior Member
262 posts

Joined: Oct 2006
so far i've resized the image to "sort of" solve the problem

now the image default dimension is 16x188
puaka_astro
post Mar 26 2009, 01:01 AM

Casual
***
Junior Member
331 posts

Joined: Jun 2007
From: Isketambola


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
post Mar 26 2009, 09:09 AM

Getting Started
**
Junior Member
262 posts

Joined: Oct 2006
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 here

but i don't know which one is it or how to implement them
puaka_astro
post Mar 26 2009, 01:55 PM

Casual
***
Junior Member
331 posts

Joined: Jun 2007
From: Isketambola


dude i think you might want to try this one. the new structure table in td. so far i tested it ok.

Layout

Attached Image

The HTML

CODE

<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">&nbsp;</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>


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; }


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
post Mar 26 2009, 02:59 PM

Getting Started
**
Junior Member
262 posts

Joined: Oct 2006
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
post Mar 26 2009, 03:06 PM

Casual
***
Junior Member
331 posts

Joined: Jun 2007
From: Isketambola


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
post Mar 26 2009, 03:12 PM

Getting Started
**
Junior Member
262 posts

Joined: Oct 2006
may i ask which script?
puaka_astro
post Mar 26 2009, 03:18 PM

Casual
***
Junior Member
331 posts

Joined: Jun 2007
From: Isketambola


the tree things

2 Pages  1 2 >Top
 

Change to:
| Lo-Fi Version
0.0184sec    0.63    6 queries    GZIP Disabled
Time is now: 29th March 2024 - 04:46 PM