HTML - Table Thead Breaks And Drops Down.
Any idea how this could happen?
http://frostyle.servehttp.com/temp/shuttle_manage.jpg There isn't much CSS applied to the table or the thead, and this only sometimes seems to happen. Not sure if this is Firefox only or not. Any ideas? Thanks. Similar TutorialsI've created a table using xhtml similar to the following: <table> <caption></catpion> <thead></thead> <tbody></tbody> <tfoot></tfoot> </table> For some reason, when I set the caption height > 30px the caption section starts repeating itself but not with the caption text. Here's a pic: http://instagr.am/p/IM55OpPYn5/ I get this behavior in both IE and FF. Is this the expected behavior? Is there a workaround for this? It seems like xhtml would provide more flexibility than this.... Hi, i'm doing an interface for a database, and i want to print my query results on tables. As i have many entries, i need a big table so i want to do a table with scroll where my header doesn't get out of sight (ever) when i scroll down. im working on NuSphere Phped, Windows 7. This code is working only on the PHPed simulator...on chrome and FF the scrollbar dont appear: PHP Code: <table align="center" cellpadding="3" cellspacing="0" style="border: black; border-style:double ; border-spacing: 0; cursor:default;"> <thead> <?php ###### ###### processing the query for($i=0; $i<$numcol; $i++) { ####### echo "<th bgcolor=\"#000000\" "; ####### some conditions for mouse events echo "><font face=\"helvetica, cursive\" size=\"-2\" color=\"white\">"; echo $column_name"</font></th>"; } ?> <th style="width: 16px; background: black;"></th> ##16px for the scrollbar </thead> <tbody style="overflow-y: scroll;overflow-x:hidden; height: 300;"> <?php $i=0; do{ ######## ######## ?> <tr onmouseover="this.bgColor='#B3BC7A'" onMouseout="this.bgColor='<?php if($i%2==0) echo "#eeeeee"; else echo "#ffffff"; ?>'" <?php if($i%2==0) echo " bgcolor=\"#eeeeee\" "; else echo " bgcolor=\"#ffffff\""; ?>> <?php for($j=0; $j<$numcol; $j++) { ?> <td <?php #######more php query precessing ########## ?> ><font face="helvetica, cursive" size="-2"> <?php } echo $attribute; ?> </td> <?php } ?> </font> <td style="width: 16px; overflow: scroll;"></td></tr> <?php $i++; }while($currentRow) ?> </tbody> </table> can someone tell me how to make it work on those browsers? When you format some text in a table cell (at least with <p> or <li> tags), some browsers drop it down one line, so that it can't fully valign top. Apparently Safari and Firefox do this. (IE seems to not do it - it valigns it to the top). Others may exhibit this behaviour, but these are all I've tested. Here is an example (view with Safari or Firefox to see problem): http://www.fisheyemedia.net/test/ Is there any way around this? Maybe with CSS? I have a more complex table in 2 columns and am trying to get vertical alignments to match. Thanks. When I view the HTML in a normal IE browser it works fine: www.virtuosovideo.com/myspace When I plug the same HTML into a MySpace profile the table gets broken up: www.myspace.com/adamhaviland Any idea why? Your help is greatly appreciated. Thanks, Adam Basically what I want is a floating table head that follows you around when you scroll the table. Did all that, but the problem is that you need to cut out the head of the table to make it float. The problem comes where you have a table that has no column width set so the column width is determined by the content of tbody. I'm trying to make the browsers keep rendering the entire table, but hide the tbody so the columns won't loose their widths. It works fine in Mozilla and Opera, but IE has problems. Here is the code: HTML Code: <html> <head> <style type="text/css"> table { border-collapse: collapse; } tbody td { line-height: 0px; visibility: hidden; } </style> </head> <body> <table id="table_test" border="0" cellpadding="0" cellspacing="0" style="background-color: red;"> <thead> <tr> <th>column1</th> <th>column2</th> <th>column3</th> <th>column4</th> <th>column5</th> <th>column6</th> <th>column7</th> </tr> </thead> <tbody> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> </tbody> </table> </body> </html> And the result can be seen in the attached picture. Any ideas how to solve this or another way to preserve the thead column widths? I just designed and coded this site last night: www.cteaguedesign.com In Safari, the alignment and breaks on the table are perfect, but in any other browser, the topmost cell seems to slide up, and other problems seem to occur here. I realize that every page views differently in different browsers (i.e. IE), but I honestly didn't expect Firefox to act up on me. Visit the page, check the code, and tell me what the problem is. I'm stumped. Forgive me for this rather elementary question...I'm a T-shirt printer and I've learned enough html to build my own website, but I have a lot more to learn about it...Anyway the problem I'm having is when I add an image and want the next paragrah, or headline to display below the image, I've been accomplishing it by adding line breaks until it appears below rather than off to one side. Sometimes I have to add as many as seven or eight <br />'s to achieve my purpose. Is there a better way to make something appear below an image? I am trying to build a page using drupal CMS but I have a problem. Whenn add checkbox, text and submit button together, each of them gets in a different line. It looks like i use <br> although i don't. Adding content with a WYSIWYG editor seems to be working into the editor content area. But when I save it, it appears again in different lines,no matter in which place of the frontpage I add it. So I guess I guess the reason is the style.css file. But I can't find the exact line that damages my code. In pictures below you can see 1)the content correctly presented into WYSIWYG editor 2)The content in frontpage (awful) 3)The simple html i use 1) http://www.teicrete.gr/libsite/files...wyg_editor.JPG 2) http://www.teicrete.gr/libsite/files...page_error.JPG 3) http://www.teicrete.gr/libsite/files/3_simple_html.JPG Any help would be great... Thanks in advance! Is there a way I break (<br />) between rows in tables? I'm actually not totally looking to break, but somehow get an invisible space in between each row. I realize I can make the tables border="0" and just have a row of nothing, but I want to make the rest of tables borders see-able. Example HTML Code: <table border="1"> <tr> <td>Text here</td> </tr> Somehow get an invisible break <tr> <td>Text here</td> </tr> </table> Hello, I am using a JSP to populate a web page for a report. I get the results I want, but for some reason I get a whole lot of white space in between my title and my report body. I went through the HTML that was produced and did not see any extra <BR> lines or anything like that, so on a more fundamental level, does anyone know why you might get a whole lot of white space between things? Any debugging tips and HTML knowledge are appreciated! Thanks, Steve Okay, so here's what I'm trying to do- This is a short excerpt of my page, the part that is causing the problem: HTML Code: <font color=#333333><b>Category: <div id="category" align="left">Category</div></b></font> I want to DISPLAY the Html code on my site, so I'm using < and > to achive this. Its working perfectly. Now, in the code that is being displayed- is an actual HTML code, that I want to turn into html. Here's where the problem is. As you can see- the actual Html code is: HTML Code: <div id="category" align="left">Category</div> I made sure not to change the tags, so that the browser will accept it as html. Now- my problem is that when I publish this on my site, an ugly page break appears before & after the real html code. I want to be able to copy the code that appears, and just simply paste it onto another part of the site- BUT, because of the line break that occurs, the HTML isn't displayed properly. Normally, a simple line break like this one won't affect anything- but I'm using WORDPRESS for my pages, and wordpress recognizes every time a line break happens, it makes a <br> code. So even if you press the enter key in HTML, it automatically ends up being a <br> code and breaks the whole html code. How will I make it so that the line break DOESN"T happen? TL;DR: I want to display HTML code on my site, but I want to have an ACTUAL HTML CODE inside the html code to be displayed. When I do this, a line break happens before and after the ACTUAL HTML CODE. How do I get rid of this? What my page currently looks like: HTML Code: <font color=#333333><b>Category: <div id="category" align="left">Category</div></b></font> Please help, everything is greatly appreciated! removed thank you I'm having trouble adding a line break between my form items. I've tried all the obvious solutions and nothing is working; either the breaks appear about the forms and below the text, or the form itself is moved to halfway across the page. I've tried using <br> tags and I've tried <tr> <td colspan="2"> <br> </td> <tr> and many variations, but none do what I what. Here's my code: Page Content goes here. <BR><BR><BR> <form id="form1" name="form1" method="post" action="http://www.usa-7.com/scripts/shared/refmlr"> <input name="destEmail" value="emailaddressgoeshere" type="hidden"/> <input name="reqType" value="Contact Us" type="hidden" /> <input name="numReqParms" value="5" type="hidden" /> <script src="validate.js"></script> <style> input.invalid {background: #ff0000;} input.valid [background: #afa; } </style> <table height="200" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> First Name: </td> <td><input name="First Name" size="30" maxlength="55" type="text" /></td> </tr> <tr> <td> Last Name: </td> <td><input name="Last Name" size="30" maxlength="55" type="text" /></td> </tr> <tr> <td> Email Address: </td> <td><input name="Email" size="30" maxlength="200" type="text" /></td> </tr> <tr> <td> Phone Number: </td> <td><input name="Phone" size="30" maxlength="35" type="text" /></td> </tr> <tr> <td> Comments: </td> <td><textarea name="Comments" cols="50" rows="8"></textarea></td> </tr> </tbody> </table> any help would be great. Thanks! hi y'all. my site looks fine in firefox (as usual) but ie is doing something weird. behavior is identical in IE 6 and 7, incidentally. the problem is in the sidebar. see the underlined titles for each section? in IE, a mysterious line break appears above each. what's going on? For some reason whenever I have an img tag it causes an automatic line break. I was wondering if anyone else has encountered this problem. Basically i'm trying to add an small icon to the left of an active link. So the code basically looks like this.. <img src="icon.jpg"><a href="link.html">text link</a> The end result is a icon on one line and the link rests below it instead of everything being on one line. This is the first time this has ever happened and i'm wondering if this is normal? I realize this may seem like a noob question but any help would be appreciated. Thanks. Hi I have the following code loading an external .txt file into a DIV <?php $content = file_get_contents($_SERVER['DOCUMENT_ROOT']."/text_files/about_text.rtf"); echo htmlspecialchars($content); ?> It loads, but the line breaks are ignored, so it appears as one continous string of words. How do I make the html display the text file's line breaks? Thanks for your time and info Shaun Hello HTML Forum community, I volunteered to work on my organization's website, and it has all been going smoothly until now. Notice the odd spacing on the following page: http://gadshillcenter.org/aboutus/aboutus_needs.php And pretty much any other page in the About Us Section. But the following, seemingly identical page does not have this spacing: http://gadshillcenter.org/newsevents...herreading.php What can I do to remove these stupid breaks/spaces after the header? I compared each .php line per line, and they are both pretty much identical. I pasted another header (from News and Events) into the About Us, and it still resulted in this spacing, proving that it is an issue with the About Us pages. What might be causing this? It is driving me nuts! Sincerely, Andrew Hey guys, this may seem as an easy solution but I've been pulling hair over it. How do I get rid of the blank line breaks that appear before and after unordered lists? I attached a picture to this thread of what I am exactly talking about. Thanks in advance! |