HTML - Getting 1px Spacing Around Table Cells In Ie But Not Firefox?

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:

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

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>

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?

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...

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">&nbsp;</div></td>
</tr>

<tr>
<td class="TabRight" height="100%"><div class="DivTabRight">&nbsp;</div></td>
</tr>
<tr>
<td class="TabBottomLeft"><div class="DivTabBottomLeft">&nbsp;</div></td>
<td class="TabBottom"><div class="DivTabBottom">&nbsp;</div></td>
<td class="TabBottomRight"><div class="DivTabBottomRight">&nbsp;</div></td>
</tr>
</table>

Thanks,

-Steve

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,

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).

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>

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 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.

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>