|
HTML - Trouble With Table Spacing...
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... Similar Tutorialsneed the wrap to touch the bottom of the browser, not just the top... I've looked it over and I must be looking over something... a new set of eyes should do the trick, thanks to anyone who helps! http://www.pzfantasyfootball.com html for homepage: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>PZ Productions Fantasy Football</title> <link href="style.css" type="text/css" rel="stylesheet" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <meta name="keywords" content="fantasy football, nfl, sports, drafts, drafting, draft, rankings, awards, standings, leagues, players, teams, starters, " /> <meta name="description" content="Fantasy site made to help maximize your fantasy season as well as enhance your fantasy football experience." /> <meta http-equiv="Content-Language" content="EN" /> <meta name="author" content="PZ" /> <meta name="distribution" content="Global" /> <meta name="copyright" content="All content and images are copyright PZ Productions." /> <meta name="robots" content="FOLLOW,INDEX" /> </head> <body> <div id="wrap" class="cfx"> <div id="mid"> <div id="navigation"> <ul> <li>» <a href="index.shtml">HOME</a></li> <li>» <a href="latestnews.shtml">LATEST NEWS</a></li> <li>» <a href="fantasyinfo.shtml">FANTASY INFO</a></li> <li>» <a href="nflnews.shtml">NFL NEWS</a></li> <li>» <a href="chat.shtml">CHATROOM</a></li> <li>» <a href="helpfulsites.shtml">HELPFUL SITES</a></li> </ul> </div> <div id="sitenews"> <div class="newstext">PZ Productions fantasy football is a personal site used to keep track and add more depth to the fantasy season of leagues held by myself and my friends. As you can see there are two leagues... however they're not directly connected. This site will provide comparisons between the two leagues, but in no way are the leagues going to intertwine. Along with standings, depth charts, records, and the such for the fantasy leagues, I'll try to offer week by week analysis of the upcoming games, touch up on the latest football news, and basically anything else impacting the fantasy football season. I hope you all enjoy the new look and feel of the site. <p /><strong>Hot Info - Yahoo! Opens Fantasy Football Registration</strong> <br />Yahoo! has finally opened their fantasy football registration so let's get moving! It's time to hit up some drafts and see how the early goings get going. I love doing as many drafts as possible in order to give you all the best info on who's going when! In the next week come back to check up on players picked too early and players picked too late. You'll know exactly what to do come draft day, just stick with us! </div> </div> <div id="sitepoll"><div class="feedtext"> <script src="http://feeds.feedburner.com/pzpff?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/pzpff"></a><br/>Powered by FeedBurner</p> </noscript> </div></div> </div> <div id="bot"> <div id="fantasy"> <table> <tr> <td><a href="/test/mwffl/standings.shtml">STANDINGS</a></td> <td><a href="#">SCORES</a></td> </tr><tr> <td><a href="#">RECORDS</a></td> <td><a href="#">SCHEDULE</a></td> </tr><tr> <td><a href="#">TEAMS</a></td> <td><a href="#">AWARDS</a></td> </tr> <tr> <td colspan="2"><a href="mwffl">OFFICIAL PAGE</a></td> </tr> </table> </div> <div id="gamers"> <table> <tr> <td><a href="#">STANDINGS</a></td> <td><a href="#">SCORES</a></td> </tr><tr> <td><a href="#">RECORDS</a></td> <td><a href="#">SCHEDULE</a></td> </tr><tr> <td><a href="#">TEAMS</a></td> <td><a href="#">AWARDS</a></td> </tr> <tr> <td colspan="2"><a href="#">OFFICIAL PAGE</a></td> </tr> </table> </div> <div id="fansites"> <table> <tr> <td><a href="#">STANDINGS</a></td> </tr><tr> <td><a href="#">RECORDS</a></td> </tr><tr> <td><a href="#">AWARDS</a></td> </tr><tr> <td><a href="#">OFFICIAL PAGE</a></td> </tr> </table> </div> </div> </div> </body> </html> The CSS: Code: * {margin: 0; padding: 0;}
p {margin-top: 10px}
html, body {
margin: 0;
padding: 0;
font: normal 12px "Century Gothic", tahoma, arial, trebuchet ms, verdana, times new roman;
color: #000;
background-color: #000;
}
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}
.justify {text-align: justify;}
.border {border: 1px solid #000;}
#wrap {
width: 1000px;
margin: 0 auto;
padding: 0;
background-color: #fff;
}
#top {
width: 100%;
height: 150px;
float: left;
}
#header {
width: 100%;
height: 150px;
background-image: url(/images/headertitle.jpg);
background-repeat: no-repeat;
z-index: 2;
}
#tomlinson {
width: 100%;
height: 149px;
text-align: right;
z-index: 1;
}
#mid {
width: 100%;
height: 400px;
float: left;
}
#navigation {
width: 200px;
height: 100%;
float: left;
background-image: url(/images/leftnav.gif);
background-repeat: no-repeat;
font-family: "Century Gothic", tahoma, arial;
}
#navigation ul {
margin: 60px 0 0 20px;
list-style-type: none;
}
#navigation li {
height: 20px;
font-size: 14px;
}
#navigation a, #navigation a:visited {
color: #000;
text-decoration: none;
}
#navigation a:active, #navigation a:hover {
color: #11628d;
text-decoration: none;
}
#sitenews {
width: 600px;
height: 400px;
background-image: url(/images/content.gif);
background-repeat: no-repeat;
float: left;
}
#chat {
width: 600px;
height: 400px;
background-image: url(/images/chatcontent.gif);
background-repeat: no-repeat;
float: left;
}
#sitenews ul {
margin: 10px 0 10px 20px;
}
.newstext {
width: 560px;
height: 265px;
margin: 60px 0 0 20px;
font-size: 12px;
color: #000;
line-height: 16px;
}
.infobox {
width: 164px;
height: 230px;
float: left;
border: 1px solid #ccc;
margin-left: 6px;
padding: 6px;
text-align: center;
background-image: url(/images/lightsilverbg.gif);
overflow: auto;
}
#sitepoll {
width: 200px;
height: 400px;
float: left;
background-image: url(/images/rightnav.gif);
background-repeat: no-repeat;
}
.feedtext {
width: 180px;
margin-top: 60px;
font-family: "Century Gothic", tahoma, arial;
text-align: center;
}
.feedtext a, .feedtext a:visited, .feedtext a:active {
color: #11628d;
text-decoration: none;
}
.feedtext a:hover {
color: #11628d;
text-decoration: underline;
}
.feedtext li {
padding-bottom: 3px;
text-align: left;
}
.feedtext ul {
list-style-type: none;
margin-left: 20px;
}
#bot {
width: 100%;
height: 250px;
float: left;
}
#fantasy {
width: 333px;
height: 100%;
float: left;
background-image: url(/images/wolfpacsec.gif);
background-repeat: no-repeat;
font-family: "Century Gothic", tahoma, arial;
}
#fantasy a, #fantasy a:visited {
color: #000;
text-decoration: none;
}
#fantasy a:active, #fantasy a:hover {
color: #a20707;
text-decoration: none;
}
#fantasy td {
text-align: center;
height: 30px;
font-size: 14px;
}
#fantasy table {
margin: 68px auto;
height: 120px;
width: 300px;
}
#gamers {
width: 333px;
height: 100%;
float: left;
background-image: url(/images/pzpfflsec.gif);
background-repeat: no-repeat;
font-family: "Century Gothic", tahoma, arial;
}
#gamers a, #gamers a:visited {
color: #000;
text-decoration: none;
}
#gamers a:active, #gamers a:hover {
color: #079017;
text-decoration: none;
}
#gamers td {
text-align: center;
height: 30px;
font-size: 14px;
}
#gamers table {
margin: 68px auto;
height: 120px;
width: 300px;
}
#fansites {
width: 333px;
height: 100%;
float: left;
background-image: url(/images/globalsec.gif);
background-repeat: no-repeat;
font-family: "Century Gothic", tahoma, arial;
}
#fansites a, #fansites a:visited {
color: #000;
text-decoration: none;
}
#fansites a:active, #fansites a:hover {
color: #90076e;
text-decoration: none;
}
#fansites td {
text-align: center;
height: 30px;
font-size: 14px;
}
#fansites table {
margin: 68px auto;
height: 120px;
width: 300px;
}
.cfx:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#footer {
width: 100%;
height: 50px;
float: left;
margin: 0;
padding: 0;
}
.cfx {display: inline-table;}
* html .cfx {height: 1%;}
.cfx {display: block;}
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>
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 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. Problem fixed 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>
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, 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> 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'm in a beginners HTML course. I need to put an image next to a table on the same line. From what I've read, I think I have to make a table within a table to make this work. I realize CSS would be better but it's an HTML class and this is what the teacher wants. <table border="1"> <tr> <td>Link</td> <td>Link</td> <td>Link</td> </tr> <tr> <td>Name</td> <td>Name</td> <td>Name</td> </tr> </table> Now I need the image on the right side of that table. How would that work? If I align it to the right, it goes on the right side of the page. I need it next to the table, with only a tiny space in between. Any help? I also need the table to stay exactly the same. When I tried different ways of putting the image inside the table it just screwed up the sizing of the table. Thanks. So I'm more of a hardware/SEO/PPC guy, but lately I've been doing some script for a small business site, and have gotten stuck. the site im working on is: http://www.theskincareclinic.com Im trying to get the bottom icons to site closer together, but with the current table, I can't seem to do it. I tried some java nav menu solutions, but with no success. I want the menu items to not stick out further than the flash object, but I also cannot have any kind of graphic filler, as the right column of the page will have content. if anyone has a solution, whether it be html or a java megamenu, please help me. here is the current page code: Code: <table width="898" border="0" align="center" cellpadding="0" cellspacing="0" class="TopTable2">
<tr>
<td width="4" height="450" bgcolor="91B4DF"> </td>
<td bgcolor="#FFFFFF"><table width="890" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top" class="flash">
<div align="left">
<script language="JavaScript">
document.write('<EMBED src="/flash/flash.swf" quality="high" wmode="transparent" WIDTH="531" HEIGHT="316" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">');
document.write('</EMBED>'); </script><script type="text/javascript" src="/fixit.js"></script>
<br>
</div>
<div align="left" class="call-us"><img src="images_/callus.gif" width="531" height="41"></div>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" class="home-list">
<tr>
<td width="185"><ul>
<li>
<h1><a href="/default.asp?contentID=545" target="_parent"><font size="1"><u>Acne Solutions</u></a></font></h1>
</li>
<li>
<h1><a href="/default.asp?contentID=536" target="_parent"><font size="1"><u>Botox</u></a></font></h1>
</li>
<li>
<h1><a href="/default.asp?contentID=543" target="_parent"><font size="1"><u>Vela Shape</u></a></font></h1>
</li>
<li>
<h1><a href="/default.asp?contentID=603" target="_parent"><font size="1"><u>Foam Sclerotherapy</u></a></font></h1>
</li>
</ul></td>
<td width="205"><ul>
<li>
<h1><a href="/default.asp?contentID=523" target="_parent"><font size="1"><u>Rosacea(Redness)</u></a></font></h1>
</li>
<li>
<h1><a href="/default.asp?contentID=584" target="_parent"><font size="1"><u>Facial Rejuvenation </u></a></font></h1>
</li>
<li>
<h1><a href="/default.asp?contentID=537" target="_parent"><font size="1"><u>Laser Hair Removal</u></a></font></h1>
</li>
<li>
<h1><a href="/default.asp?contentID=550" target="_parent"><font size="1"><u>Medical-Grade Peels</u></a></font></h1>
</li>
</ul></td>
<td width="237"><ul>
<li>
<h1><a href="/default.asp?contentID=522" target="_parent"><font size="1"><u>Hyperpigmentation</u></a></font></h1>
</li>
<li>
<h1><a href="/default.asp?contentID=607" target="_parent"><font size="1"><u>Cosmeceuticals</u></a></font></h1>
</li>
<li>
<h1><a href="/default.asp?contentID=523" target="_parent"><font size="1"><u>Medical-Grade Fillers</u></a></font></h1>
</li>
<li>
<h1><a href="/default.asp?contentID=537" target="_parent"><font size="1"><u>Scar/Stretchmark Removal</u></a></font></h1>
</li>
</ul></td>
<td align="center" width="340">
<div align="center">
<body>
<a href="/default.asp?contentID=556" target="_parent">
<img border="0" alt="Current Specials" src="/img/tscc/TSCC_current_specials_mouseoff.jpg" align="center" height="60" width="150" id="b1"
onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
<br>
<a href="/video/tv_ad.wmv">
<img border="0" alt="Watch Our Commercial" src="/img/tscc/TSCC_watch_our_commercial_mouseoff.jpg" align="center" height="60" width="150" id="b2"
onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
<br>
<a href="/default.asp?contentID=530" target="_parent">
<img border="0" alt="What Makes us Different!" src="/img/tscc/TSCCweb2design.jpg" align="center" height="60" width="150" id="b3"
onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
</body>
</td>
</tr>
</table>
</div>
</div></td></u>
<td width="344" valign="top"><p class="keyplacement">
[page(569)]</p>
<p class="keyplacement">
<br>
</p></p>
<br>
<br>
<div align="center"><p align="center" class="style1"><br><br><br><br></span></b></p></div>
</td>
</tr>
</table>
<p>
<td width="4" bgcolor="91B4DF"> </td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="TopTable1b">
<tr>
<td height="60"><table width="898" height="60" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="4" rowspan="2" valign="top"><img src="/images_/blue_strip.gif" width="4" height="8"></td>
<td height="8" valign="top" background="/images_/body_tile.gif"><img src="/images_/blank.gif"><img src="/images_/blank.gif"></td>
<td width="4" rowspan="2" valign="top"> </td>
</tr>
<tr>
<td class="copyright" align="center"><a href="http://www.theskincareclinic.com" target="_parent">The Skin Care Clinic</a> All Rights Reserved.<br>
Powered by <a href="http://www.WebSuiteLive.com" target="_blank">WebSuiteLive</a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I Thank you for any help you might be able to provide. Hi, Im sorry about this embarrassing problem lol. Im having trouble with some tables im putting on my page. Im basically wanting to place a table in the top left hand side of the page... and a seperate table on the Right hand side of the page. But i dont know how to do that because it obviously goes underneath eachother lol I have attached a jpeg to show you how id like my tables . if somebody could help me with the code that would be great .. thanks Scott Okay, as you can see from my screenshot, my problem is that the two images in the bottom cells are not at the very bottom, i am not sure how i align them so that they are. And heres the code: Code: <html>
<head>
<title>
Fun Maths
</title>
<style type="text/css">
<!--
body
{
background: #336699;
}
p
{
text-align: justify
}
-->
</style>
</head>
<body>
<div align="center">
<table border="0" width="500" height="100%" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0">
<tr height="15">
<td>
<img src="whiterb1.gif" border="0" />
</td>
<td>
</td>
<td>
<img src="whiterb2.gif" border="0" />
</td>
</tr>
<tr colspan="3">
<td>
Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</td>
</tr>
<tr height="15">
<td>
<img src="whiterb3.gif" valign="bottom" border="0" />
</td>
<td>
</td>
<td>
<img src="whiterb4.gif" border="0" />
</td>
</tr>
</table>
</div>
</body>
</html>
So I'm exceptionally new to html. I'm trying to get rid of the space between two table rows, so the images in them sit flush. Can anyone help? I built my page using Firefox to view it and it looks how I want it but in IE (and possibly all other browsers?) it doesn't look right. My html and css validates (with W3C), so I guess I'm relying on a Firefox bug or something. Here's the page: individual.utoronto.ca/nicolemorgan One of the problems seems to be that in Firefox, on my web page, a certain table cell is defined by the width of the top cell in the same column and wraps its contents (which is text), whereas in IE the width definition isn't recognized and the text isn't wrapped. My temporary solution is to manually break the lines of text so that they fit within the cell dimensions, but this feels messy. (The column in question is where the tan-coloured blocks are on the left side of the page.) Other problems are that some of the cells don't line up, and there is a thin line between two certain cells in IE but not Firefox. Is there some basic principle I'm missing, or is my code just messy, or what? Hi everyone. I am having a problem with a page. It is displaying fine in FF but not in IE. You can view this page at: http://www.jalc.org/about/2008_galle...008/index.html As you can see, when you look at this in IE it takes the image in the left column and puts it at the top and the image that is supposed to be in the right column moves over to the left. I am at a complete loss as to what might be causing this. Any help would be greatly appreciated. Andy Hey! I was making a navigation bar that goes to the left of the content (there is a main nav at the top and a subnavigation for the page to the left). Here's the layout |----banner------| ==========main nav ll content ll content ll content the vertical equal signs (aka L's ) on the left are the things that are troubling me. I don't want there to be a border but the page for some reason keeps coming up with a small space between the left, bottom, and top of the subnav. Here's my code for the subnav and the content: Code: <table width="100%" cellpadding="0px" style="height: 100%; align: left; background-color: #ffffff; border-left: 0px; border-bottom: 0px; border-top: 0px; border-right: 0px;" cellspacing="0px"> <tr><td> <table cellpadding="0px" cellspacing="0px" width="130px" style="height: 100%; align: center; valign: middle; background-color: #FF7F00; border-left: 0px; border-bottom: 0px; border-top: 0px; border-right: 5px solid #ff0000;"> <tr><td align="center">A Brief History</td></tr><tr><td align="center">Who We Serve</td></tr><tr><td align="center">The Difference</td></tr></table></td> <td> <table cellspacing="0px" cellpadding="5px"><tr><td><b>About Us</b></td></tr></table> <blockquote> content </blockquote> <blockquote><p>content</p></blockquote> </td></tr></table> I've been trying to figure out how to get a table that takes up 100% of the screen and has no margins. I've set all my page margins to 0 and my table width to 100% but I still get no luck. This is an example of what I am referring to: http://justskins.com/wpdemo/?wptheme=Webby%20Blue (the bottom part with recent posts, recent comments, etc...) Also, I like coding tables, I don't really care for css... Any help would be appreciated, thanks a lot! |
|||||||