|
HTML - Space Between Cells In A Table Not Going Away.
Hello,
I made a goofy little website at adamvonwillis.com and if you look at the home page you will see a gap between the first and second rows. The rows need to be touching. If anyone could look at the code and help me out I would be very greatful! Thank you! Similar TutorialsHi, I'm new to HTML, i pretty much learned it by myself with online tutorials. Now i'm having problems with this web layout, There are empty spaces between cells and I can't remove them no matter what I do. I used cellpadding="0" and cellspacing="0" and style="border-collapse: collapse" but it made no difference. This is only happening on FireFox. On Internet Explorer it appears fine. I'm sure that I'm doing some stupid mistake somewhere. Here's the code of the whole page: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Using CSS</title> <style> body { margin:0; } </style> </head> <body topmargin="0" leftmargin="0" bottommargin="0"> <table cellpadding="0" border="1" style="border-collapse: collapse" cellspacing="0" height = "100%"> <tr> <td><img src="images/Gray-Cut-(layout)_01.gif" height="64"></td> <td><img src="images/Gray-Cut-(layout)_02.gif" height="64"></td> </tr> <tr> <TD class="example" width="786" colSpan="2" heigh="100%"> <TABLE id="Table2" height="100%" cellSpacing="0" cellPadding="0" border="1" style="border-collapse: collapse"> <TR> <TD><IMG height="21" alt="" src="images\Gray-Cut-(layout)_03.gif" width="182"></TD> <TD width="100%" rowSpan="5"><iframe name="iframe" src="home.html" height = "100%" width="100%" frameborder="0"></iframe></TD> </TR> <TR> <TD><IMG height="24" alt="" src="images\Gray-Cut-(layout)_05.gif" width="182"></TD> </TR> <TR> <TD><IMG height="24" alt="" src="images\Gray-Cut-(layout)_06.gif" width="182"></TD> </TR> <TR> <TD><IMG height="35" alt="" src="images\Gray-Cut-(layout)_07.gif" width="182"></TD> </TR> <TR> <TD height="100%"> </TD> </TR> </TABLE> </TD> </tr> </table> </body> </html> Hi, I am developing a calendar application in ASP. The calendar is displayed in a table where each cell represents a date and has a + and - in it. The + represents people working on that date and the - those who are off. I need to add 'title' information to table cells so that when the user moves the cursor over the + or - the respective information to be shown. I tried to do this as follows: <td><title = "worklist">+</title><title="freelist">-</td> This doesn't work, nothing appears when the cursor hovers over either the + or -. I can combine the worklist and freelist and display it in one go with: <td title="listall">+=</title> but this is unsatisfactory. Too much data is displayed and the result looks messy. I dont want to double the amount of cells by having + and - in seperate cells either. Is there a trick that allows seperate <title> info in the same cell. Help would be appreciated, regards, Guy Hi, here's my code, and things are working as they should. My only problem is I can't seem to move my drop-down list from the cell it is in to the cell left one. (see photo) Can anyone see from my code whats going wrong? Site url: http://www.walthamforest-fc.co.uk/st...layer.php?id=3 Code: <TABLE
WIDTH="520"
ALIGN=center
BORDER=0
CELLSPACING=0
CELLPADDING=0>
<TR VALIGN=middle ALIGN=center>
<td><img src="http://www.walthamforest-fc.co.uk/stats/images/playerbar.jpg"></TD>
</TR>
<tr VALIGN=left ALIGN=center>
<td><img src="
<?php echo
$image_url = "images/" . $playerdata['id'] . "_1.jpg";
?>"/><img src="
<?php echo
$image_url = "images/" . $playerdata['id'] . ".jpg";
?>"/>
</td></tr>
<tr>
<td background="/stats/images/playernameback.jpg" width="308" height="46"> <font face="Arial" size="4"><span style="letter-spacing: 0pt"><font color="#018609">
<?php echo "$playerdata[firstname]" ?> <?php echo "$playerdata[lastname]" ?>
</TD>
<td>
<td background="/stats/images/playernameback.jpg" width="202" height="46"><?php
//
//Haetaan kaikki pelaajat dropdownia varten
//
$sql = '
SELECT P.PlayerID AS id,
P.PlayerLastName AS lastname,
P.PlayerFirstName AS firstname,
P.PlayerPublish AS publish
FROM tplss_seasons S
LEFT OUTER JOIN tplss_players P ON P.PlayerID = S.SeasonPlayerID
';
if($defaultseasonid == 0)
{
$sql .= "
WHERE P.PlayerID != '' AND
P.PlayerPublish = '1'
GROUP BY id
ORDER BY firstname, lastname";
}
else
{
$sql .= " AND S.SeasonID = '$defaultseasonid'
WHERE P.PlayerID != '' AND
P.PlayerPublish = '1'
GROUP BY id
ORDER BY firstname, lastname";
}
$query = mysql_query("$sql", $connection)
or die(mysql_error());
echo"<select name=\"playerid\">";
while($data = mysql_fetch_array($query))
{
if($data['id'] == $id)
{
echo"<option value=\"$data[id]\" SELECTED>$data[firstname] $data[lastname]</option>\n";
}
else
{
echo"<option value=\"$data[id]\">$data[firstname] $data[lastname]</option>\n";
}
}
echo"</select> <input type=\"submit\" name=\"change_player\" value=\"$txt_change\">";
mysql_free_result($query);
$ttl = (($_SESSION['getAdditional'] + 1) % 2) ? "Show": "Hide";
?>
</td>
</tr>
For some reason i can't resize the weight on the cells i highlighted in black on the code below Code: <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="388" height="92" background="top11.jpg"> </td>
<td width="312" height="92" background="top12.jpg"> </td>
</tr>
<tr>
<td width="700" height="353" colspan="3" background="main.jpg"> </td>
</tr>
<tr>
<td width="269" height="149"><a href="ImagensFinaisSite/picsleft/2.jpg" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('LeftPic','','ImagensFinaisSite/picsleft/2_on.jpg',1)" onClick="return popImage(this.href,'Site author');"><img src="ImagensFinaisSite/picsleft/2_off.jpg" alt="Clicar na imagem para ampliar" name="LeftPic" width="269" height="149" border="0" id="LeftPic"></a></td>
<td width="157" height="149"><a href="ImagensFinaisSite/picscenter/1.jpg" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('CenterPic','','ImagensFinaisSite/picscenter/1_on.jpg',1)" onClick="return popImage(this.href,'Site author');"><img src="ImagensFinaisSite/picscenter/1_off.jpg" alt="Clicar na imagem para ampliar" name="CenterPic" width="157" height="149" border="0" id="CenterPic"></a></td>
<td width="274" height="149"><a href="ImagensFinaisSite/picsright/2.jpg" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('RightPic','','ImagensFinaisSite/picsright/2_on.jpg',1)" onClick="return popImage(this.href,'Site author');"><img src="ImagensFinaisSite/picsright/2_off.jpg" alt="Clicar na imagem para ampliar" name="RightPic" width="274" height="149" border="0" id="RightPic"></a></td>
</tr>
</table></td>
</tr>
<tr>
</tr>
</table>
These are the cells i can't resize: <td width="388" height="92" background="top11.jpg"> </td> <td width="312" height="92" background="top12.jpg"> </td> I've tried messing around with colspan but i just can't get it working. Any idea whats wrong? Hi: I have a long table (613 rows) with two columns (Containing Names, Addresses, Lot Numbers, and Phone Numbers, etc. I would like to format the cells of each column so that certtain fields (e.g., Phone Number is in a certain position in each cell). For example, I'd like this phone number to be right-aligned in the second row of each cell, etc Is there a standard, or easy way to do this ?? Thank for any help offered. -Mel Smith Hello! This is my first post on the forum, seems like a nice place here. I'm pretty much brand new to HTML and CSS as well. I'm learning fast but I have run into a problem that I cannot solve... and maybe it is not even solve-able with HTML. I want to create a table that has a different amount of cells on each row, but I want those rows to have the same width. I understand it is hard to understand from my poor description. So check out the image below: This is how I want to table to look, how is it done? Thanks! Hello everyone! I'm so glad an informative forum like this exists! I'm in Web-115 and was looking for a little help on an assignment as i'm not sure how to do this. Below are the things i'm struggling with and below it is the code. Any help would be greatly appreciated! 9. "Assign the cell in the top-left corner of the table the id name topLeft. Assign the cell in the top-right corner the id name topRight." Not sure where to insert this into my morning.htm file 13. "add the following styles for the table cells" (not sure where to insert "topLeft, topRight, etc or what to use as id to be indentified in CSS" HTML Code: <table class="programs" summary="Lists the morning programs aired by KPAF from 5:00 a.m. to 12:00 p.m. (central time)"> <caption>All times central</caption> <thead> <colgroup> <col class="timeColumn" /> <col class="daysColumn" span="6" /> <col class="lastColumn" /> </colgroup> <tr> <th>Time</th> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> <th>Saturday</th> <th>Sunday</th> </tr> </thead> Thanks so much! Justin Moose Hello, Is it possible to create drop down menus from table cells (i.e., moving mouse over a cell activates a drop down menu)? If so, could you possibly point me to an example to see how it is done? Thanks! I am making a simple table with multiple links in each of the cells. The only problem is when I try to put 2 links in the same cell it turns out like this: Link Link, side by side. Is there a way to make them be a list (up and down) like this: Link Link Thanks in advance. Hi, I spent five and a half hours attempting to resolve this problem, but now I'm hoping that someone might be able to help me. If you visit http://www.justforyouwebsite.com/, you'll see that the menu tables on the left and right sidebars are meant to have shadows. The shadows are created by using 3x3 tables, with the right and bottom sides of the tables containing repeating background images. Unfortunately, however, the size of the table cells on the right isn't correct. The top-right cell should be 7 pixels high, with the middle right cell filling the space between the top right and bottom right cells. As it is now, the top right cell and the middle right cell appear to be split evenly, and no matter what style or HTML changes I make, there is no way to get the shadow to repeat all the way up the right side of the table. Does anyone have any ideas? The Smarty template code is below in case it might help someone, although I don't see how this could be a scripting problem. Code: <table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td colspan="2" rowspan="2">
<table cellspacing="1" width="100%" class="VertMenuBorder">
<tr>
<td class="VertMenuTitle">
<table cellspacing="0" cellpadding="0" width="100%"><tr>
<td>{$link_begin}<img src="{$ImagesDir}/{if $dingbats ne ''}{$dingbats}{else}spacer.gif{/if}" class="VertMenuTitleIcon" alt="{$menu_title|escape}" />{$link_end}</td>
<td width="100%">{if $link_href}<a href="{$link_href}">{/if}<font class="VertMenuTitle">{$menu_title}</font>{if $link_href}</a>{/if}</td>
</tr></table>
</td>
</tr>
<tr>
<td class="VertMenuBox">
<table cellpadding="{$cellpadding|default:"5"}" cellspacing="0" width="100%">
<tr><td>{$menu_content}<br /></td></tr>
</table>
</td></tr>
</table>
</td>
<td class="TabTopRight" height="7px"><div class="DivTabTopRight" height="7px"> </div></td>
</tr>
<tr>
<td class="TabRight" height="100%"><div class="DivTabRight"> </div></td>
</tr>
<tr>
<td class="TabBottomLeft"><div class="DivTabBottomLeft"> </div></td>
<td class="TabBottom"><div class="DivTabBottom"> </div></td>
<td class="TabBottomRight"><div class="DivTabBottomRight"> </div></td>
</tr>
</table>
Thanks, -Steve Hello, I have a website that I'm having trouble with. The problem only shows up in Firefox. For some reason, a few cells in my tables are showing gaps between the borders and the JPG image within it. None of my tables or cells have any spacing or padding above 0. The cell heights aren't set to anything. Here's a screen shot for an example of what I mean: The gaps I'm referring to are where the red arrows are pointing. Now here's the same image with the borders of the tables within the problem region set to 1: Can anyone explain this? Is there are minimum cell height in Firefox or something? You can view my website at http://www.rrexecutivesuites.com (remember to view it in Firefox). Does anyone know the CSS or HTML (or combo) script to be able to have a table row collapse when there is no text in one cell, but there is text in the next cell? I have a 2-column table with titles in the left column and want the right column to be populated by a user. If the user doesn't populate the right cell(s) or row, I'd like that row -including the constant/visible text that is in the left col- to be hidden and that row to collapse or move up... 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 there, I was wondering if it's good practice to put <li> tags inside table cells. Normally, I would just put the list items in their own div container without the table, but for specific design reasons, I need to separate the list items in their own table data cells. This is how I'm currently doing it: Code: <div id="container"> <ul> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><h2>List Header</h2></td> </tr> <tr> <td height="29"><li><a href="itemone.html">Item One</a></li></td> </tr> <tr> <td height="29"><li><a href="itemtwo.html">Item Two</a></li></td> </tr> <tr> <td height="29"><li><a href="itemthree.html">Item Three</a></li></td> </tr> <tr> </table> </ul> </div> Notice that the H2 header isn't actually a list item but is still within the <ul> tags. Is any of this confusing or incorrect for google indexing? 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. Hi, I need to write text in different colors in the cells of a table... for now i use <FONT> but since it is deprecated how can i do this without FONT? HTML Code: <TABLE>
<TR>
<TD><FONT COLOR=BLUE>BLUE</FONT></TD>
<TD><FONT COLOR=RED>RED</FONT></TD>
<TR>
<TD><FONT COLOR=BLACK>BLACK</FONT></TD>
<TD><FONT COLOR=YELLOW>YELLOW</FONT></TD>
</TABLE>
Hi I am facing an issue , the table border are overlapping , also its not aligned properly . i am attaching the HTML code , Anyone got the solutions to fix this issue would be a great help. Ok, so i uploaded my page to the web and for some reason the bullets are not showing up inside the table cells of the Toppings table to my page. for some reason it shows up fine in Chrome, but in IE and Firefox, they show up to the left of the table cells making it look weird? does someone know how to make it so it shows up the way it does in chrome for all browsers? whats wrong with my code? heres the page... http://valspizzaplace.com/newwebsite...inos/pizza.php ahh this is frustrating, i can't figure out and its probably something simple. Ok, so I have a table, with multiple pics in it. One under the other... the issue is in firefox there is a space between the columns of each table.... but its fine in Internet Explorer. Check my code: Code: <!DOCTYPE HTML PUBLIC "-//w3c/DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style> </style> </head> <body> <body style="background-image: url(background.jpg); background-repeat: repeat-y; background-color: black; background-position: center"> <div align="center" id=background> <table id=titletable width="768" border="0" cellpadding="0" cellspacing="0"> <tr cellpadding="0" cellspacing="0"> <td><img src="images/title1.jpg"/></td><td><img src="images/title2.jpg"/></td><td><img src="images/title3.jpg"/></td><td><img src="images/title4.jpg"/></td><td><img src="images/title5.jpg"/></td> <td><img src="images/title6.jpg"/></td><td><img src="images/title7.jpg"/></td><td><img src="images/title8.jpg"/></td> </tr> <tr> <td colspan="8"><img src="images/banner.jpg"/></td> </tr> </table> </div> I have an image above a table and I want the image to be physically touching the table border, however there are about 5 pixels of white space above the table. I can't figure out how to remove them. Here's the code. Any help would be greatly appreciated. <img src=logo.jpg> <table border=1 bordercolor="#3C5581" cellspacing=0 cellpadding=0 width=740> |
|||||||