|
HTML - I Need Help Removing Spacing Between Images In A 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. Similar TutorialsHello everyone. I have been given to task to create a signature template. I am pretty new to html. I am trying to remove the vertical spacing in between the website link/phone number and job title. I have sat here playing around with it for about an hour without much luck. What can I do? --------------------------------- here is the code i am using --------------------------------- <p> <strong><font color="blue">_______________________________________________</font></strong> </p> <p style="MARGIN-RIGHT: 0px" dir="ltr"> <font color="gray" size="4" face="Arial Narrow"><font color="gray"><strong>Debra Scott</strong></font>   ; <strong><font size="2">Newmarket Chamber of Commerce</font></strong> <br /> <font size="2"><strong><em>President & Ceo & nbsp;   ; <font size="1">"Leading Businesses. Leading Communities"</font></em></strong></font><font size="4"> </font></font> </p> <font color="#808080" size="4" face="Arial Narrow"></font><font color="gray" size="4" face="Arial Narrow"> <font color="#000000" face="Times New Roman"></font><font color="#000000" face="Times New Roman"><a href="http://www.newmarketchamber.ca" target="_blank"><font color="gray" size="1" face="Arial Narrow"><strong><img class="floatLeft" style="WIDTH: 20px; HEIGHT: 19px" border="0" src="http://NewmarketONCOC.weblinkconnect.com/External/WCPages/WCWebContent/WebContentPage.aspx?ContentID=296" width="36" height="34" />Newmarket Chamber Website</strong></font></a><font size="3"><font color="gray" size="1" face="Arial Narrow"><strong> <img class="floatLeft" style="WIDTH: 24px; HEIGHT: 19px" border="0" src="http://NewmarketONCOC.weblinkconnect.com/External/WCPages/WCWebContent/WebContentPage.aspx?ContentID=299" width="36" height="34" />905 898-5900 ex. 223</strong></font></font></font> <br /> <font color="#d5d500" size="3" face="Times New Roman">_______________________________________________</font></font> </p> 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 Hi all, I'm having a problem with trying to get a table to have a tidy border. I want the border around one td cell to join the image in the cell above it, but because there is a border around the cell the border in the cell below isn't joining with the one above, there is a white gap between the two. This is the relevant code in the html file: <table class="core"> <tbody> <!-- menu --> <tr> <td width="200px"> <table class="menu"> <tbody> <tr> <td><img src="images\menuheading.jpg" alt="Mojo Menu" border="0"></td> </tr> <tr> <td class="menumain"> Link1<br> Link2<br> Link3<br> </td> </tr> </tbody> </table> </td> <!-- main body --> <td valign="top">Test Main</td> </tr> </tbody> </table> This is the code in the css file body { vertical-align: top; font-weight: normal; font-size: 12px; color: #000000; font-style: normal; font-family: Verdana; text-align: left; margin: 0; } table.headerfooter { background-color: #000066; vertical-align: top; text-align: left; border: #000066 0px solid; width: 100%; color: #FFFFFF; font-size: 10px; text-align: center; padding: 10px; } table.core { vertical-align: top; text-align: left; border: #000000 0px solid; background-color: #FFFFFF; width: 100%; padding: 10px; font-size: 12px; } table.menu { vertical-align: top; text-align: left; background-color: #FFFFFF; width: 100%; margin: 0px; padding: 0px; } td.menumain{ border-left: #000066 1px solid; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; border-right: #000066 1px solid; border-bottom: #000066 1px solid; margin: 0px; padding-top: 0px; } td.headerfooter-left { text-align: left; } td.headerfooter-right { font-size: 10px; text-align: right; } p.menubody{ color: #FFFFFF; padding: 4px; border-left: #000066 1px solid; border-right: #000066 1px solid; } Any help would be appreciated as I'm stumped! I have a problem with my banner. the images have gaps between them, so it looks tacky. Here is the Site: http://www.freewebs.com/jaceyanimation/sitetemplate.htm (I don't have any problems with the sidebar) Here is the code i made for it: HTML Code: <a href="http://www.freewebs.com/jaceyanimation/index.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%201.PNG" border="0" alt="Jacey"></a> <img src="http://www.freewebs.com/jaceyanimation/Part%202.PNG" border="0" alt=""><br> <a href="http://www.freewebs.com/jaceyanimation/index.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%203.PNG" border="0" alt="Home"></a> <a href="http://www.freewebs.com/jaceyanimation/about.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%204.PNG" border="0" alt="About"></a> <a href="http://www.freewebs.com/jaceyanimation/product.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%205.PNG" border="0" alt="Products"></a> <a href="http://www.freewebs.com/jaceyanimation/game.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%206.PNG" border="0" alt="Game"></a> <a href="http://www.freewebs.com/jaceyanimation/animation.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%207.PNG" border="0" alt="Animation"></a><br> <img src="http://www.freewebs.com/jaceyanimation/Part%208.PNG" border="0" alt=""> Can anyone suggest what i could do, or even better, fix the code? Hello I have an image in my html page, 'aigned left', and the text is pressed right againt the edge, almost no space at all. Now I have a border on the image, so if I play with "H space" it spaces with the border too, which is a pain. how can I put a space so the text isn't right against the border? If you say CSS, I know very little about css, so would need some guidance. Thank you. 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>
I've been working on a new project and I'm using tables to create a layout, I know it's not a good idea but I don't know CSS enough to use DIV's. But I have the table set up into 3 columns, and 2 rows. Top right row has images layered on top of each other for navigation... Everything works fine but the problem is there is spacing in between each of the images. They have no code in between or spacing, it is just messed up. If anyone has any idea help would be greatly appreciated. Hey guys. I am in the middle of making a new Mod for vbulletin and I ran into a bit of a snag. If you go to www.chosen-wow.com/forumlist.php, you will see at the top that there is a "Raid Progression" table. In that table, you will see quite a few pictures with spaces between all of them. How do I make the space between each image in a row go away? In other words, what code am I missing from the table code below? Code: <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr>
<td class="tcat" colspan="2">Chosen Raid Progression</td>
</tr>
</thead>
<tbody>
<tr>
<td class="alt1" width="50%">
<center><div class="progress_title">Karazhan</div>
<img src="progression_mod/kz_1_dead.jpg" width="53" height="71">
<img src="progression_mod/kz_2_dead.jpg" width="48" height="71">
<img src="progression_mod/kz_3_dead.jpg" width="48" height="71">
<img src="progression_mod/kz_4_dead.jpg" width="48" height="71">
<img src="progression_mod/kz_5_dead.jpg" width="47" height="71">
<img src="progression_mod/kz_6_dead.jpg" width="48" height="71">
<img src="progression_mod/kz_7_dead.jpg" width="47" height="71">
<img src="progression_mod/kz_8_dead.jpg" width="47" height="71">
<img src="progression_mod/kz_9_dead.jpg" width="62" height="71">
<div class="progress_title">Serpentshrine Cavern</div>
<img src="progression_mod/ssc_1_alive.jpg" width="53" height="71">
<img src="progression_mod/ssc_2_alive.jpg" width="48" height="71">
<img src="progression_mod/ssc_3_alive.jpg" width="48" height="71">
<img src="progression_mod/ssc_4_alive.jpg" width="48" height="71">
<img src="progression_mod/ssc_5_alive.jpg" width="47" height="71">
<img src="progression_mod/ssc_6_alive.jpg" width="48" height="71">
<img src="progression_mod/ssc_7_bkg.jpg" width="47" height="71">
<img src="progression_mod/ssc_8_bkg.jpg" width="47" height="71">
<img src="progression_mod/ssc_9_bkg.jpg" width="62" height="71">
<div class="progress_title">Mount Hyjal</div>
<img src="progression_mod/mh_1_alive.jpg" width="53" height="71">
<img src="progression_mod/mh_2_alive.jpg" width="48" height="71">
<img src="progression_mod/mh_3_alive.jpg" width="48" height="71">
<img src="progression_mod/mh_4_alive.jpg" width="48" height="71">
<img src="progression_mod/mh_5_alive.jpg" width="47" height="71">
<img src="progression_mod/mh_6_bkg.jpg" width="48" height="71">
<img src="progression_mod/mh_7_bkg.jpg" width="47" height="71">
<img src="progression_mod/mh_8_bkg.jpg" width="47" height="71">
<img src="progression_mod/mh_9_bkg.jpg" width="62" height="71">
</center>
<td class="alt1" width="50%">
<center><div class="progress_title">Outdoor & World</div>
<img src="progression_mod/wld_1_dead.jpg" width="53" height="71" border="0">
<img src="progression_mod/wld_2_dead.jpg" width="48" height="71" border="0">
<img src="progression_mod/wld_3_alive.jpg" width="48" height="71">
<img src="progression_mod/wld_4_alive.jpg" width="48" height="71">
<img src="progression_mod/wld_5_alive.jpg" width="47" height="71">
<img src="progression_mod/wld_6_bkg.jpg" width="48" height="71">
<img src="progression_mod/wld_7_bkg.jpg" width="47" height="71">
<img src="progression_mod/wld_8_bkg.jpg" width="47" height="71">
<img src="progression_mod/wld_9_bkg.jpg" width="62" height="71">
<div class="progress_title">Tempest Keep</div>
<img src="progression_mod/tk_1_dead.jpg" width="53" height="71">
<img src="progression_mod/tk_2_alive.jpg" width="48" height="71">
<img src="progression_mod/tk_3_alive.jpg" width="48" height="71">
<img src="progression_mod/tk_4_alive.jpg" width="48" height="71">
<img src="progression_mod/tk_5_bkg.jpg" width="47" height="71">
<img src="progression_mod/tk_6_bkg.jpg" width="48" height="71">
<img src="progression_mod/tk_7_bkg.jpg" width="47" height="71">
<img src="progression_mod/tk_8_bkg.jpg" width="47" height="71">
<img src="progression_mod/tk_9_bkg.jpg" width="62" height="71">
<div class="progress_title">Black Temple</div>
<img src="progression_mod/bt_1_alive.jpg" width="53" height="71">
<img src="progression_mod/bt_2_alive.jpg" width="48" height="71">
<img src="progression_mod/bt_3_alive.jpg" width="48" height="71">
<img src="progression_mod/bt_4_alive.jpg" width="48" height="71">
<img src="progression_mod/bt_5_alive.jpg" width="47" height="71">
<img src="progression_mod/bt_6_alive.jpg" width="48" height="71">
<img src="progression_mod/bt_7_alive.jpg" width="47" height="71">
<img src="progression_mod/bt_8_alive.jpg" width="47" height="71">
<img src="progression_mod/bt_9_alive.jpg" width="62" height="71">
</center>
</td>
</tr>
</tbody>
</table>
Thanks in advance. Hi everyone Newbie here and nearly finished my first site - phew! I have one quick question - you know how a browser shows an outline box of the shape of an image before the image downloads, well, is there any way to get rid of it? This box disappears once the image has loaded so it is nothing to do with the "border" tag and all of my images have the height, width border="0" and alt tags completed. (I use a lot of images on the my site as I am a photographer and it looks really ugly while it is waiting for the images on a slow connection) Am happy to use html, css, java... Thanks for any help. Tre I'm sorry I can't provide a url because I'm not online yet, but here is my problem. I am trying to post a series of images with text descriptions of each image, but I can't seem to align the images so they are spaced evenly. (Basically like tabs in between the photos) I have tried the following things: <img src="party23.jpg" width="150" height="150" hspace=50>Blowing out candles <img src="party24.jpg" width="150" height="150">The cake<br> what I got was the pictures separated from the text - and the next picture's placement spaced from the end of the 1st picture's text, instead of from the first picture. I have also tried this: <img src="party23.jpg" width="150" height="150">Blowing out candles <center><img src="party24.jpg" width="150" height="150">The cake</center><br> what I got was the first picture & text was fine but the 2nd was centered on a new line instead of to the right of the first picture. Then I tried: <img src="party23.jpg" width="150" height="150">Blowing out candles <img src="party24.jpg" width="150" height="150">The cake<br> I might be able to get this to work...but I would have to count the spaces from the end of each text until the space where the photo needs to go so I know how many  's to insert.. and since all the text captions are different, that would be really time-consuming since there are alot of photos. Anyone able to help me find an easier way?? Any help greatly appreciated!! I have had this problem on almost all the websites I've made and I'm too picky to let it go... When I make the navigation images/buttons for a website, I set the border to zero as usual and link each image to its respective page. But, when I click on the image to take me where it's supposed to, this pesky dotted border appears around the edge of the image after it has been clicked and it remains there until I click on something else on that page. (This also happens to text links when clicked, but I'm not too worried about the text links.) For the websites I've made that go to an entirely new page after an image link is clicked, the dotted line appears around the linked image after it's clicked and before the next page has loaded, but then after the new page loads the dotted line is gone. But, for websites I have built that utilize frames, because the new page that loads is in an iframe, and because the page the navigation buttons are located on never changes, the dotted border stays around the image after its been clicked and, like I mentioned earlier, doesn't go away until I click on something else on that same page. An example of this can be seen when you click the images in the navigation column along the left side of a website I built located at the following URL: http://www.djprogress1.com/ This border problem could be specific to my website browser (I use Firefox), but I am not sure. And the border could be added entirely by the browser and there may be no way to get rid of it through coding, but again, I am not sure of this. So, does anyone know if anything can be done to fix this or am I stuck with these dotted borders? Thanks, Jase Problem fixed Okay so me and a friend are making a website for a highschool FBLA contest, and we are having an error with our template... so here is what it is in a nut shell this is what we want it to look like no spaces on the top or bottoms of the TVs THIS is what it looks like on the web, a big ole fat spacing in the table above and below the TVs that we do not want... we have tried a lot of things and can't figure it out...any suggestions? -thanks Legend hi guys... here's a layout i'm working on and i just can't seem to be able to get rid of the spacing on the bottom of the cells where i have a link with my rollover images... here's the url: http://geocities.com/antigatez/school/index.html any help would be appreciated... there is a problem can go through the URL below and open it in IE and any other browser like mozilla or chrome etc the mid section is not working properly it seems in IE as more spaced while in mozilla etc seems less spaced how to solve this issue. www.ims-sc.org please fix the peoblem. Can anyone tell me why? Not sure what is going on here... Here is a link to the development site where you can see the problem I am having (I did not design it, but I am in charge of changing to html). http://www.vismarkgroup.com/dev/Kyrie/about.html Thanks!! Hi guys & girls, I've got a table nested within a table row. There's a small gap I can't close at the top of the table (see image, attached). Within the table I have cell padding, but it's much more dramatic than I want at the top and bottom. Is there any way to fix these problems with HTML and inline CSS (it's going to be an HTML e-mail). This is for a client and due tomorrow, so any help would be awesome. Thank you. HTML Code: <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="line-height:16px;">
<table width="600" border="0" bordercolor="#000000" cellspacing="0" cellpadding="0" style="border-top:1px solid #000000; border-left:1px solid #000000; border-right:1px solid #000000; border-bottom:1px solid #000000;">
<tr>
<td><img src="images/ACP9040057_email_ClinicalPsychologist_01.jpg" width="600" height="88" alt="For What Matters Most"></td>
</tr>
<tr>
<td><table width="600" border="0" cellspacing="0" cellpadding="0" style="padding:0; border:0">
<tr>
<td align="center" valign="top"><table width="570" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="359" align="left" valign="top"><p><font face="Arial, Helvetica, sans-serif" style="font-size:12px; text-align:left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue porta tincidunt. Nullam et turpis lorem, sagittis adipiscing nunc. In orci orci, iaculis et sollicitudin ac, adipiscing vel magna. Nullam et orci in dui tristique ultricies. Donec ligula turpis, blandit eget egestas sed, semper eu elit. Nulla in dolor sapien. Suspendisse id nisi porttitor purus ullamcorper dictum. Mauris posuere libero massa.</font></p></td>
<td width="171" align="center" valign="middle"><table width="140" border="0" cellspacing="0" cellpadding="15">
<tr>
<td align="left" bgcolor="#b1c1c9"><font face="Arial, Helvetica, sans-serif" style="font-size:12px; font-weight:bold; line-height:16px; text-align:left;">Qualifications:</font><br />
<font face="Arial, Helvetica, sans-serif" style="font-size:12px; font-weight:normal; text-align:left;">To qualify you must be a U.S. citizen age 18–39 and enrolled in the United States or Puerto Rico.</font></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top"><font face="Arial, Helvetica, sans-serif" style="font-size:12px; font-weight:normal; text-align:left;">Give yourself the opportunity to concentrate on your education instead of the worries of accumulating debt. <a href="#">Click here</a> now to find out more.</font></td>
<td align="center" valign="top"><a href="#"><img src="images/go_button.jpg" width="171" height="60" alt="Go Button" border="0"></a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr><td><img src="images/ACP9040057_email_ClinicalPsychologist_05.jpg" width="600" height="9" alt=""></td></tr>
<tr><td align="center" valign="top" style="padding:0;"><table width="570" border="0" vspace="0" align="center" cellpadding="10" cellspacing="0" style="line-height:10px; text-align:left; display:block; border-collapse: collapse;">
<tr><td align="left" valign="top"><p><font face="Arial, Helvetica, sans-serif" style="font-size:10px; line-height:10px; text-align:left;">If you no longer wish to receive email communication from the U.S. Air Force, please click <a href="#" target="_blank">here</a>.
<font face="Arial, Helvetica, sans-serif" style="font-size:10px; line-height:10px; text-align:left;">Your address will be removed from this email list.</font><br /><br />
Or send a request to:<br />
ddd<br />
ddd<br />
ddd</font></p></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Hi, I have a fine gray line around the logo. This is not the border of the table it’s the gray bgcolor. I and other HTMLers try to find the reason of this bug but failed. Can you help? You see the style.css and try to find the reason (please do not give vague answers, please look in the code and in the css) tnx Hi, Thanks in advance for your help. I'm doing a web page that I would like to be viewed on 1024 resolutions without a horizontal scrollbar. It will contain images that are exactly 980px wide. The problem is that with ie7, as soon as it contains a div or a table, no matter what I do to try to remove all padding,margins,etc.. it adds 2px for each element (I guess 1px for each side). Below is some html as an example of my problem, where I've tried to remove everything I can think of... this works fine in firefox 3 <body style="width:998px;margin-top:0;margin-left:0;margin-right:0;padding:0;"> <div style="width:100%;textalign:center"><table border="0" cellspacing="0" cellpadding="0" style="width:998px;border-collapse:collapse;padding:0;margin:0;border:0;"><tr style="padding:0;margin:0;border:0;"><td style="padding:0;margin:0;border:0;">sdfsdfd</tr></td></table><div style="width:100%> </body> Can anyone help me out? I've set up a test site for a project where I have a scrollable table within an iFrame. Techincally, its an iFrame within an iFrame which gets you to a scrollable table I also added an auto-scroll with anchor-links. Everything finally works, but I really want to remove the horizontal-scroll bar that shows up, while keeping the vertical-scroll bar. (Upon testing, I found without the vertical-scroll bar, the anchor-links and auto-scroll don't work correctly.) here's the link to the test site: http://www.thegrandamerican.com/ here's the line of code I think is the correct place to make corrections: <iframe id="myiframe" name="myiframe" src="oprah june 09_news.htm" width="900" height="475" scrolling="yes" overflow-y: scroll></iframe> The hierarchy works as follows: index.htm > spotlight_news.htm > oprah june 09_news.htm The reason for all the iframes is to have elements on the higher pages that will stay in place, such as a music player and dynamic menu bar. other notes and associated files (for the auto scroll) a smooth-src-comments.js smooth.pack.js Thanks. - J |
|||||||