|
HTML - Table Spacing Error! (help)
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 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>
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. 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... Problem fixed 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 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. 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, 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 hi, i want to let user edit their 'claim' with this page. so i want to call out the data from database but got problem with this highlighted code and i try to solve it but can't. anyone can help me? <!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>KEV Claim</title> <link rel="stylesheet" href="http://www.zapatec.com/website/main/../ajax/zpcal/themes/winter.css" /> <style type="text/css"> <!-- .style8 {font-family: Arial; font-weight: bold; font-size: 14px; } body { background-color: #FFFF99; } .style12 {font-family: Arial; font-weight: bold; font-size: 12px; color: #FF3300; } .style13 { font-family: Arial; font-weight: bold; } --> </style> <script type="text/javascript" src="http://www.zapatec.com/website/main/../ajax/zpcal/../utils/zapatec.js"></script> <script type="text/javascript" src="http://www.zapatec.com/website/main/../ajax/zpcal/src/calendar.js"></script> <!-- Loading language definition file --> <script type="text/javascript" src="http://www.zapatec.com/website/main/../ajax/zpcal/lang/calendar-en.js"></script> </head> <?php $id = $_GET['id']; $host = 'localhost'; $user = 'root'; $password = 'admin'; $dbase = 'claim'; $dblink = mysql_connect($host,$user,$password); mysql_select_db($dbase,$dblink); $query = "SELECT start_date,end_date,staff_no,details,amount,gl_code,acc_no FROM report WHERE id=$id "; $result = mysql_query($query, $dblink); while($myrow = mysql_fetch_row($result)) { $start_date = $myrow[0]; $end_date = $myrow[1]; $staff_no = $myrow[2]; $details = $myrow[3]; $amount = $myrow[4]; $gl_code = $myrow[5]; $acc_no=$myrow[6]; } ?> <body> <p class="style8"> </p> <form id="form1" name="form1" method="post" action="edit.php?id=<?php echo $id ?>"> <label></label> <p> <label></label> <span class="style13">KEV Claim </span></p> <table width="516" height="138" border="0"> <tr> <td><span class="style12">Start Date </span></td> <td><input type="text" id="start_date" name="start_date" value=<?php echo $start_date ?> /> <button id="trigger">Calendar</button> <script type="text/javascript">//<![CDATA[ Zapatec.Calendar.setup({ firstDay : 1, electric : false, inputField : "start_date", button : "trigger", ifFormat : "%Y-%m-%d", daFormat : "%Y-%m-%d" }); //]]></script> </td> </tr> <tr> <td><span class="style12">End Date </span> </td> <td><input name="end_date" type="text" id="end_date" value=<?php echo $end_date ?> /> <button id="trigger1">Calendar</button> <script type="text/javascript">//<![CDATA[ Zapatec.Calendar.setup({ firstDay : 1, electric : false, inputField : "end_date", button : "trigger1", ifFormat : "%Y-%m-%d", daFormat : "%Y-%m-%d" }); //]]></script> </td> </tr> <tr> <td class="style12"><p>Staff No. </p></td> <td><input name="staff_no" type="text" id="staff_no" value=<?php echo $staff_no ?>/></td> </tr> <tr> <td class="style12">Details</td> <td><textarea name="details" id="details"><?php echo $details ?></textarea></td> </tr> <tr> <td><span class="style12"> <label>Amount</label> </span></td> <td><input name="amount" type="text" id="amount" value=<?php echo $amount ?> /></td> </tr> <tr> <td><span class="style12"> <label>GL Code </label> </span></td> <td><select name="gl_code"> <option>45725 Mileage Claim</option> <option>45730 Parking & Toll Charges</option> <option>45740 Airfares - Local Overseas</option> <option>45750 Taxi - Local & Overseas</option> <option>45780 Staff Travel Costs - Hotels</option> <option>45790 Staff Travel Costs - Subsistence</option> <option>45800 Special Mileage Claims</option> </select> </td> </tr> <tr> <td class="style12">Bank Account No. </td> <td><input name="acc_no" type="text" id="acc_no" value=<?php echo $acc_no ?> /></td> </tr> </table> <p> <label> <input type="submit" name="Submit" value="Update" /> </label> </p> </form> <p> </p> </body> </html> Hi Everyone: I'm having difficulty getting a table row height of "1" to display as only one pixel in height. Please see the attached files for reference. The JPG is what I want it to look like, and the index.txt file is the HTML I've currently setup that is not working. The table should have four white strips. On the right side, this is above and below the large black box, as well as under the green box. On the left side, this is between the light green box and the slightly darker green box. As you can see, all of these white strips appear to be larger than one pixel in height, and I'm not understanding why. Can anyone please explain to me why this is occurring, and what I can do to fix it? Also, once fixed, will I be able to merge cells of the same color (i.e make the big black box one merged cell, the below green box one merged cell, etc...)? Any help will be greatly appreciated. Thanks! Philip Hi I am very new to website design and html code therefore I cannot spot what may be a very simple error in my webpage code. The page in question is http://www.stephanieholmes.co.uk/videos.html I have made the page in dreamweaver. The content is layed out in a table 7x8 with the two outer column's rows merged to contain the left and right floral border. However, in Firefox the centre columns are displaced vertically, but this problem does not occur in IE which confuses me. Please help! Hello Everyone: I am a novice HTML user - I use it to create a Help file (for an MS/Access database), using HTML Help Workshop. My question concerns line spacing, using the following code: <b><u>Server:</u></b> <ul> <li>First List item...</li> </ul> Using this code, there will be a blank line between "Server" and "First List item...". Is it possible to eliminate this line and have the list start in the next line after "Server"? Thanks. . . Tony N. Alright i'm having a little trouble. When I add stuff to the side boxes, they are farther down then i want them to be, here is a pic: I'm wanting to move it up some, but I don't know how, I have been trying for a long time though. Here is the HTML Code: Code: <div class="box2 margin1"> <div class="tail-right"> <div class="corner-right-bottom"> <div class="corner-left-bottom"> <div class="corner-right-top"> <div class="corner-left-top"> <div class="indent"> <h3><span><span>Partners</span></span></h3> <div class="indent2"> <center><a href="http://www.elitepvpers.de"><img src="http://img230.imageshack.us/img230/2364/31421454.png" border="0"></a></center> <center><a href="http://www.4botters.com"><img src="http://img814.imageshack.us/img814/2599/88029646.png" border="0"></a></center> <div id="vent"><div style="font-weight: bold; font-size: 12px; text-align: center;"><a href="ventrilo://94.75.238.76:4696/servername=EQGVent" style="text-decoration: none;"></a></div></div> </div> </div> </div> </div> </div> </div> </div> </div> Here is the CSS: Code: .box2 {background:#bec2c5 url(images/box2-bottom-tail.gif) bottom repeat-x;}
.box2 .tail-right {background:url(images/box2-right-tail.gif) right repeat-y;}
.box2 .corner-right-bottom {background:url(images/box2-corner-right-bottom.gif) right bottom no-repeat;}
.box2 .corner-left-bottom {background:url(images/box2-corner-left-bottom.gif) left bottom no-repeat;}
.box2 .corner-right-top {background:url(images/box2-corner-right-top.gif) right top no-repeat;}
.box2 .corner-left-top {background:url(images/box2-corner-left-top.gif) left top no-repeat; width:100%;}
.box2 .indent {padding:4px 6px 6px 4px;}
.box2 .indent2 {padding:15px 12px 0px 6px;}
Any help will be greatly appreciated. Thank you. Hey folks... I've searched and searched for an answer for this, but with no luck. Probably because I don't know how to exactly describe my problem. Anyway, the issue is my page is displaying differently in IE and Firefox (surprise!). The spacing between the top image and the body divs are different. I'm not sure if it's an HTML issue or a CSS one. The page in question is: http://www.project-43.com/ The CSS file is he http://project-43.com/images/style.css It displays the way I want it too in Firefox. If you look at it in IE, you'll see the top image looks short, but that is because the spacing between the left menu area and the body on the right is too big. I appreciate any pointers that you might be able to offer. Thanks! Ok so I'm learning along the way by playing around with what my web designer started. I'm having trouble working out what part of the html does the spacing between my text and the input box. Here's what I'm stuck at: You can see how where it says 'click for more fonts' the box isn't in line with the others. Any help would be much appreciated.... I'm starting to go cross-eyed lol. So, I am working on a website for the final project for one of my classes, and while it looks fine in Firefox and Safari, there is some funky spacing in my divs/table set up with my inline frame in IE: (I have IE 7, but I would like this to work in all versions as I'm not sure what browser my professor has) http://grandmas.host-ed.net/ in IE, you will see there is a space below the top banner and another one between the footer and the border... how can I get rid of these? Here is my code (image map removed b/c it's long and unneeded for my question) Code: <html> <head> <title>Grandma Mae's Country Naturals</title> </head> <body background="bg.jpg" bgproperties="fixed"> <center> <table Cellpadding="0" Cellspacing="0" border="0"> <tr><td> <div style="border: solid 0 #a34c30; border-left-width:3px; border-right-width:3px; border-top-width:3px; padding-left:0ex padding-right:0ex padding-top:0ex padding-bottom:0ex"> <img src="gcn_nav2.jpg" usemap="#mymap" border="0"> </div></td></tr> <tr><td> <div style="border: solid 0 #a34c30; border-left-width:3px; border-right-width:3px; padding-left:0ex padding-right:0ex padding-top:0ex padding-bottom:0ex"> <IFRAME name="inlineframe" src="home.html" width=854 height=350 frameborder="0"></IFRAME> </div></td></tr> <tr><td> <div style="border: solid 0 #a34c30; border-left-width:3px; border-right-width:3px; border-bottom-width:3px; padding-left:0ex padding-right:0ex padding-bottom:0ex padding-top:0ex"> <img src="footer2.jpg"> </div> </td></tr></table> <font color="FFCC99" size="1" face="Georgia, Times New Roman, Times, serif"><b>This site is not affiliated with Grandma Mae's County Naturals</b></font> </center> </map> </body> </html> It's kind of improvised and I am no html expert so perhaps there is a better way to get the look I was going for? Also, I know there is some extra/unneeded code there, but it's all stuff I added when trying to fix the spacing (and it didn't work) and was too lazy to take away. haha Thanks a ton, Nathalie I want to remove the space between the top frame and the main frame, but the div on the main frame doesn't start on the top of the frame... http://black1c3.awardspace.com how can i do it?? Hey, How can I get rid of the space in between these 2 tables (see image), I don't know whether it's spacing or padding or something else. I've tried a few things but they didn't work. Any suggestions? |
|||||||