|
HTML - Table Spacing Issue ...
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. Similar TutorialsHere 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 am having 2 issues with html coding, First off here ****HIT MUTE OR TURN VOLUME DOWN BEFORE CLICKING**** MY tables are too close together and i can not figure out how to space them out. Secondly on the first table (the hockey playoff bracket) I want to center the text but when i try to use the only align=center(or something like that i have it used in the table below) it clears out the next cell, removing the bracket. Can you help me fix these 2 issues please. Thank You tech-chef http://www.mattburnsey.com/test.htm I'm having trouble getting the tv and the mirror to stay connected. I should have room to widen the tv iframe a little more and I've tried cellspacing and cellpadding. What am I not trying that I should be? Thanks. I'm coding a simple HTML email in BBedit. Everything looks perfect and opens up fine in most email client, Gmail, yahoo, hotmail... all but Outlook 2007. Apparently Outlook doesn't like HTML because it keeps adding an extra space between sentences and extra spaces after all my <p> and <br /> tags. Does anyone know what code I have to add to fix this issue? I've searched the web for the past two days and can't find an a clear answer. Thanks! Hey everyone. I've sliced this psd, and uploaded all the images to a server, used border="0". When I view the html file standalone in a browser, it appears fine. When I go to insert it into my email program, the different slices at the bottom are all spaced out in weird configurations, and I cannot for the life of me figure out how to change this. I'm only a couple months in to html, so please excuse my ignorance if this is a simple fix. It's images 4-10 that are giving me problems. HTML Code: <html> <head> <title>Final Emailer</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- ImageReady Slices (Final Emailer.psd) --> <table id="Table_01" width="600" height="801" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="http://i1190.photobucket.com/albums/z451/LynchPrinting1/hig%20final%20sliced%20222/Final-Emailer_01.png"></td> </tr> <tr> <td colspan="5"> <img src="http://i1190.photobucket.com/albums/z451/LynchPrinting1/hig%20final%20sliced%20222/Final-Emailer_02.png"></td> </tr> <tr> <td rowspan="4"> <img src="http://i1190.photobucket.com/albums/z451/LynchPrinting1/hig%20final%20sliced%20222/Final-Emailer_03.png"></td> <td colspan="2"> <a href="mailto:info@shorehomeguide.com"><img src="http://i1190.photobucket.com/albums/z451/LynchPrinting1/hig%20final%20sliced%20222/Final-Emailer_04.png" border="0"></a></td> <td colspan="2" rowspan="2"> <img src="http://i1190.photobucket.com/albums/z451/LynchPrinting1/hig%20final%20sliced%20222/Final-Emailer_05.png"></td> </tr> <tr> <td colspan="2"> <img src="http://i1190.photobucket.com/albums/z451/LynchPrinting1/hig%20final%20sliced%20222/Final-Emailer_06.png"></td> </tr> <tr> <td rowspan="2"> <img src="http://i1190.photobucket.com/albums/z451/LynchPrinting1/hig%20final%20sliced%20222/Final-Emailer_07.png"></td> <td colspan="2"> <a href="http://lynchprintingllc.wordpress.com/publications/home-improvement-guide/" target="blank"><img src="http://i1190.photobucket.com/albums/z451/LynchPrinting1/hig%20final%20sliced%20222/Final-Emailer_08.png" border="0"></a></td> <td rowspan="2"> <img src="http://i1190.photobucket.com/albums/z451/LynchPrinting1/hig%20final%20sliced%20222/Final-Emailer_09.png"></td> </tr> <tr> <td colspan="2"> <img src="http://i1190.photobucket.com/albums/z451/LynchPrinting1/hig%20final%20sliced%20222/Final-Emailer_10.png"></td> </tr> <tr> </table> <!-- End ImageReady Slices --> </body> hey forum. first timer here with what i think should be a simple fix...but i'm frustrated and out of patience. can anyone tell me why i can't get rid of the blank space above "bedrooms" in the left column here? http://jimbwayne.com/kdtest/interiordesign.html same issue with the middle column, actually. i'm stumped. any intel would be much appreciated. thanks in advance. jim Hey All.. I have a table, with two rows, and in each row i have embeded a different SWF file. The swfs (i am hoping) should end up "joined" together so it looks like only 1 animation when viewing in a browser. However, when i view in both IE and FIREFOX i get spacing inbetween the 2swfs even after setting all spacing and cellpadding of the table to "0" and verticaly aligning the TD's correctly. Im not too sure why?...any feedback would be great! 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 Problem fixed 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... 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 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!! 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. 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, 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> 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 Hey all.. I have an image that is not lining up in IE6, but does fine in FF... Here's the code: Code: <table height="400px" bgcolor="#efefef" width="192px" cellpadding="0" cellspacing="0"><tr><td height="20%" > <img src="images/module_header.gif" height="23px" width="190px" align="top" /> <a href="linkgoeshere.html" border="0" /> </a> </td></tr> <tr> <td> <center> <img src="images/module_header.gif" height="23px" width="190px" /> <a href="http://bbsnews.net/bbsn_weather/current.php?config=&forecast=zandh& pands=28792&Submit=GO" title="Commercial Free Weather at BBSNews.net"> <img valign="top" src="http://bbsnews.net/bbsn_weather/current.php? forecast=hourly&pands=28792&config=png&alt=hwicc&hwvttf=BOGSTAND& daysonly=1&hwvbg=efefef&hwvtc=black&hwvusettf=1" border=0 width=166 height=77></a> </center> </td></tr></table> </td></td></table> And here's an image of what I mean.. The two module headers at the top should be to the right... above the other items. Help would be much appreciated.. this is the last time im gonna nag any1 over stupid stuff if i could just get some help on this last issue i wont bother the forum members with my nonsense anymore, i ordered 2 html books on amazon.com and a java book my site is 100% ready to go public except this 1 issue i have .... I cant get my tables to properly work arround my flash menu ? you can see here if you minimize the window the table lets my flash menu move into my text it use to not do this but i dont know what i did... http://www.freewebs.com/fallingrain11/outcome.html the code im using for this is below :: <tr><td bordercolor="#7FFC00"; align="left" Width="17%" valign="top"> <div id="object1" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2"> <a href="javascript:void" > <object cellpadding="100"; classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="143" height="395"> <param name="BGCOLOR" value="#0"> <param name=movie value="irawr-flash-menu-vertical.swf"> <param name=quality value=high> <embed src="irawr-flash-menu-vertical.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="143" height="395" bgcolor="#0"> </embed> </object> </a></div> Hello, I have a site that I am trying to work on and have an issue with a table that has been devided to allow for a sliced graphic and I cannot get the cells to come together even though I have put cellpadding and cellspacing to "0". you can view it he http://www.silkwebsolutions.com/malyshbeck/ it is the same in Firefox and IE. I have tried collapsing the border for table and td and nothing works. Any help would be greatly appreciated. Thanks, S |
|||||||