|
HTML - First <th> In Firefox Incorrectly Expanding To Enclose Rows Below
The code I am working with is actually inside of a .xls file. However, I am assuming that my problems are HTML-related.
Here is a picture of how it is incorrectly displaying in Firefox: Here's a picture of it in IE, which is how I want it to look in Firefox: Does anyone know what the most likely cause of this is? If you would like to see some code I can post it, I just didn't want it to come off as too overwhelming. It's about 70 lines of code for the whole table. A huge thanks to anyone who can help me out with this. Similar Tutorialshi guys. I am trying to get rounded edges to appear around my tables when displayed in Firefox. However, while it does display rounded edges, it also displays an angular border, which takes whatever colour the text has. here is the code. Quote: <!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=utf-8" /> <!-- TemplateBeginEditable name="doctitle" --> <title>Untitled Document</title> <!-- TemplateEndEditable --> <style type="text/css"> <!-- #MainCell { border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; width: 800px; background-color: #FFF; height: 1000px; } .whitebackground { } #LogoCell { background-color: #006; height: 15px; } #LinksCell { background-color: transparent; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; width: 77%; } #ContentCells { text-align: center; } #BottomLinksCell { } table { -moz-border-radius: 30px; border: #cc2800; } body { background-color: #006; color: #0F0; border: transparent; } .TableBackground { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } --> </style> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <link rel="stylesheet" href="../ajxmenu.css" type="text/css" /> <script src="../ajxmenu.js" type="text/javascript"></script> </head> <body> <table width="100%" border="1" align="center" id="MainCell"> <tr> <th scope="row"><table width="100%" border="1" id="LogoCell"> <tr> <th class="whitebackground" scope="row">LogoCell - I'll see if my guy will do something for you or if you can get a mate to, if not I'd go to a professional</th> </tr> </table> <table width="78%" border="1" align="center" id="LinksCell"> <tr> <th scope="row"><div class="AJXCSSMenueDFaTFD"><!-- AJXFILE:../ajxmenu.css --> <div class="ajxmw1"> <div class="ajxmw2"> <ul> <li><a href="#"><b>Home</b></a></li> <li><a class="ajxsub" href="#"><b>Gallery</b></a> <ul> <li class="sfirst slast"><a href="#">Slideshow</a></li> </ul> </li> <li><a class="ajxsub" href="#"><b>Corporate Work</b></a> <ul> <li class="sfirst slast"><a href="#">Testimonials</a></li> </ul> </li> <li><a class="ajxsub" href="#"><b>About Us</b></a> <ul> <li class="sfirst"><a href="#">Qualifications</a></li> <li class="slast"><a href="#">Business Associates</a></li> </ul> </li> <li class="tlast"><a href="#"><b>Contact Us</b></a></li> </ul> </div> </div> <br /> </div> </th> </tr> </table> <!-- TemplateBeginEditable name="ContentRegion" --> <table width="68%" border="1" align="center" id="ContentCells"> <tr> <th width="50%" height="113" scope="row"><p> </p></th> <td width="50%"> </td> </tr> <tr> <th height="135" scope="row"> </th> <td> </td> </tr> </table> <!-- TemplateEndEditable --> <table width="100%" border="1" id="BottomLinksCell"> <tr> <th scope="row">BottomLinksCell</th> </tr> </table> </th> </tr> </table> </body> </html> Can anyone tell me how I can get rid of the angular border, and just be left with the rounded one? Thanks! OK, so I have a dynamic table that can be filtered. The full table has just over 250 rows. My problem is that even by setting their display property to 'none', it still causes the rows to take up what seems to be a pixel of space. So, if several consecutive rows are hidden, it causes noticeable white space to appear and it can make it look really bad. In some cases over 100 consecutive rows are hidden and it causes a very large blank space to show. Oddly, I ran into this problem only when working in Firefox. It performs fine in IE. Here are some captures. Take note the number in the SEQ column shows what row it is: Before being filtered: After being filtered in IE: After being filtered in Firefox: I can't find anywhere else online where anyone has even had this particular problem. Can anyone help? I'm stumped. One possible solution I thought of was absolutely positioning all of the display:none rows on top of each other but I didn't know if that could work or not. Huge thanks to anyone who has a solution. I can post the JavaScript for the filtering if anyone thinks it may help. 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 All I am very new to HTML, and have employed the services of a junior designer to come up with a site for me. It can be seen at www.360ukproperty.co.uk, please excuse some of the pages are not completed yet. When clicking on the menu items, the relevant page loads in the faded out frame. This works on most computers, but for some reason it forces a new window to open up on my PC at home. It wirks fine on my designers's PC, my work PC and my laptop. This problem is on IE6, IE7 and Firefox. Very weird! The code for the homepage is pasted below: Hopefully its something simple.....~? <!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>360 UK Properties</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="frame" align="center"> <div id="main"> <iframe style="padding-top:94px; float:left;" src="title.html" name="mainFrame" scrolling="no" id="mainFrame" marginwidth="0" marginheight="0" frameborder="0" width="659" height="506"> </iframe> <div id="menu" align="left"> <p><a href="index.html">Home</a></p> <p><a href="why.html" target="mainFrame">Why 360?</a></p> <p><a href="how.html" target="mainFrame">How it Works</a></p> <p><a href="gallery.html" target="mainFrame">Gallery</a></p> <p><a href="faq.html" target="mainFrame">FAQ</a></p> <p><a href="price.html" target="mainFrame"> Prices</a></p> <p><a href="contact.html" target="mainFrame">Contact</a></p> <div id="bottom"> <p><a href="mailto:gustavbasch@yahoo.co.uk">info@360ukproperty.co.uk</a><br /> phone: +44 7875374689</p> </div> </div> </div> </div> </body> </html> Using the following code, if flash is not installed on a computer, while using IE a white box is shown instead of the alternate nested code: HTML Code: <object type="application/x-shockwave-flash" data="Theme/source.swf" width="647" height="61"> <param name="movie" value="source.swf" /> <a href="index.html"><img src="Theme/Banner/Name.gif" /></a><!-- --><a href="index.html"><img src="Theme/Banner/Spacer.gif" /></a><!-- --><a href="http://cart.source-entertainment.net"><img src="Theme/Banner/Logo.gif" /></a> </object> With IE and Flash it displays the flash animation fine, and with Firefox it displays the nested links and images correctly when not using flash, and also displays the flash animation correctly when flash is installs. The only issue is no flash installed on IE. Can anyone explain why this might be happening? Am I missing some IE-specific code? Or is it a problem with my animation? Any help would be appreciated. hey guys I was told to make another thread so u can help me with my problem... my site is opened wrongly in IE and mozilla...so here is css and html in attachments...but i didn't send u pics... I'm having problems with the blocks on the left hand side. They show up fine in Firefox but incorrectly in Internet Explorer. Can someone explain this to me please. The blocks are wider in IE than in FF http://aspekt.blogdns.com/ahs/layout2/test/index4.php Thanks Just wondering if someone out there is able to quickly spot the horrible quirk in the HTML on this page: www.vergola.co.nz/contact.htm It renders fine in Firefox and Safari, (ie the page content is at the top of the window) but in IE the content appears way down the page with a large white space above it. ( I hate IE so much) The page has been edited by numerous people of varying degrees of knowledge so the whole page is a bit of a mess... Thanks so much! Hello, so basically this summer I took the liberty of making a personal website for myself. I wanted to get to know XHTML and CSS a little bit more over the summer. Getting to my question though, I made a rollover menubar (using photoshop) and everything was going swell until I wanted to get it up and running in my html file. I made a table inserting the non and rollover images and instead of using the massive javascript code block Dreamweaver gave me I decided to use simple "onmouseover/onmouseout" code snippets. When I view it in Firefox it is fully functional but for some reason the rollover images are a little shifted, correct size, but shifted, so there is white space in between the non rollover images. Here's what is looks like: Here is the code for the table/banner (3 rows and 9 columns): Code: --------------------------------------------------------------------------------------------------------
banner_01: large blue block (3 rows merged) left of home
banner_02: blue rectangle above home
banner_03: vertical blue in between home/blog (3 rows merged)
banner_04: blue rectangle above blog
banner_05: vertical blue in between blog/misc (3 rows merged)
banner_06: blue rectangle above misc
banner_07: vertical blue in between misc/contact (3 rows merged)
banner_08: blue rectangle above contact
banner_09: vertical blue right of contact (3 rows merged)
banner_10/banner1_10: home (regular)/home (hover)
banner_11/banner1_11: blog (regular)/blog (hover)
banner_12/banner1_12: misc (regular)/misc (hover)
banner_13/banner1_13: contact (regular)/contact (hover)
banner_14: blue rectangle under home
banner_15: blue rectangle under blog
banner_16: blue rectangle under misc
banner_17: blue rectangle under contact
--------------------------------------------------------------------------------------------------------
<table align="center" width="925" height="140" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="283" rowspan="3"><img border="0" src="banner_01.gif" width="283" height="140"></td>
<td width="134"><img border="0" src="banner_02.gif" width="134" height="16"></td>
<td width="23" rowspan="3"><img border="0" src="banner_03.gif" width="23" height="140"></td>
<td width="134"><img border="0" src="banner_04.gif" width="134" height="16"></td>
<td width="23" rowspan="3"><img border="0" src="banner_05.gif" width="23" height="140"></td>
<td width="134"><img border="0" src="banner_06.gif" width="134" height="16"></td>
<td width="23" rowspan="3"><img border="0" src="banner_07.gif" width="23" height="140"></td>
<td width="134"><img border="0" src="banner_08.gif" width="134" height="16"></td>
<td width="37" rowspan="3"><img border="0" src="banner_09.gif" width="37" height="140"></td>
</tr>
<tr>
<td><!---HOME BUTTON--->
<a href="home.html"><img border="0" width="134" height="112" src="banner_10.gif"
onmouseover="this.src='banner1_10.gif';"
onmouseout="this.src='banner_10.gif';"/>
</a>
</td>
<td><!---BLOG BUTTON--->
<a href="blog.html"><img border="0" width="134" height="112" src="banner_11.gif"
onmouseover="this.src='banner1_11.gif';"
onmouseout="this.src='banner_11.gif';"/>
</a>
</td>
<td><!---MISC BUTTON--->
<a href="misc.html"><img border="0" width="134" height="112" src="banner_12.gif"
onmouseover="this.src='banner1_12.gif';"
onmouseout="this.src='banner_12.gif';"/>
</a>
</td>
<td><!---CONTACT BUTTON--->
<a href="contact.html"><img border="0" width="134" height="112" src="banner_13.gif"
onmouseover="this.src='banner1_13.gif';"
onmouseout="this.src='banner_13.gif';"/>
</a>
</td>
</tr>
<tr>
<td><img border="0" src="banner_14.gif" width="134" height="12"></td>
<td><img border="0" src="banner_15.gif" width="134" height="12"></td>
<td><img border="0" src="banner_16.gif" width="134" height="12"></td>
<td><img border="0" src="banner_17.gif" width="134" height="12"></td>
</tr>
</table>
I hope that the content didn't frazzle anyone, I would just like to fix the display of the menubar as it is fully functional. Thank you very much, JP EDIT: I would also like to make the banner the whole width of the browser but it breaks up the images when I try to do so, just wondering if anyone can figure that out too. Thanks! Hi, I've been working on this page for quite a while: http://www.mymusiclair.com/supporter It displays correctly in Chrome, IE, and FF on my hard drive, but once i upload it it displays wrong in everything except IE. I used FrontPage 2003 to make it... any suggestions? Thanks, Vicky Is there a way so that when you click a link, it will push everything below it down and show what they requested to see. I am planning on this for suggestions and help without users needing to re-load the page. Thanks. Sean Hi all, I have a simple table: Code: <table cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" rowspan="3">MAIN CONTENT</td>
<td>fixed</td>
</tr>
<tr>
<td>expandable</td>
</tr>
<tr>
<td>fixed</td>
</tr>
<tr>
<td>fixed</td>
<td>expandable</td>
<td>fixed</td>
<td>fixed</td>
</tr>
</table>
The 2 expandable tds need to expand / contract depending on the height and width of the main content cell (as they will have repeating backgrounds) When I try this it is always the other columns that expand or contract. (BTW, this is all for a shadow border for different image sizes) Anyone know how I can achieve this? Thanks! Hi How do you create a list that when you hover over it expands. As you can tell I'm new to HTMl. Thanks Bob v How do I expand the tables here at http://www.ultdmovies.com. What would I change, and be specific, to make it a certain size in pixels, or full screen. Hey i'm back and as idiotic as ever Ok when i over fill the tables they obviously expand but it destorys my template how can i make the images replicate or expand or whatever would be best, all help is good. Cheers EDIT: forgot to provide template link here I'm working on a website and I'm running into a problem with the left side cells. http://www.kbrmarketing.com/kbrnew/pages/problem.html If you look at the side on FF (3) is looks correct, but when you look at in in IE (i'm using 7) it's gets stretched out. I want only the bottom cell to expand as the page gets longer. Here's some pictures to help explain < IE < FF I just inserted those line breaks to extend the page to show you guys the problem. Eventually those breaks will be replaced with text and pictures. (the <br>'s are in the right cell, which causes the left cells to then expand) I need help Im tryng to create my webpage so that there are no scroll bars on the right or bottom. I want the content to fit right on screen without the need to scroll to view more content. But my problem is, my page is not even filled up yet, i only have my navigation on top plus my table in the center. my table width is "100" and height="50". its small on the page but everytime i expand it abit more, it makes the entire webpage bigger then the scroll bars start appearing. Im tryna make a page that fits right on screen without need to scroll. Is there a code to fix this. ?/ Good afternoon. I am hoping someone can help. I've used tables to create the layout of my website (www.bongoscribbler.com) and I'm linking to a php script for the blog which essentially inserts blog.php into the middle cell. I want the cell to expand downwards so that scroll bars aren't necessary. It does this when viewing it on the iPhone or on the iPad but when viewing using Safari, IE and Firefox on the PC the cell doesn't expand downwards, but rather it stays the same size and scroll bars appear. If I disable the scroll bars, the cell still doesn't expand downwards to fit in all the content but the additional content is just outside the view of the cell. Does this make sense? Perhaps if you take a look at the site and click "read more" you'll see what I mean. <tr> <th background="pictures/s_image11_6.gif" width="141" height="683" border="0"></th> <th background="pictures/s_image11_7.gif" ALT="Main" width="777" height="683" border="0"> <iframe src="http://www.bongoscribbler.com/cgi-bin/preview.php" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe> </th> <th background="pictures/s_image11_8.gif" width="82" height="683" border="0"></th> </tr> Does anyone know what attributes I need to give the cell/table to get it to expand downwards? I'll be very grateful for any help. Thanks a lot Tom Hi Guys, I have a page that seems to render fine in Firefox, but looks awry when I view it in IE. Could someone point out what the problem is and how to fix it? I've done some research on my own, and think it might have to do with IE's expanding box problem: http://www.adobe.com/cfusion/communi...NG_BOX_PROBLEM However, I haven't done much coding since 2001, so I could really use a helping hand. Thanks very much. URL of problem page: http://cervantes.webng.com/sims.html wanted to get an effect like this: http://www.azeotek.com/product_p/hg-m2.htm as you can see when you scroll over the image it has an expanded view. obviously it's some sort of java or code i have no idea how to do.. suggestions? |
|||||||