HTML - Ie Images Within Table

I'm setting up a table showcasing a bunch of logos and they're all different widths. I saved the Jpegs as all the same height. I need help coding it though

I want the page to look like this



but it looks like this



when I use this code

Quote:
<table border="0">
<tbody>

<tr>

<td><a href="http://www.champssports.com"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/02/champs.png"/></a></td>

<td><a href="http://www.ladyfootlocker.com"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/02/footlocker.png"></a></td>

<td><a href="http://www.drjays.com"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/02/drjays.png"></a></td>

</tr>

<tr>

<td><a href="http://www.shoecity.com"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/02/shoecity.png"></a></td>

<td><a href="http://www.shiekhshoes.com"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/02/sheik.png"></a></td>

<td><a href="http://www.finsihline.com"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/02/finishline.png"></a></td>

<td><a href="http://www.jimmyjazz.com"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/02/jimmyjazz.png"></a></td>

</tr>

</tbody>
</table>
and I don't even know how I would code that green square image that says "thes are some of our retailers"

it wouldn't go within that table right?

Any help is appreciated!

Hello I am trying to figure out the best way to make a table that shows a product then under the product has a small description, link to get details and then an add to cart link/image.

an example of what I ma trying to do is the table they have built here;
http://www.cabothillsmaple.com/order_syrup.htm

What is the best way to do this?

Thanks for your help

none of the images are showing in my table. the are specified to the correct location. anyone have any ideas why this is?

Code:

<table border="1" cellspacing="5" cellpadding="5">
  <tr>
    <td width=100px, height=80px><img scr="images/apple schnapps.jpg" width="60px" height="80px"/>  <br /> Apple Schnapps</td>
    <td width=100px, height=80px><img scr="images/cachaca.jpg" width="60px" height="80px"/>   <br /> Cachaca</td>
    <td width=100px, height=80px><img scr="images/champagne.jpg" width="60px" height="80px"/>  <br /> Champagne</td>
    <td width=100px, height=80px><img scr="images/Coca Cola.jpg" width="60px" height="80px"/> <br /> Coca Cola</td>
    <td width=100px, height=80px><img scr="images/cranberry juice.jpg" width="60px" height="80px"/> <br /> Cranberry Juice</td>
  </tr
  <tr>
    <td width=100px, height=80px><img scr="images/espresso.jpg" width="60px" height="80px"/> <br /> Espresso</td>
    <td width=100px, height=80px><img scr="images/grapefruit juice.jpg" width="60px" height="80px"/> <br /> Grapefruit Juice</td>
    <td width=100px, height=80px><img scr="images/lime juice.jpg" width="60px" height="80px"/> <br /> Lime Juice</td>
    <td width=100px, height=80px><img scr="images/passion fruit juice.jpg" width="60px" height="80px"/> <br /> Passion Fruit Juice</td>
    <td width=100px, height=80px><img scr="images/peach juice.jpg" width="60px" height="80px"/> <br /> Peach Juice</td>
  </tr>
  <tr>
    <td width=100px, height=80px><img scr="images/rum.jpg" width="60px" height="80px"/> <br /> Rum</td>
    <td width=100px, height=80px><img scr="images/soda water.jpg" width="60px" height="80px"/> <br /> Soda Water</td>
    <td width=100px, height=80px><img scr="images/sugar.jpg" width="60px" height="80px"/> <br /> Sugar</td>
    <td width=100px, height=80px><img scr="images/Vodka.jpg" width="60px" height="80px"/> <br /> Vodka</td>
  </tr>
</table>

I've tried and tried and can't figure this one out, probably VERY easy for others. I've got a table with images and I can't figure out how to remove the spacing betwen the table rows.

Here is a link

http://www.4wheelcustoms.com/new%20template/index.html

Notice both sides of the navagation images have horizontal spacing around them.

Any help is appreciated.

I need a bit of help with some images within the cell of a table.

In this cell I have a background image that I am hoping will adjust to fit the varying heights of my table on different pages (some pages have more info and are therefore taller - for lack of a better description).

In this same cell, and on top of the background image, I have the navigational image and it all seems to work exactly the way I want it to, with one exception.

The exception is that when I view the page, the navigational image is much to low in the cell. I have done a bit of reading and unless I am just flat out not looking in or for the right information, I can't find anything that looks like it could be a solution.

You can see what I am trying to explain here. You can see just how low the navigational list is and I would like to have it moved more towards the top of the cell. I am pretty sure that I can move it up if I use a lt of "&nbsp;" but I don't think this would be the best way to go.

I am sure there is a way to do this so if any of the experts here have a suggestion as to how to fix this or where to look for information about moving the images around in a cell I would greatly appreciate any help.

Thanks,
Vance

Hi,
How can I stop the table bacground image in this page from scrolling:

http://augustineleudar.110mb.com/music.htm

Its the bacground image of a table not the whole page

any help appreciated

Hi,

I sliced my web layout in PS. So far so good, I've done about 4 or 5 pages and it's gone fairly smoothly. However I'm having trouble with some coding on a particular page.

I want to have a contact form on my contact page. But it's an HTML table and so are the slices. I've tried a couple of different ways to see if I could get it to 'lay' on top of the background image slice, but no luck.

Take a look for yourselves: http://www.beemerphotography.com/contact.html

Code:

<form name="contactform" method="post" action="contact.php">
<table width="450px">
</tr>
<tr>
 <td valign="top">
  <font color="#FFFFFF"><label for="name">Name</label></font>
 </td>
 <td valign="top">
  <input  type="text" name="name" maxlength="50" size="30">
 </td>
</tr>

<tr>
 <td valign="top">
  <font color="#FFFFFF"><label for="email">Email Address</label></font>
 </td>
 <td valign="top">
  <input  type="text" name="email" maxlength="80" size="30">
 </td>

</tr>
<tr>
 <td valign="top">
  <font color="#FFFFFF"><label for="telephone">Telephone Number</label></font>
 </td>
 <td valign="top">
  <input  type="text" name="telephone" maxlength="30" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <font color="#FFFFFF"><label for="comments">Comments (Type of session(s): engagement, wedding, family, etc. | Booking date if applicable)</label></font>
 </td>

And I've tried this:
Code:

<table background="http://www.beemerphotography.com/contact/images/info.gif" width="409" height="467">

And also, I have another page that is just not displaying for some reason. I have gone over the code, redone the slicing, redone the coding, and I can't figure it out for the life of me why it isn't displaying anything: http://www.beemerphotography.com/abo...ng/prints.html

quick intro~
im an artist making a unique gallery. i did have someone else helping out n tried doing things in wordpress but that was getting to be too much trouble (especially after a promotion in their dayjob left me effectively alone with a site beyond my understanding). so i'm striking out to make it look as i want in plain ol' html first, and will tackle the database and backend stuff later.


http://www.gaudiepod.org.uk/light/al.../test****.html

^ this example uses a few different techniques from my explorations of the possibilities.

http://www.gaudiepod.org.uk/light/al...t****beta.html

^ this example is closer to what i am looking for (ignoring that it's all the same image for the moment).
the images aren't merely cell-backgrounds, and so can be turned into clickable links without messy text (which was there just to give something that i could turn to links to lead to the fullscreen images), however all is not yet quite right....


...when the window is large enough, the images in the grid show correctly, filling the screen. (hurrah!)

but squish the window too small, and the cells refuse to shrink further than 100% the image's original size,
and worse,
the "fill table to 100% of window" breaks, and a scrollbar appears.

i was wondering perhaps if i discovered the code to disable the scrollbar, that would force the table to remain constrained to the window's edge again. (would it?)

but i'm guessing this cant be the whole solution, given the behavior of the table as is.


what i'm going for, is a grid of 9 clickable images , that always scale to fit the window (or frame).

(tho of course, the skills here will be scalable/transferable to tables any number of cells, not limited to just a 3x3 table of 9 cells)


how can i make sure the table remains inside the window (no scrollbars!), and the images can scale down to smaller than original size?


if i've messed up some other way (like left some link pointing to my local files or something), do please let me know.

I have list of files in a folder which are to be displayed in html table.

Each file should be shown as follows
------------
| image1|
| |
------------
<image 1 file name>
------------
| image2|
| |
------------
< image 2 file name>

its image and name of the file below the image.

I am new to this html and needs help!

Thank you,
Krishna.

Hi, I am designing my first website by teaching myself HTML using google, etc, so I am very new to designing from scratch (without using Dreamweaver, etc). My webpage is not online yet, so I can't post a link - sorry!

First, I am using .png image files which look great in Google Chrome, but when I check my page in IE, the images look horrible - very pixelated. Why is that, and is there a way to fix them? My only thought would be to use a "smoothed out" image such as a .jpg, however that might make the problem even worse.

Second, I am using frames and in my main frame I'm using a table with text on the left column and an image on the right column. Again, in Google Chrome it looks great with the text at the very top of the frame/table, but in Firefox, there is tons of space at the top of the table which makes the text too "tall" for the window, and a scroll bar is necessary.

I hope I've explained this properly and would greatly appreciate your help - I have many more questions as well! Thanks so much,
Kristen

I will be brief in hoping that the issue does not require a thesis to properly fix. I'm dealing with tables within tables..within tables. In one instance, I have a 2x1 (row by column) table inside another table. So, we'll call the inside table "B" and the outside table "A". Table B is centered inside a column in Table A. I'm trying to maximize the space, but nearly nothing works. Setting Table B height=100% does nothing. The only thing that works is setting the height=N px, where N is a number. This is no good, as I want to the site to work on all resolutions. I want it to be proportional. How can I fix this?

Here's what I'm dealing with, visually:



Any help would be welcome. Thanks.

I would like to know if there is such a thing as a tag within a table, that can collapse if the next table within that prior one gets too big to center?

Here is an example of a part of my code:

Code:

      <table style="width:757; border-style:solid; border-width:thin; margin:0 0 15px 0">
       <tr><td class="spb-category" width="750" style="text-align:left;" colspan="3">Title of this category</td></tr>       
       <tr>
        <td valign="top" width="33%">
         <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=103">large size book title with author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=187">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=197">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
         </table>        </td>
        <td valign="top" width="33%">
         <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=101">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=188">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=120">Medium sized boot title</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
         </table>        </td>
        <td valign="top" width="33%">
         <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=102">a very long title of a book which includes the author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
         </table>
        </td>
       </tr>
      </table>

1. I want to center each column so that the first letter of each book title is lined-up, but that the longest title on each column has equal space on both left and right.

2. If you look at each column, the width is about 245px. With regard to the first book title in the first column, I have 50px that is extra, therefore I'd like to automatically add 25px to the front of each one of the books for that column.

3. On the second column, there is about 80px extra, therefore I'd like to auto-add 40px to the front of each book in that column.

My problem is that I don't want the column centered individually because then I will lose the straight line that I'd like each book to be on top of each other as it starts the line.

I tried:
style="margin-left:20px"
and
style="padding-left:20px"
but when the title got too long it would not auto-collapse the left side, I want it to collapse!

I want one tag that I can insert evenly on every section to get the push to the right an even amount of spaces for every book on each column.

If it comes down to it, I wouldn't mind sacrificing that each column gets auto aligned to what is necessary for its own column. So if I have to use one number, say 30px, for the whole webpage, then ok, I'd do it.

My problem is that sometimes the 30px empty filler space for the left, in order to push the title to the right, is not enough space for a very long title and it winds up sending half the title to the next line, which I don't want.

This code is a list of books that spans about 20 categories and about 400 book titles.

Thanks in advance for any help you might offer.

The table itself is working fine, but the size of each cell is not correct in Firefox.
Here is a screenshot of what is happening:

http://img35.imageshack.us/img35/1938/tabletroubles.gif


Here is the head of my page, the css for the table is he

HTML Code:

<style type="text/css">
#cat table {border:0px solid #333333; cell-padding:0; cell-spacing:0; align=center} 
#cat tr {align=center}
#cat td {font-size: 13px; font-family=tahoma; font-weight: bold; padding: 0px; border:0px solid #333333; align=center;} 
#cat td a {text-decoration: none; color:#757575; background-color: white; display:block; height=23; background-image: url(linkbg1.gif); align=center;} 
#cat td a:hover {background-color: #333333; font-weight: bold; text-decoration: none;color: #ffffff; background-image: url(linkbg2.gif); align=center;} 
</style>

and here is the table code, located in the body of the page:

HTML Code:

<div style="Height:53px; overflow:auto; width:900px; position:absolute; top:0; left:0">


<TABLE bgcolor=#333333 cellspacing=0; cellpadding=0;><tr><td>

<div id="cat"> 

<table width=900; cellpadding:0px; cellspacing:0px> 
<tr align=center> 
<td width=20%>
<font face=tahoma><a href="home.html">Home</a></font>
</td>
<td width=20%><center><font face=tahoma><a href="openings.html" target="_top">Openings</a></font></center></td> 
<td width=20%><center><font face=tahoma><a href="dance.html" target="_top">Dance</a></font></center></td> 
<td width=20%><center><font face=tahoma><a href="projects.html" target="_top">Projects</a></font></center></td> 
<td width=20%><center><font face=tahoma><a href="vocaloid.html" target="_top">Vocaloid</a></font></center></td> 
</tr> 
<tr> 
<td width=20%><center><font face=tahoma><a href="fanflashes.html" target="_top">Fanflashes</a></font></center></td> 
<td width=20%><center><font face=tahoma><a href="caramelldansen.html" target="_top">Caramelldansen</a></font></center></td> 
<td width=20%><center><font face=tahoma><a href="cosplay.html" target="_top">Cosplay</a></font></center></td>
<td width=20%><center><font face=tahoma><a href="endings.html" target="_top">Endings</a></center></td>
<td width=20%><center><font face=tahoma><a href="anime.html" target="_top">Anime Episodes</a></font></font></center></td> 
</tr> 
</table>


</div> 
</td></tr></table> 
</div>

A table is nested within another table. The table on the outside has no content, it is there to make a gray border around everything else.

If you look at the table in firefox & internet explorer, you'll see that in IE- the table is much thicker than in firefox. How can i make it so that the table in Firefox will have the same thickness as the one in IE? I could really use some help. Thanks!

Here is an image depicting the trouble I'm having:



I want to make a table, consisting of many cells. These cells would be fixed, and *very different* in sizes.

It's easy to make a no-space table when all the images are exactly the same size, but when you have images with a variety of sizes, the table doesn't fit perfectly.

Basically I want to create a collage of images with overlay text on each image. My idea was that I could create a table, and each cell (td) would have a background which is the image. Then I could just type in that cell, so the text would be over the image.
Then I'd do this for every one of my images, and a collage would be formed.

The problem is, the table makes large white spaces wherever the image sizes don't match!

How do I get rid of these spaces, or is there an entirely different code/approach I should be using?

Thanks!

Here is my current code:

HTML Code:

<html>
<head>
<style type="text/css">
table.nospace {
        padding: 0; margin: 0;
        border-collapse: collapse;
}
table.nospace tr {
        padding: 0; margin: 0;
}
table.nospace td {
        padding: 0; margin: 0;
}
</style>
</head>
<body>
<TABLE class="nospace" width="2040px" height="2000px" cellspacing="0px" cellpadding="0px">
<TR>

<td valign="top">
<table><tr>
<TD WIDTH="800px" HEIGHT="800px" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>text</FONT></h1>
</TD></tr></table>
</td>

<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="497" BACKGROUND="image" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>

<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="467" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>

</TR>
</TABLE>

</body>
</html>

Hello,
I am newbie, just has started my adventure with html.

I tried to make an easy static site, without any additional thingd, but it occured a problem.
1. I mean, as I put table in table
because I did know how to to id in different way, to make buttons on the left stay up while text on the right is moving- if I do normal table with 2columns and on the left lets say 5rows for buttons, on the right I unite all rows to make one big sort of box for contents, as I go down and try to write something morre, the rows from the letf were enlarging too
If the size of explorer or firefox is nor full screen, the text in contents is going away (like now in lycos server, where screen is not full, but "cut" by advertise)

2. I have highlighted buttons, but not always works, why? (i mean it works, but darker buttons are charging so slow- maybe it is so because i saved them in pgn instead in gif, and each one is about 50kb?)
-probably it is not this- because I have just changed into gif, and it is still the same

3. Another problem, as I post the site, I have notice, that in firefox I can not navigate with buttons, while in explorer yes, is it a fault of my coding, or of server where I put website?

Here I post my website:
http://members.lycos.co.uk/aniaacolgate/

Could someone take a look on the code, and will be so kind to correct me?
It is a basic easy site of very begginger

I just wanted to make a shape like this:
- top: a banner
- buttons in horizontal and vertical way
- under buttons: contents (sincerly would like to put frames, but do not know how to put them there, is on the left there r buttons

Thank you so much in advance for reply
Sorry for mistakes in language