|
HTML - Table Will Not Display In Div
Hi,
I cannot get a table to display in a div on my site. If I change <table> to <div>, it works, but it is very tabular data and I need table styling. Code: <div id="stats_panel" style="display:none;"> <!--display is turned on by js when a button on page is clicked -->
<a href="javascript:GoBack()"><img src="files/images/misc-images/close-button.png" alt="" style="float:left; position:relative; height:40px; width:40px; z-index:1;" /></a>
<div id="stats_inside">
<div style="border:0; padding:2; width:100%;">
<div style="border-collapse: collapse; margin: 3px auto; border: 1px solid blue;">
<div><div>table</div></div></div></div></div>
Above works, below will not work Code: <div id="stats_panel" style="display:none;"> <!--display is turned on by js when a button on page is clicked -->
<a href="javascript:GoBack()"><img src="files/images/misc-images/close-button.png" alt="" style="float:left; position:relative; height:40px; width:40px; z-index:1;" /></a>
<div id="stats_inside">
<table><td>hello</td></table>
</div>
Further, anything after the <table> declaration disappears. It will not show up. Site is www.uhstitans.com/schedule2.php Click one of the Stats buttons to see the pop-up. FURTHER INFO - EDIT I just noticed that by adding <table>, the content appears at the bottom of the page, instead of being hidden (display:none in the stats_panel div. also, the info trailing it drops to the bottom of the page. In a perfect world, it would all wait until the js is activated and then appear in the center of the page. THis is the result I get when I do not include <table> ad include <div>. Thanks in advance, Todd Similar TutorialsHey guys I got help on a project I'm doing from Eri. Seems he used this tag in the code which is posted below. Anyways I did some research apparently Safari doesn't like this tag. His solution works great in IE6, IE7, and FF2/3 but in safari the layout dies. Has anyone messed with this type of solution. Check this out to see what I'm mean if you want a visual representation: http://browsershots.org/http://along...index_new.html Eric HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Personal Shopping and Concierge Services</title> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> <meta name="keywords" content="INSERT KEYWORDS HERE" /> <meta name="description" content="INSERT DESCRIPTION HERE" /> <link rel="stylesheet" href="styles.css" type="text/css" /> </head> <body> <div id="wrap"> <div id="whitebox"> <div id="header"> <div id="logo"> </div><!-- end div logo --> <div id="pagetitle"> <h1>along came mary</h1> <h2>personal shopping and concierge services<br /> the metro atlanta area</h2> </div><!-- end div pagetitle --> <div class="clear"> </div> </div><!-- end div header --> <div id="main"> <div id="sidebar"> <div id="links"> <ul> <li><a href="/">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Our Services</a></li> <li><a href="#">Customer Feedback</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Links</a></li> </ul> </div><!-- end div links --> <div class="clear"> </div> <div id="icea" align="center"> <img src="assnbanner2.jpg" alt=" " /> <p><a href="#">Proud Member of the International Concierge & Errand Association</a></p> </div><!-- end div icea --> </div><!-- end div sidebar --> <div id="content"> <h1>Take a deep breath. Call Mary. Relax. It's handled.</h1> <p> Whether it is shopping, running errands, organizing your home or office, caring for your pets and home while you are away or just waiting for a service contractor to arrive, Along Came Mary is ready when you are. It's like having a personal assistant for you and your home! </p> <p> Along Came Mary specializes in personal shopping and concierge services for individuals and families in the metro Atlanta area. Based in Vinings, an Atlanta, Georgia suburb, Along Came Mary prides itself on providing reliable, top-notch customer service to its clients. Our primary goal is to help busy people create a more balanced and therefore enjoyable lifestyle. When life becomes hectic, being able to make that call for help relieves stress and calms nerves! </p> <p> We know your time is valuable and thank you for visiting our site to learn more about how Along Came Mary can help you create a more balanced, productive, and manageable life. <a href="#">Contact us</a> so that we can show you how good life can truly be! </p> <p> Mary Snelson<br /> <a href="#">mary@marylovesshopping.com</a> </p> <p> 404.422.7564 </p> </div><!-- end div content --> <div class="clear"> </div> </div><!-- end div main --> </div><!-- end div whitebox --> <div id="footer"> <p> <a href="/">Home</a> | <a href="#">About Us</a> | <a href="#">Our Services</a> | <a href="#">Customer</a> | <a href="#">Contact Us</a> | <a href="#">Links</a> </p> </div><!-- end div footer --> </div><!-- end div wrap --> </body> </html> CSS Code: * {
margin: 0px;
padding: 0px;
border: 0px none transparent;
border-spacing: 0px;
}
body {
background-color: #fcc1df;
}
#wrap {
width: 100%;
height: 100%;
border: 0px none transparent;
margin-bottom: 15px;
}
#whitebox {
width: 700px;
height: auto;
background-color: #ffffff;
border: 2px solid #000000;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
}
#header {
width: 700px;
background-color: #ffffff;
border-bottom: 2px solid #e5e5e5;
height: 160px;
display: table;
}
#logo {
width: 135px;
height: 156px;
background-image: url('ACM-Logo.png');
float: left;
display: table-cell;
}
#pagetitle {
width: 561px;
height: 160px;
display: table-cell;
vertical-align: middle;
position: relative;
margin-left: 135px;
}
#pagetitle h1 {
font-size: 250%;
font-weight: bold;
margin-left: 12px;
margin-bottom: 0px;
margin-top: 30px;
}
#pagetitle h2 {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 80%;
margin-left: 12px;
font-weight: normal;
margin-top:0px;
}
#main {
width: 696px;
height: 100%;
}
#sidebar {
width: 140px;
background-color: #ffffff;
position: relative;
float: left;
height: 100%;
display: table-cell;
}
#links {
margin-bottom: 10px;
float: left;
height: auto;
margin-left: 10px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 80%;
line-height: 125%;
}
#sidebar ul {
list-style-type: none;
margin-right: 5px;
}
#sidebar a:link {
color: #000000;
}
#sidebar a:visited {
color: #000000;
}
#sidebar a:hover {
color: #f1037f;
}
#icea {
width: 140px;
height: 100%;
display: table-cell;
vertical-align: bottom;
padding-top: 100px;
}
#icea a:link {
color: #0000ff;
text-decoration: none;
}
#icea a:visited {
color: #0000ff;
text-decoration: none;
}
#icea a:hover {
color: #f1037f;
text-decoration: underline;
}
#icea img {
width: 132px;
height: 96px;
border: 0px none transparent;
}
#icea p {
font-family: Arial, verdana, Helvetica, sans-serif;
font-size: 70%;
line-height: 175%;
text-align: center;
margin-left: 4px;
margin-right: 4px;
}
#content {
width: 442px;
background-color: #ffffff;
padding-left: 12px;
height: 100%;
position: relative;
margin-left: 142px;
border-left: 2px solid #e5e5e5;
display: table-cell;
}
#content h1 {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
margin-top: 0px;
margin-bottom: 10px;
}
#content p {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 90%;
}
#content a:visited {
color: #0000ff;
text-decoration: none;
}
#content a:hover {
color: #f1037f;
text-decoration: underline;
}
#content img {
width: 132px;
height: 96px;
border: 0px none transparent;
}
#content p {
font-family: Arial, verdana, Helvetica, sans-serif;
font-size: 85%;
padding-bottom: 18px;
line-height: 125%;
}
#footer {
width: 696px;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
}
#footer p
{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 90%;
text-align: center;
}
#footer a:link {
color: #808080;
text-decoration: none;
border-bottom: thin dotted #808080;
}
#footer a:visited {
color: #808080;
text-decoration: none;
border-bottom: thin dotted #808080;
}
#footer a:hover {
color: #808080;
text-decoration: none;
border-bottom: thin dotted #f1037f;
}
div.clear {
clear: both;
font-size: 0%;
line-height: 0%;
width: 100%;
}
I am updating this groups old school website built with tables etc. The main images display to the left in Mozilla and centered in IE. http://www.sevenhawaii.com/ I am assuming, in this case MF is actually displaying it correctly. Does anyone have an idea of a quick fix? I haven't worked with tables in a long time. Mahalo, MJ Hello! Is there any way to make a table showing a folder in your FTP? I have an FTP thats is locked, so is there anyway to make it an autologin I just want it to show the files, not the 'Go up a directory' button And is there anyway to make tthe links so people can click on them to open the file the directory HOW CAN I DO THIS Tap Back Josh.R Hi: I have a 600-row table which to now is presented to the user with always the first row displaying. Problem: How do I specify that I want a different and specific row of the table to be displayed at the top of the viewport ? Thank you, -Mel Smith problem is fixed, no need to read. Hello, I have a website that displays fine in every browser I've tested but Chrome. The only problem is my borders. In order to get fading rounded edges I made each block a 3x3 table, like this: Code: <div class="general"><table class="bgtable"><tr><td class="bgtopleft"></td><td class="bgtopcenter"></td><td class="bgtopright"></td></tr> <tr><td class="bgleft"></td><td class="primary"> example post </td><td class="bgright"></td></tr><tr><td class="bgbottomleft"></td><td class="bgbottomcenter"></td><td class="bgbottomright"></td></tr></table></div> and here's the applicable portion of my stylesheet: Code: body
{
font-family: sans-serif;
font-size:11pt;
letter-spacing : 0.03em;
line-height : 130%;
color:white;
background-color:white;
}
.container
{
margin: 0 auto 0 auto;
width: 900px;
}
.general
{
background-color:#70a055;
margin: 0px 135px 10px 130px;
}
table.bgtable
{
border:none;
border-collapse: collapse;
width:635px;
}
table.bgtable tr
{
border:none;
}
.bgtopcenter
{
height:20px;
background-image:url(/data/bgtopcenter.gif);
background-repeat:repeat-x;
}
.bgtopleft
{
height:20px;
background-image:url(/data/bgtopleft.gif);
width:18px;
overflow:hidden;
}
.bgtopright
{
height:20px;
background-image:url(/data/bgtopright.gif);
width:18px;
overflow:hidden;
}
.bgbottomcenter
{
height:20px;
background-image:url(/data/bgbottomcenter.gif);
background-repeat:repeat-x;
}
.bgbottomleft
{
height:20px;
background-image:url(/data/bgbottomleft.gif);
width:18px;
overflow:hidden;
}
.bgbottomright
{
height:20px;
background-image:url(/data/bgbottomright.gif);
width:18px;
overflow:hidden;
}
.bgleft
{
background-image:url(/data/bgleft.gif);
background-repeat:repeat-y;
width:18px;
overflow:hidden;
}
.bgright
{
background-image:url(/data/bgright.gif);
background-repeat:repeat-y;
width:18px;
overflow:hidden;
}
In most browsers everything lines up right, but in chrome it looks like this: Any suggestions? Thanks for reading. I don't know how to even debug this because it works in firefox but not IE. I display a table and use PHP script to populate the table. In explorer, the "fellow" value gets SKIPPED and then the next value ("rcf_date") gets put into that td, so everything gets screwed up! Looking at the code I can't figure out what it is about it that explorer doesn't like. Why on earth would it skip the fellow field? Here;s the php code that displays the table: Here's a link to a screenshot of the table in IE: http://bp1.blogger.com/_cy0zia_bU_s/...screenshot.png Here is the code to display that table. Any help would be appreciated: Code: <?php require('secure.php');
include "dateheader.php";
include "connectdb.php"; ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Active consult patient list</title>
<link href="stylesheets/simple.css" rel="stylesheet" type="text/css">
</head>
<?php
$query = "SELECT id_incr, patient_name, mrn, location, fellow, rcf_date, admission, consult_reason, impression, recs, comments ".
"FROM active_consults WHERE signoff_status = 'a' ".
"ORDER BY patient_name";
$results = mysql_query ($query) or die (mysql_error());
$num_pts = mysql_num_rows ($results);
$consultheading =<<<EOD
<table class="tablemargin" bgcolor="#CCCCFF" width = "98%" border = "1" cellpadding = "2"
cellspacing = "2" align = "left">
<th> Name </th>
<th> MRN </th>
<th> Loc </th>
<th> Fellow </th>
<th> Date of Consult</th>
<th> Reason for Admssion </th>
<th> Reason for Consult </th>
<th> Impression </th>
<th> Recs </th>
<th> Comments </th>
<th> Update patient </th>
</tr>
EOD;
echo $consultheading;
while ($row = mysql_fetch_assoc ($results)) {
?>
<tr>
<td bgcolor="#FFFFFF" >
<?php echo $row['patient_name'];?> </td>
<td bgcolor="#FFFFFF" >
<?php echo $row['mrn'];?> </td>
<td bgcolor="#FFFFFF" >
<?php echo $row['location'];?> </td>
<td bgcolor="#FFFFFF" ">
<?php echo $row['fellow'];?> </td>
<td bgcolor="#FFFFFF" >
<?php echo $row['rcf_date'];?> </td>
<td bgcolor="#FFFFFF" >
<?php echo $row['admission'];?> </td>
<td bgcolor="#FFFFFF" >
<?php echo $row['consult_reason'];?> </td>
<td bgcolor="#FFFFFF" >
<?php echo $row['impression'];?> </td>
<td bgcolor="#FFFFFF" >
<?php echo $row['recs'];?> </td>
<td bgcolor="#FFFFFF" >
<?php echo $row['comments'];?> </td>
<td bgcolor="#FFFFFF" align="center">
<a href="editpatient.php?action=edit&id=<?php
echo $row['id_incr']; ?>">[edit]</a> </td>
</tr>
<?php
}
?>
<td bgcolor="#CCCCCC" colspan=11 align="left" class="fineprint"> Total active patients:
<?php echo $num_pts; ?></td></tr>
<td></td>
<tr>
</tr>
<tr><td align="center"><a href="newpatient.php">[ADD PATIENT]</a></td>
<td align="center" COLSPAN=4><a href="displaysignoff.php">[DISPLAY SIGNED-OFF LIST]</a></td>
<td align="center" colspan=3><a href="export.php">[EXPORT ALL PATIENTS (EXCEL)]</a></td>
<td colspan=3 align="right"><a href="http://www.hfhpulm.com">[HFHPULM.COM]</a></td>
</tr></table>
I have a page on my web site that isn't displaying correctly. I've used the same template for all the pages - but for some reason this single page won't display correctly on foxfire, but fine on IE -- you can reach the page Here: I need the page to fit the screen display - but for some reason this page won't. I would be greatful for any help Thanks I have list of files in a folder which are to be displayed in html table. Each file should be shown as follows ------------ | image1| | | ------------ <image 1 file name> ------------ | image2| | | ------------ < image 2 file name> its image and name of the file below the image. I am new to this html and needs help! Thank you, Krishna. Hello Everyone, I have two pairs of jsp + servlet. The first jsp asks user to select an option from the drop down box and then on the click of submit button, passes this info to another servlet, who processes the data from db based on the input and displays the requested data in a table using second jsp page. My code is working but I'm trying to make my code look more appealing. Here is what the problem is: 1. The first page just has two drop down boxes with rest of the page blank. 2. Once the user selects the choice from first page, second page is displayed which does not anymore display what user chose in the drop down. What I want: is that initially the first page contains only drop down but as soon as the user hits the submit button, instead of loading a whole new page, the requested data is displayed right below the drop down boxes. Will this require to combine two jsp pages into one.....if yes, how do I make the table disappear the first time until some input is chosen. I know this is very basic html but as this is my first time, will appreciate the help. Thanks. Hello, My name is Eli and I cannot figure out why in the 2nd and 3rd rows of this HTML table there are empty spaces between the columns, making these rows go over the table width limitation of 770. I would really appreciate some help, as it is getting very frustrating and I am sure there is a very simple solution that I am missing. I've searched threads but could not find the right answer. Here is the table HTML code: <table border="0" align="left" cellspacing="0" cellpadding="0" width="770"> <tr> <td width="770" height="1" colspan="2" bgcolor="#FFFFFF"><img src="http://yst.sale-la-vie.com/images/spacer.gif" alt="spacer" width="4" height="1" border="0" align="middle" /></td> </tr> <tr> <td colspan="2" align="left" valign="top" bgcolor="0"><img src="http://yst.sale-la-vie.com/images/main-mid.jpg" alt="" border="0" /></a></td> <td align="left"><img src="http://yst.sale-la-vie.com/images/right-mid.jpg" alt="" border="0" /></a></td> </tr> <tr> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-necklaces-img.jpg" alt="" border="0" /></a></td> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-earringss-img.jpg" alt="" border="0" /></a></td> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-goodlook-img.jpg" alt="" border="0" /></a></td> </tr> <tr> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-bracelets-img.jpg" alt="" border="0" /></a></td> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-summer-img.jpg" alt="" border="0" /></a></td> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-newlook-img.jpg" alt="" border="0" /></a></td> </tr> </table> Thanks and best wishes, Eli Hi guyz, i have a query Mouse over the datagrid cell display tooltip or panel to display information but only using HTML and CSS not using javascript. can anyone help me. because im gonna use it on htmleditor on c# desktop application thax before 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>
I will be brief in hoping that the issue does not require a thesis to properly fix. I'm dealing with tables within tables..within tables. In one instance, I have a 2x1 (row by column) table inside another table. So, we'll call the inside table "B" and the outside table "A". Table B is centered inside a column in Table A. I'm trying to maximize the space, but nearly nothing works. Setting Table B height=100% does nothing. The only thing that works is setting the height=N px, where N is a number. This is no good, as I want to the site to work on all resolutions. I want it to be proportional. How can I fix this? Here's what I'm dealing with, visually: Any help would be welcome. Thanks. I would like to know if there is such a thing as a tag within a table, that can collapse if the next table within that prior one gets too big to center? Here is an example of a part of my code: Code: <table style="width:757; border-style:solid; border-width:thin; margin:0 0 15px 0">
<tr><td class="spb-category" width="750" style="text-align:left;" colspan="3">Title of this category</td></tr>
<tr>
<td valign="top" width="33%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=103">large size book title with author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=187">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=197">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
</table> </td>
<td valign="top" width="33%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=101">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=188">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=120">Medium sized boot title</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
</table> </td>
<td valign="top" width="33%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=102">a very long title of a book which includes the author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
</table>
</td>
</tr>
</table>
1. I want to center each column so that the first letter of each book title is lined-up, but that the longest title on each column has equal space on both left and right. 2. If you look at each column, the width is about 245px. With regard to the first book title in the first column, I have 50px that is extra, therefore I'd like to automatically add 25px to the front of each one of the books for that column. 3. On the second column, there is about 80px extra, therefore I'd like to auto-add 40px to the front of each book in that column. My problem is that I don't want the column centered individually because then I will lose the straight line that I'd like each book to be on top of each other as it starts the line. I tried: style="margin-left:20px" and style="padding-left:20px" but when the title got too long it would not auto-collapse the left side, I want it to collapse! I want one tag that I can insert evenly on every section to get the push to the right an even amount of spaces for every book on each column. If it comes down to it, I wouldn't mind sacrificing that each column gets auto aligned to what is necessary for its own column. So if I have to use one number, say 30px, for the whole webpage, then ok, I'd do it. My problem is that sometimes the 30px empty filler space for the left, in order to push the title to the right, is not enough space for a very long title and it winds up sending half the title to the next line, which I don't want. This code is a list of books that spans about 20 categories and about 400 book titles. Thanks in advance for any help you might offer. The table itself is working fine, but the size of each cell is not correct in Firefox. Here is a screenshot of what is happening: http://img35.imageshack.us/img35/1938/tabletroubles.gif Here is the head of my page, the css for the table is he HTML Code:
<style type="text/css">
#cat table {border:0px solid #333333; cell-padding:0; cell-spacing:0; align=center}
#cat tr {align=center}
#cat td {font-size: 13px; font-family=tahoma; font-weight: bold; padding: 0px; border:0px solid #333333; align=center;}
#cat td a {text-decoration: none; color:#757575; background-color: white; display:block; height=23; background-image: url(linkbg1.gif); align=center;}
#cat td a:hover {background-color: #333333; font-weight: bold; text-decoration: none;color: #ffffff; background-image: url(linkbg2.gif); align=center;}
</style>
and here is the table code, located in the body of the page: HTML Code: <div style="Height:53px; overflow:auto; width:900px; position:absolute; top:0; left:0"> <TABLE bgcolor=#333333 cellspacing=0; cellpadding=0;><tr><td> <div id="cat"> <table width=900; cellpadding:0px; cellspacing:0px> <tr align=center> <td width=20%> <font face=tahoma><a href="home.html">Home</a></font> </td> <td width=20%><center><font face=tahoma><a href="openings.html" target="_top">Openings</a></font></center></td> <td width=20%><center><font face=tahoma><a href="dance.html" target="_top">Dance</a></font></center></td> <td width=20%><center><font face=tahoma><a href="projects.html" target="_top">Projects</a></font></center></td> <td width=20%><center><font face=tahoma><a href="vocaloid.html" target="_top">Vocaloid</a></font></center></td> </tr> <tr> <td width=20%><center><font face=tahoma><a href="fanflashes.html" target="_top">Fanflashes</a></font></center></td> <td width=20%><center><font face=tahoma><a href="caramelldansen.html" target="_top">Caramelldansen</a></font></center></td> <td width=20%><center><font face=tahoma><a href="cosplay.html" target="_top">Cosplay</a></font></center></td> <td width=20%><center><font face=tahoma><a href="endings.html" target="_top">Endings</a></center></td> <td width=20%><center><font face=tahoma><a href="anime.html" target="_top">Anime Episodes</a></font></font></center></td> </tr> </table> </div> </td></tr></table> </div> A table is nested within another table. The table on the outside has no content, it is there to make a gray border around everything else. If you look at the table in firefox & internet explorer, you'll see that in IE- the table is much thicker than in firefox. How can i make it so that the table in Firefox will have the same thickness as the one in IE? I could really use some help. Thanks! I have a list within a table and much of the content has links to two different javascript codes. One is a popup javascript to so that I can control the window size and the other is a toggle.display javascript to show/hide specific details about my list. The scripts run fine, but for some odd reason the content in my table gets cut off randomly towards the end of the list. I went through to make sure that I didn't have any div tags nested.. etc.. and i'm now at a complete loss as to why my content within the table gets randomly cut off. Any help would me much appreciated. The link for the site is he http://netimpact.org/displaycommon.c...rticlenbr=2440. You'll notice at the very bottom of the table it randomly stops.. Hello, I am newbie, just has started my adventure with html. I tried to make an easy static site, without any additional thingd, but it occured a problem. 1. I mean, as I put table in table because I did know how to to id in different way, to make buttons on the left stay up while text on the right is moving- if I do normal table with 2columns and on the left lets say 5rows for buttons, on the right I unite all rows to make one big sort of box for contents, as I go down and try to write something morre, the rows from the letf were enlarging too If the size of explorer or firefox is nor full screen, the text in contents is going away (like now in lycos server, where screen is not full, but "cut" by advertise) 2. I have highlighted buttons, but not always works, why? (i mean it works, but darker buttons are charging so slow- maybe it is so because i saved them in pgn instead in gif, and each one is about 50kb?) -probably it is not this- because I have just changed into gif, and it is still the same 3. Another problem, as I post the site, I have notice, that in firefox I can not navigate with buttons, while in explorer yes, is it a fault of my coding, or of server where I put website? Here I post my website: http://members.lycos.co.uk/aniaacolgate/ Could someone take a look on the code, and will be so kind to correct me? It is a basic easy site of very begginger I just wanted to make a shape like this: - top: a banner - buttons in horizontal and vertical way - under buttons: contents (sincerly would like to put frames, but do not know how to put them there, is on the left there r buttons Thank you so much in advance for reply Sorry for mistakes in language I have a table and after I select the question (the ball) I would like the answer to come up in another column in that table. Is that too much? Keep'er simple please. Thanks. the bold stuff is what i added in to try and make it sortable and it didn't work. Code: <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title />
<link rel="stylesheet" type="text/css" href="example.css"/>
<meta name="author" content="my name" />
<link href="http://www.joostdevalk.nl/" rev="made" />
<script type="text/javascript" src="sortable.js"></script><meta name="generator" content="StarOffice/OpenOffice.org XSLT (http://xml.openoffice.org/sx2ml)" /><meta name="author" content="my name" /><meta name="created" content="2007-04-03T18:49:47" /><meta name="changedby" content="Ryan Gleason" /><meta name="changed" content="2007-05-04T16:38:49" /><base href="." /><style type="text/css">
@page { }
table { border-collapse:collapse; border-spacing:0; empty-cells:show }
td, th { vertical-align:top; }
h1, h2, h3, h4, h5, h6 { clear:both }
ol, ul { padding:0; }
* { margin:0; }
*.ta1 { }
*.ce1 { font-family:Arial; border-bottom-width:0.0351cm; border-bottom-style:solid; border-bottom-color:#000000; border-left-style:none; border-right-width:0.0133cm; border-right-style:solid; border-right-color:#000000; border-top-style:none; font-weight:bold; }
*.ce2 { font-family:Arial; border-bottom-width:0.0351cm; border-bottom-style:solid; border-bottom-color:#000000; border-left-width:0.0133cm; border-left-style:solid; border-left-color:#000000; border-right-width:0.0133cm; border-right-style:solid; border-right-color:#000000; border-top-style:none; font-weight:bold; }
*.Default { font-family:Arial; }
*.Heading { font-family:Arial; text-align:center ! important; font-size:16pt; font-style:italic; font-weight:bold; }
*.Heading1 { font-family:Arial; text-align:center ! important; font-size:16pt; font-style:italic; font-weight:bold; }
*.Result { font-family:Arial; font-style:italic; font-weight:bold; text-decoration:underline; }
*.Result2 { font-family:Arial; font-style:italic; font-weight:bold; text-decoration:underline; }
*.co1 { width:1.3516in; }
*.co10 { width:0.7854in; }
*.co11 { width:0.5681in; }
*.co12 { width:0.8925in; }
*.co2 { width:0.9925in; }
*.co3 { width:0.6984in; }
*.co4 { width:0.622in; }
*.co5 { width:0.372in; }
*.co6 { width:0.3827in; }
*.co7 { width:0.9055in; }
*.co8 { width:0.6661in; }
*.co9 { width:0.6772in; }
*.ro1 { height:0.1783in; }
</style></head>
<body dir="ltr">
<table class="sortable" id="anyid" cellpadding="0" cellspacing="0">
<table border="0" cellspacing="0" cellpadding="0" class="ta1">
<colgroup><col width="150" /><col width="110" /><col width="78" /><col width="69" /><col width="41" />
<col width="42" /><col width="101" /><col width="110" /><col width="74" /><col width="78" /><col width="75" /><col width="75" /><col width="75" /><col width="87" /><col width="63" /></colgroup>
that should be what you need..i exported an excel file as an xhtml file and read the source code and that's how it was, real unorganized and such. basically it's got stats of baseball players and i want to make them easily sortable. i created a sortable table using another piece of code but have to manually enter everything in if i do it that way. It's hard to explain, but basically I want to achieve creating a smaller file looking portion of my site, with a larger around and tabs. Basically this: I currenty just have the outer red table, using .gif's to round the corners. I tried copying the code again to place in the middle of the red table code and it doesn't work. Any help to achieve this effect would be great. Here is the code I am using: PHP Code: <table width="450" cellpadding="0" cellspacing="0" border="0" style="background-color: #086591"> <tr> <td width="14"><img src="images/top_left.jpg" width="14" height="14" border="0" alt="..." /></td> <td width="172"></td> <td width="14"><img src="images/top_right.jpg" width="14" height="14" border="0" alt="..." /></td> </tr> <tr> <td></td> CONTENT HERE <td></td> </tr> <tr> <td><img src="images/bottom_left.jpg" width="14" height="14" border="0" alt="..." /></td> <td></td> <td><img src="images/bottom_right.jpg" width="14" height="14" border="0" alt="..." /></td> </tr> </table> Thanks for any help. |
|||||||