|
HTML - Adjust Image Height To End Of The Cell
Hi guy, i want to fix the height of the image in cell2 to the end of the cell..
any idea how can i achieve that..? thax heaps <html> <head> <title>hello</title> </head> <body > <table border="1" width="25%"> <tr> <td> cell1 </td> <td bgcolor="#F5BB1B"> cell2 <table bgcolor="black"> <tr> <td> cell4 </td> </tr> </table> <img src="c1.gif" align="right"/> </td> <td> cell3 cell3cell3cell3cell3 cell3cell3cell3 cell3cell3 cell3cell3cell3cell3 cell3cell3cell3 cell3cell3cell3cell3cell3cell3 cell3cell3cell3 cell3cell3cell3cell3cell3cell3 cell3cell3cell3 cell3cell3cell3cell3cell3cell3 cell3cell3cell3 cell3cell3</td> </tr> </table> </body> </html> Similar TutorialsHello. I have a flash header on my page with links. When each link is pressed, the appropriate .html page is loaded into the iframe, which i have defined with this code: Code: <iframe name = "mainframe" src="home.html" width="746" height="800" frameborder="0" align="middle"> The problem is, the different pages that will be loaded into 'mainframe' have different heights, and i would like the iframe to adjust to these heights without adding scrolling bars. How would I do this? Hi everyone: Any help appreciated. Objective: To have three equally sized and spaced images arranged horizontally, with their size set automatically by the size of the window. Development: I'm using a Mac, and I don't have ready access to a PC to experiment. What I tried: Code: <table> <tr> <td><img src = "a.png" style = "width: 100%" /></td> <td><img src = "b.png" style = "width: 100%" /></td> <td><img src = "c.png" style = "width: 100%" /></td> </tr> </table> <p class = "caption">A caption for the 3 images</p> <p class = "legend" >A legend for the three images</p> What happened: This works perfectly in Safari and Firefox (Mac) and Firefox under Vista, but in Internet Explorer under Vista , the images are HUGE - the unscaled size of the originals. What I think is the reason: IE is taking 100% to be relative to the width of the body element, not the td element. What I don't want to have to do: Use fixed sizes or calculate the sizes on the fly. What I'm trying now: removing the table and using a div, and inside that, setting the image width to 33% and floating one right and one left. What's the trick to get around this IE "gotcha" please? Thanks from a newbie. Greetings! Let me start this out by getting this out of the way - I know I should not be using tables for layout anymore But with this project I have good reasons as to not using them. Learning curve being one and time being another But I am headed that way! So here is the issue I have a simple layout and nested within is this little table for content and navigation Worked fine in FF, but IE7 is giving me some unexpected results with no explanation I can find. Here is the example page http://www.mountainroseherbs.com/test/blank.html Top left (blue) is the navigation image and cell - set height should be static and remain at the top Bottom Left (red) is a nav *footer*, I guess, but it remains at the bottom and the cell above it needs to be able to stretch indefinitely - with the images sitting on the bottom. Right (Orange) is the content area - dynamically stretching with the *red* following it. In FF this works great! Not so much in IE7 - in fact it skews the height of even the *blue* which is set!? Thanks so much in advance for your help on this, I am at my wits end! Nate~ On my website I have a left and a right menu, both columns have 3 cells with height set to 100% or just default no value. It all works fine in firefox and opera. However in Internet Explorer the bottom cell in both columns don't extend to meet the bottom of material in the cell above. It helps if you turn borders on in the code, but the betfred banner and mailing list items are valigned top, so should meet the bottom of the menu above in the cell above. Can anyone offer any help thanks Hello, This is either a really easy question, or it just can't be done. I've tried it before, and could have sworn I've worked it out, but I can't do it again. I have a table with cells as below: What I want is Cell #2 to be Fixed and Cell #5 to be fixed in height. When Cell #3 expands, I only want Cell #4 to expand with it. So when #3 is 300px and #2 and #5 are 100px, then #4 should be 100px. But when if #3 expands to 400 px, then #2 and #5 should stay at 200px and #4 should expand to 200px. But this is not the case, atleast in IE. In Firefox, #2 and #5 stay how they are supposed to and #4 expands (yay!), but in IE, all three go haywire. I can't even find any consistancy in how IE determines which cell to expand and how much. I've created a test HTML file to see if I can get it working, and I still cannot. I have it available if anyone would like to see it and fiddle around with it. HTML Link (viewable): Table Test Zip File (includes html and ruler.gif Background): Table Test Zip As you can see, I have #2's height set to 100px and #5's height set to 50px. #4 has no height set. #3's is 300px. What I want is #4's then to be 150px (300 - 100 - 50 = 150). However, the case as it may be is that it just does not work out this way. How can I accomplish this. It must be possible. Note that the HTML contains CSS to determine the dimensions, but I have also tried it directly into the TD tags. I've also tried defining height directly in the TR and through a TR style as well as a ton of combinations of CSS postiioning and heights and floats and all kinds of stuff. I feel like I've tried everything. Any help appreciated. Thanks agin, Rege Hello, I've recently noticed that IE renders this table a bit differently than most browsers (Firefox, Opera, Safari, etc). The real page is much more complicated and uses proper styling, but I simplified it into the code below. The inline CSS sets the height of each individual cell and then the last cell is not provided with a height. I would love for the last cell to take the rest of the available height. I've tried many things to try and get this to work (like setting the height to 100%). The page renders how I expect it to in every browser I've tested except for the IE series. It seems as though Internet Explorer decides to ignore my row heights and calculate its own for some reason. Also, using a fixed height for the last cell is not possible due to how dynamic the web page is. Does anyone have any tips? HTML Code: <table style="table-layout:fixed;" border=1 width=100%> <tr> <td style="height:17px;width:150px;"> </td> <td style="height:600px" colspan=3 rowspan=5>This should span all of the rows and the remaining columns</td> </tr> <tr> <td style="height:17px;width:150px;"> </td> </tr> <tr> <td style="height:17px;width:150px;"> </td> </tr> <tr> <td style="height:17px;width:150px;"> </td> </tr> <tr> <td>This cell should take the rest of the available column height area</td> </tr> </table> Thank you. Hi guys I have a website that is driving me crazy with this problem. The layout and several pages have tables (I know i shouldn't be doing a table-based layout but my CSS skills aren't close enough to do what the site requires). The tables work fine w/o the DOCTYPE declaration which makes the browser work in Quirks Mode, but I don't want a site without the doctype of course. The problem is, when I use any kind of doctypes (and I've tried them all) my table cells go crazy. Check it out: Without doctype: http://smpt.comuf.com/index3.htm (correct view) With doctype: http://smpt.comuf.com/index2.htm (layout error) Another error: Normal: http://smpt.comuf.com/index3.htm?pagina=downloadr With doctype: http://smpt.comuf.com/index2.htm?pagina=downloadr. To make things simpler, I remade the menu part accordingly to the CSS rules and the height property in Dreamweaver 8 I even validated the page ( http://validator.w3.org/check?uri=ht...00=1;verbose=1 - 0 errors). In the editor, the page appears as follow: But when you see it in a browser, the problem still happens: http://smpt.comuf.com/indexe2.htm This is just because the doctype is present, but I made everything according to the rules, but still the same error... So, any ideas? =/ Hi all, Having a bit of trouble with a table layout in IE. The following link renders correctly (or at least as I would like) in Firefox yet in IE the header and navigation bars are too think. I've tried adding a height attribute to all td's concerned, but to no avail. here's the link: http://www.events.ex.ac.uk/ivfdf2009...s/template.php any help you can offer muchly appreciated! Ok IE guru's I am in need of help. I have a cell with a background image and the right last few pixels are cut off. Keep in mind I am using IE 7.0. Here is the code and the exact image size is 641W by 62H. When I adjust the cell to 461w the last right few pixels are cut off... If I change the size to 462, 463, 464.... etc you get it I am sure still cut off... Helppppppp... Code: <tr>
<td width="5"></td>
<td width="642" height="62" background="images/h1_bg.jpg"><h1> <?=$Keyword?> <?=$PageName?></h1></td>
<td width="5"></td>
<td><A CLASS="navi" HREF="rate.php" TITLE="Request A Guaranteed Flat Rate Click Here"><img width="287" height="60" class="banner" src="images/1.gif"></a></td>
<td width="5"></td>
</td>
</tr>
i just have a cell where i want to align the contents to the upper left and stay there .. simple right i've tried html and css styles but can't get safari and IE to display the same thing.. surely this is easy..i've even validated the html.. it works in safari but not in IE - i've tried using CSS styles but can't seem to find the attribute to "stick it in the top left corner" - valign does the trick in safari too but doesn't work in IE.. what have i gotta do - thanks for your helps.. sandy HTML Code: <?xml version="1.0" encoding="utf-8"?>
<!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">
<head>
<title>Annyx Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="text.css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
-->
</style>
</head>
<body onload="MM_preloadImages('button_news_on.jpg','button_stuff_on.jpg','button_contact_on.jpg','button_location_on.jpg')">
<table width="807" border="0" align="center" cellspacing="0" cellpadding="0">
<tr>
<td height="40"> </td>
</tr>
</table>
<table width="807" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td id="main" height="28" colspan="3"><img src="frame_top.jpg" width="807" height="28" alt="bollocks"/></td>
</tr>
<tr>
<td width="31" rowspan="2"><img src="frame_left.jpg" width="31" height="657" alt="bollocks"/></td>
<td width="746" height="73"style="vertical-align: top;"><img src="logo.jpg" width="370" height="73" alt="bollocks"/><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','button_news_on.jpg',1)"><img src="button_news_off.jpg" name="news" width="79" height="73" border="0" id="news" alt="bollocks"/></a><a href="stuff.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('stuff','','button_stuff_on.jpg',1)"><img src="button_stuff_off.jpg" name="stuff" width="72" height="73" border="0" id="stuff" alt="bollocks"/></a><a href="location.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('location','','button_location_on.jpg',1)"><img src="button_location_off.jpg" name="location" width="107" height="73" border="0" id="location" alt="bollocks"/></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','button_contact_on.jpg',1)"><img src="button_contact_off.jpg" name="contact" width="117" height="73" border="0" id="contact" alt="bollocks"/></a></td>
<td width="31" rowspan="2"><img src="frame_right.jpg" width="31" height="657" alt="bollocks"/></td>
</tr>
<tr>
<td valign="top"><div id="pagetitle"><img src="title_stuff_sub.jpg" width="118" height="50" alt="bollocks"/><img src="title_chickens.jpg" width="584" height="50" alt="bollocks"/></div></td>
</tr>
<tr>
<td colspan="3"><img src="frame_bottom.jpg" width="807" height="27" alt="bollocks"/></td>
</tr>
</table>
</body>
</html>
Okay, here's what I've got: two nested tables next to each other, both with two cells in them. The bottom cell on the left table is just a filler, and has a background image to complete the layout of the site -- however, since there's no content in it, it doesn't show up. Giving it a set pixel height makes it show up, but I can't do this, as the content in the other table changes. So, I need this cell (the bottom one on the left) to automatically size itself to whatever the other table is. A height="100%" attribute also doesn't work... Help? Thanks. :] Hello everyone, I am trying to partially hide an image in a table cell. In other words, I don't want the part that is supposed to be hidden to show on the adjacent cells. How do I do that Any help would be greatly appreciated. Hi everyone. I need some help with one thing. However as it is for an ebay page, I cannot use the head tag. I have seen it on ebay before so I know it can be done just not sure how. Basically I need a table with a row of thumbnail images at the bottom and in the top of the table, there will be an enlarged image. When an thumbnail is either clicked on, or the mouse is placed over he image, a bigger image will be displayed in the top cell. I cannot use anything in the head tag though as its ebay, like css or javascript Thanks for any help received I have an image I want to insert into a simple table Cell. My code is as follows: <table> <tr><td align ="left"> img src = "/modules/Quotes/cqilogo.gif"></td></tr> </table> When I access the page I get: img src = "/modules/Quotes/cqilogo.gif"> I know the image is in the right place and it will work if I set it inside a paragraph. What have I got wrong?? Thanks alot Hi I want to addd a image for background so i can postion it and not have it repeat : for for a table cell if u see my link below its the purple table cell that has the Bomboniere Adelaide as the heading i only want the background image in that cell - thanks in advance http://weddingsmadeeasy.com.au/adelaide/Bomboniere.html I've searched around quite a bit, read various articles and so-on and only really come to the conclusion that this is a lot harder than it should be! What I have is a simple page for a PHP script, it has a little form for entering keywords, and displays an image above this form. Now, what I want to do is place these in a table, and have that table resize to fit the viewable area of the user's browser-window. So, what I have is a table with three-rows: The title of the image The image itself The form for entering image keywords Now, what I would like to do is have the image scale to fill the middle cell, which by default eats up all available space leftover by the form and title cells. However, this isn't happening, I enter a height of 100% for the image but it seems to be using some other container to get its height. I'm generally well-versed in HTML, but this one has me stumped! Any help is appreciated, here is the basic HTML I'm using for what I had thought would be a simple page Code: <?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<meta name="author" content="Haravikk.com" />
<title>Add keywords</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
text-align: center;
}
tr, td, textarea { width: 100%; }
table {
width: 99%;
height: 100%;
margin: 0 auto 0 auto;
}
table, td {
border-width: 0;
border-spacing: 0;
padding: 0;
}
#image { height: 100%; }
#tdTitle { height: 5%; }
#tdImg { height: 75%; }
#tdForm { height: 20%; }
#formText { width: 100%; height: 75%; }
</style>
</head>
<body>
<table>
<tr>
<td id="tdTitle"><b>placeholder.png</b></td>
</tr>
<tr>
<td id="tdImg">
<img id="image" src="http://haravikk.com/placeholder.png" alt="" />
</td>
</tr>
<tr>
<td id="tdForm">
<form action="keywords.php" method="post">
<textarea name="keywords" id="fmrText"></textarea><br />
<input type="submit" />
</form>
</td>
</tr>
</table>
</body>
</html>
Now, I don't know if I could eliminate the table in favour of divs and do this, any suggestions to make the above html work, or to re-write it are welcome! The image provided is just to illustrate the problem I am trying to create a table with one cell that contains an image. The image must fill the table vertically from top to bottom. The same code works fine in Firefox, but in IE, it always leaves a gap on the bottom right after the image. Any ideas? Here's the code: <table width="100%" border="1" cellspacing="0" cellpadding="0" height="100" vspace="0" > <tr valign="bottom" height="100" > <td height="100" bordercolordark="000000" > <img src="images/test.jpg" width="600" height="100" vspace="0" hspace="0" border="1"> </td> </tr> </table> Thanks a bunch. Hello all, First time posting to the forums here. I'm creating a table and each row represents a "tab" of the UI. Each cell has a background image that looksl ike this. however, when I render my table and have text in the cell, the right edge of the tab is chopped off like this.. Any recommendations on some CSS or table attributes that I can aplly to make both rounded ends of the background image appear? I've tried turning off table borders, cell spacing and cell padding. Any help would be greatly appreciated. Thanks. So I decided to see if I could make my site XHTML 1.0 Strict-compliant. Here's the main page on my test server I'd be thrilled with it if I could do 3 things: - Set the background color of the left column to match the color behind the fonts. Is there a CSS class I can create and set the cells to that class? - Remove the border around clickable images. - Get the spacing between the menu options on the left to look the way it does on the other pages in the site. If you click any of the pages on my actual site you can see the look I'm going for. Thanks as always for the help! Joshua hi, i have a jsp page, in this page i am displaying data retrieved from mysql database. Now the problem is i must color table cell based on cell value. how to implement this.please give me an sample or working code foe this problem.( any code is accepted) preferably html or javascript. i.e if cell value is "late" then display that cell in red color else display the cell in green color please help me. Thanks ad Regards Akash |
|||||||