|
HTML - Align Image Within A Cell In Ie
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>
Similar TutorialsHi 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. I'm just getting into making pages again, after 3 years off I'm REALLY rusty! Here is the code: <div align="center"> <table border="0" width="635" height="490" cellspacing="0" cellpadding="0"> <tr> <td height="43" width="635"> <img border="0" src="AURORENOVA.jpg" width="640" height="168"></td> </tr> <tr> <td height="322" width="635"> <h1>Monday January 22nd 2007</h1> <p>So here is the first update.</p> </td> </tr> </table> </div> I just want to know how I can align the text in the cell to the top of the cell instead of having it hovering in the center. When I do add more text the position changes, but I just want it all to align to the top. Thanks. i need text in a cell of a table had align - left so it is by default but the last string (signature) i'd like to have aligned to the right help please 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>
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. 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 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 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> 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 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 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. I'm having trouble trying to align an image to the top and right. If I just use <img src="" align=right> it goes right as far as I want it, but for some reason the image falls below the text line and appears odd. If I use <img src="" align=top> it goes with the text line like it should, but then it's not to the right like it should be. Isn't there some way to combine the two? <img src="" align=right align=top> doesn't work. Thanks in advance. I have a list of items and I want to display image on the right side of one list item. How can i do it? For example: <ul> <li>Coffee</li> <li>Tea</li> </ul> I want to display a rectangle figure on the right side of 'Coffee' text. hello, im kinda a noobie here, i cant align my image! I need it to be centered, but i cant seem to find how. How would you do this? 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 All, if there a way of adding two images with a title in the middle. For example "Image" This is a example "Image2" With both images flush against the borders. Because at the moment mine looks daft lol!! The RightTopImage needs to be obviously Top right of the webpage, and then there will be an image to the left of the webpage with the title in the middle... I cant figure out the structure of CSS Html HTML Code: <div class="page">
This will be where the Left Image will be.
<div class="header">
<div class="title">
"Text as an example......"
</div>
</div>
<div class="RightTopImage">
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
<div class="clear">
</div>
</div>
Css HTML Code: .RightTopImage
{
background-image:url(../Images/RightTopSmoke.gif);
background-repeat: no-repeat;
background-position: top right;
width: 292px;
height: 222px;
}
.page
{
width: 100%;
background-color: #fff;
margin: 0px;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}
I havent added the left image yet, but if any one can help me or maybe have a code snippet i could use it would be highly appreciated. P.s this will be in the site master. Thank you. Quick update. Am i right in saying this is how you define a title with two images and a text area. .Query { background-image:url(../Images/RightTopSmoke.gif); background-repeat: no-repeat; background-position: top right; Text Details go here background-image:url(../Images/RightTopSmoke.gif); background-repeat: no-repeat; background-position: top left; } hmmmmm I have my Introduction with the title and all. Then i want my href links on the left side of the picture. However i can't seem to be able to do it.(this is a type of autobiographical site for web design, i am making it as a joke to the current assignment. HOWEVER my teacher isn't able to assist me with this...) Ok here is my code <html> <head> <title>A web site about nothing but video games</title> </head> <body> <h1 align="Center">Chairman of the world</h1> <h4 align="center">This is a site dedicated to Chairman Tide Oo</h4> <hr noshade="1"> <center> <img align="middle" src="http://www.dimensionsguide.com/wp-content/uploads/2009/11/Orange.jpg"> </center> <a href="_" >Link 1</a> <p>Yes and yes</p> <a href="_">Link 2</a> <p>Why not </p> <a href="_">Link 3</a> <p>Why yes </p> <a href="_">Link 4</a> <p>Ye...no?</p> <a href="_">Link 5</a> <p>YES!</p> <hr noshade="1"> </body> </html> Thank you~ I need to apologize beforehand for asking help with such a aimple process. I'm doing a site exclusively in HTML. It looks pretty good for my first attempt, but I can't find data ANYWHERE online to vertically align images. The site is frames, the top frame just displays an image, I need the image to self-center to accommodate other screen resolutions. Perhaps I need to align the text(that isn't there), and then align the image to it? Thanks in advance, Tom |
|||||||