HTML - What Have I Done Wrong? Problem With Table In Table And Ie, Firefox Look
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 Similar TutorialsI 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> 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! Hi Can anyone solve this problem. Here is my code. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Hide/Show Test!</title> <style> .myclass1 { background-color:#CCCCCC; display:block; } .myclass2 { display:none; } </style> </head> <body> <script> function hideNshow(){ var e1=document.getElementById('A1C1_1'); if(e1.className=="myclass1") { e1.className="myclass2"; } else { e1.className="myclass1"; } e1=document.getElementById('A1C1_2'); if(e1.className=="myclass1") { e1.className="myclass2"; } else { e1.className="myclass1"; } } </script> <!-- <input type="button" name="myBtn" value="Click Me!" onclick=" hideNshow();"/>--> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td><a href="#" onclick=" hideNshow();">Row1/Cell1</a></td> <td >Row1/Cell2</td> <td>Row1/Cell3</td> </tr> <tr id="A1C1_1" class="myclass2"> <td>Row2/Cell1</td> <td>Row2/Cell2</td> <td>Row2/Cell3</td> </tr> <tr id="A1C1_2" class="myclass2"> <td>Row2/Cell1</td> <td>Row2/Cell2</td> <td>Row2/Cell3</td> </tr> <tr> <td>Row3/Cell1</td> <td>Row3/Cell2</td> <td>Row3/Cell3</td> </tr> <tr> <td>Row4/Cell1</td> <td>Row4/Cell2</td> <td>Row4/Cell3</td> </tr> <tr> <td>Row5/Cell1</td> <td>Row5/Cell2</td> <td>Row5/Cell3</td> </tr> </table> </body> </html> It is working fine in IE. When I click the link It displays the hidden rows and hides when I click the link agian. But in Firefox it is giving error. It is adding empty rows. How to prevent that. Thanks in advance. Hi, I created a table with rounded corners and I'm having a white-space problem in the inner bottom and top part of the table while using the MOZILLA FIREFOX browser. The URL below will show you what I'm talking about. I've spent many hours trying to get rid of those white spaces but cant figure out. http://www.imageenvision.com/test.html Code: <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html> <head> <title>TEST</title> <link rel="stylesheet" href="/css_style_sheet.css" type="text/css"> </head> <body> <table align='center' width='500' height='0' border='0' cellspacing='0' cellpadding='0'> <tr> <td width='0' height='0'><img src='/pics/top_left_rounded_corner.gif' height='9' width='9' border='0'></td> <td width='100%' height='0'><img src='/pics/top_middle.gif' height='9' width='100%' border='0'></td> <td width='0' height='0'><img src='/pics/top_right_rounded_corner.gif' height='9' width='9' border='0'></td> </tr> <tr> <td colspan='3' height='100' align='center' bgcolor='#F8F8F8'><!--MAIN TABLE STUFF--></td> </tr> <tr> <td width='0' height='0'><img src='/pics/bottom_left_rounded_corner.gif' height='9' width='9' border='0'></td> <td width='100%' height='0'><img src='/pics/bottom_middle.gif' height='9' width='100%' border='0'></td> <td width='0' height='0'><img src='/pics/bottom_right_rounded_corner.gif' height='9' width='9' border='0'></td> </tr> </table> </body> </html> Thanks in advance for your help. Kenny Adams Image Envision Not a major programmer but I needed to make a website. I am having a problem with my website where I have 5 pages, same structure, built with tables, all tables centered. In IE the tables align center on each page. But in Firefox --- 3 of the pages are different, lining up about 10 pixels left of center. Does anyone know how I can fix this problem? I have browsed around other sites as well and many of them have this problem. Any advice would be greatly appreciated. I know tables are horrible but thats all I know/can learn. I have this table and the contents inside and all when i click preview it adds lotsa space above the table why ??? and how to fix it ??? sum1 fixed it on dreamweaver but i dont use that i use frontpage and i compared the codes and could not find the difference anyway yall check it and see the preview mode this is the code HTML Code: <table> <tr><td align="right"><font face="Arial Rounded MT Bold" color="#0B74C1">Name:</font><td width="252"><input type="text" name="visitor" size="35" /></td></td> <br /> <td width="67"> </td><td></td><br /></tr> <tr><td align="right"><font face="Arial Rounded MT Bold" color="#0B74C1">Email:<br /> </font><td width="252"><input type="text" name="visitormail" size="35" /></td></td> <td width="67"> </td><td></td></tr> <tr><td align="right"><font face="Arial Rounded MT Bold" color="#0B74C1"> Subject:<br /></font><td width="252"> <input type="text" name="attn" size="35" /></td></td> <td width="67"> </td><td></td></tr> <tr><td align="right" valign="top"> <font face="Arial Rounded MT Bold" color="#0B74C1"><br />Message:</font></td> <td width="252"><textarea name="notes" rows="6" cols="29"></textarea></td> <td width="67"> </td></tr> <br /> <tr><td align="right" height="27"> </td> <td width="252" height="27" align="center"> <p align="center"> <input type="submit" value="Send" <INPUT type=submit value="Check" style="color: #FFFFFF; font-family: MS Sans Serif; font-size: 8pt; border-style: ridge; border-width: 3; background-color: #074A7C"></td> <td width="67" height="27"> <p align="center"> </td></tr> <br /> </table> Thanx Hello, I'm a newbie to these sorts of things. I'm also not sure what the technical jargon is for this so please bare with me. What I want to achieve is to have the sitemenu part stretch across the entire table ending with the image tags (visually I want the sitemenu part to end with rounded edges which I made as an image). Is this even possible? I am not sure how to accomplish this. At the moment whilst the end image caps the sitemenu column, it does not stretch to the end of the rest of the table and the beginning image is hanging out at the very start where I want it to sit, but sitemenu does not reach it. I thought it was a problem with my colspan but touching it just destroys the entire thing. For further clarification here is what it looks like: http://img.photobucket.com/albums/v2...arghtables.jpg And here is what I WANT it to look like: http://img.photobucket.com/albums/v2...ouldbenice.jpg Here is the current code that I have: Code: <table cellspacing="0" cellpadding="0" border="0" align="center" width="90%"> <tr> <td colspan="5" id="sitetitle"><img src="banner.jpg"></td> </tr> <tr> <td colspan="5" id="emptyrow"></td> </tr> <tr> <td width="15" valign="top"><img src="left.jpg" width="15" height="53" border="0"></td> <td colspan="3" id="sitemenu">Hello</td> <td valign="top" width="15"><img src="right.jpg" width="15" height="53" border="0"></td> </tr> <tr> <td colspan="5" id="emptyrow"></td> </tr> <tr> <td id="hmenu" valign="top"> <p>Stuff</p> </td> <td id="emptycolumn"></td> <td id="content" valign="top"> <p>Stuff.</p> </td> <td id="emptycolumn"></td> <td id="vmenu" valign="top"> <p>Stuff.</p> </td> </tr> <tr> <td colspan="5" id="emptyrow"></td> </tr> <tr> <td colspan="5" id="sitecredits">Credits</td> </tr> </table> Thank you for the help! Hi I have problem with IE7 at present with a HTML table. The problem may span beyond HTML tables but basically the colors are coming out all wrong. Firefox is fine, I'd hardcode bgcolor="red" and it comes out red. In IE7 it comes out blue however Most other colours apart from black and white are the same. Does anyone know what is causing this? Hi! this is really weird. I build a simple page with a table with a background picture. In Explorer it's all good but in Chrome & Firefox, you cant see the background picture of the table. help please? thanks Jeni I have searched this and other forums and tried everything I could possibly think of to fix this. The space doesn't appear in any browser except IE, and unfortunately I need to make the site work fine in IE as well: http://www.mountwernerrealty.com/index3.html I have the exact same table at the very bottom of this page that is centered in both IE and Firefox... http://www.massagelaunch.com/ but on this page I have the exact same table that IS NOT CENTERED in Firefox...any idea why? http://www.massagelaunch.com/affiliates.html Thanks in advance! Hi, I have searched the forums for an answer to this question, but I couldn't find anything that solves my problem. I have designed a site in Dreamweaver. http://www.dirt-e-riders.com In IE 6 and IE 7 it shows correctly, but in firefox the backgound image for my table doesn't show. In effect I have two main tables, each sized at 100% width. Table 1 is at the top of the page and contains a bg. in jpg format Table 2 is just below that and also contains a bg. in gif format I didnt make the bg for table1 a gif cause the quality is too poor. The bg for table1 does not show, but the bg for table 2 does. I have already tried to read the bg from my CSS with no repeat but it does the same. Could someone please help me. I'm new to web design. Your help will be greatly appresiated. Thanks Anyone else come across problems with table rendering in firefox? It seems to happen with larger tables, say a table with 30+ cells for a calendar. Sometimes firefox will render extra cells and throw everything off. The code is fine, this will happen randomly in different locations. Sometimes a refresh will fix the issue, sometimes the refresh will just move the issue to another location. I've noticed that display:inline-table; fixes the problem for firefox, but in other browsers like opera display:inline-table; will get rid of margins (which I need). Anyone know anything about this? Hi guys Attached is an image of the problem I'm having where in Firefox my table borders are not displaying correctly. I've coded using standard html as follows: Code: <table width=100% cellspacing="0" cellpadding="5" bgcolor="ffffff" border="1px" bordercolor="C0CFE2"> Any Ideas? The one on the left is the Firefox version. 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, My website layout is based on html tables about 750 pixels wide and was set up in Dreamweaver 4. It works fine in Explorer, but in Firefox each page explodes to the full screen size during loading before snapping back to the correct size when loading completes. This is ok, but I would prefer it to display correctly whilst loading (as it does in Explorer) as it looks rather messy. Is there a way to prevent this? Thanks, Richard. Hi Everyone, This sort of issue must be raised pretty often, but: I just uploaded a website for a friend of mine. I'm a firefox 1.5 user, but believed i had tested in IE also. I was dismayed this morning though to discover on of my pages looks completely ridiculous in IE 6. If you have facility, check the page out with both IE and firefox at http://www.bayonetrecords.com/record...ayrequiem.html I'm using a repeating region to add tracks to an album template. Apart form misusing the template, i have no idea what could cause such a divergance in IE. I'm by no means an advanced HTML user, but at very least thought i knew how to insert a table! Any help on this issue would be greatly appreciated, as would any pointers on how to keep IE in check thanks in anticipation, asher. Hi Everyone- I'm hoping someone out there might be able to solve a problem I've been having with my site for a number of years. The site was designed for IE but with the growing popularity of Firefox and Safari (to name a few), I want to insure that it works properly with those browsers. For the most part, it does -- except when displaying a background image in a table. For example - look at this page: http://www.cygnus-x1.net/links/rush/...anentwaves.php When viewed in I.E., the grey background image with the woman displays properly, as does the full image of the album cover within. However when viewed in Firefox or Safari, the background image repeats near the bottom for about 20 pixels. The problem also exists on a page like this one: http://www.cygnus-x1.net/links/rush/lyrics.php Where the brown background image which includes the words "Rush Lyrics" displays properly in I.E. but seems to repeat for 20 pixels in FF. This one's been driving me crazy for years and, due to some recent changes I've been making, it's come back to haunt me. If anyone has any suggestions as to why this is happening and what I can do to remedy it, I would greatly appreciate it... Thanks so much. |