|
HTML - Style Of Rows Is Being Set To None Yet They Still Take Up Pixel Of Space In Firefox?
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. Similar TutorialsI am working on a layout for a website, I'm not new at all to HTML, it's just been a while. I have a banner taking up the first row of the table(colspan=2), and for the 2nd row, I have a menu and a text region. This 2nd row always has a small space between it and the 1st, even if cellspacing=0. Is there any way to do this with a simple <table>??? Someone told me that using a table would be less effective than using <div>, is this true? If so, how would I do this using <div>. Thank you for any suggestions. Can anyone tell me why there is a space at the bottom of my page between the images in the middle and the bottom image? The page looks fine in Firefox and I cannot figure out why there is a space in IE7. Any suggestions would be greatly appreciated. Thanks Frank http://www.spartafitness.com/home.htm I have built a table and it is doing something strange and I would like to know why. It is creating an extra line of blank space before displaying the text in a cell. This cell is within a table that is nested within another table. It's strange because it only has this behavior in Firefox, but not in IE. When I remove this nested table and put it in an HTML file all by itself, the behavior goes away, and the text butts up against the top of the cell like it is intended. The cell in question has nothing but text within it. If I take the original HTML file away from the style sheet it's linked to and away from all the images associated with it, and simply paste the HTML file to my desktop and open it, the blank line is still there. One other thing that is strange to me--when I open the "naked" file from my desktop in IE, IE creates placeholders for all the missing image files so I can see what's going on. When I open the file in FireFox, there are no placeholders, but rather it just recreates the table and shrinks it as if the images are not even there. I'm not exactly sure what code is creating the blank line, otherwise I would post it. So short of pasting in my entire HTML document, I thought I'd describe it and see if anyone has any ideas or may be able to give me some clues. If none of this does any good without the code in question, I'd be happy to post some. Thanks! The table on this page views okay in safari but in firefox there is a huge gap between the nav and the text.. http://naruphotography.net/AO/shedule.html any advice would be much appreciated 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. 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'm having some white space issues with a fairly straight forward website. I have a header which includes a logo, then a navigation bar below that at the top of my website. In Firefox there is extra space at the top of my website, but not in IE or Safari. Now, my navigation bar uses Javascript to animate the mouseOver images. If I take out the Javascript functions defined that makes this work, then there is no space at the top in Firefox! This Javascript code is within the <head></head> tags. I hope someone can help with this, thanks! Hey guys, i have a div setup to overflow:auto; to scroll through comments on the site. It works correctly in Chrome, Internet Explorer, and Safari, but Firefox is showing a bunch of empty space thats equivalent to the height of the page if the div was displayed without a scroll. http://www.greendayauthority.com/ind...20798&archive= Take a look at that page on different browsers. It ends correctly with the ads being at the end in other browsers, but with firefox, there's a bunch of dead space stretching the pages height. Any advice? 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 Hi Experts, I have an Iframe on a simple page. I am seeing an usual big white space between the header and the Iframe in Internet Explorer.. Same link is working fine on Firefox. how do i make it work in IE as well. PS: I have attached the snapshot of page. Code: <html>
<head>
<style type="text/css">
@import url("/analytics/static/styles/intranet.css"); /* main stylesheet */
@import url("/analytics/static/styles/intranet-2col.css"); /* column stylesheet */
@import url("/analytics/static/styles/intranet-2col-1024.css"); /* 1024px stylesheet */
</style>
<script language="JavaScript" src="/analytics/static/Fusion/FusionCharts/FusionCharts.js"></script>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="Rational Application Developer">
</head>
<body>
<div id="page-wrapper"><%@include file="Header.jsp"%>
<div id="column-wrapper"><!-- begin columns -->
<%@include file="NEW_TOOLBAR.jsp"%>
<div id="content"><!-- begin content column -->
<div class="inner">
<iframe src="chart.html?chartType=${detailForm.chartType}&chartGroup=${detailForm.chartGroup}&chartSubgroup=${detailForm.chartSubgroup}&liabilityCode=IRU&timeline=${detailForm.timeline}&width=600&height=400" frameborder="0" scrolling="no" width="700" height="430" align="top"></iframe>
<p><small> </small></p>
</div>
<!-- end content column, then column wrapper --></div>
</div>
<%@include file="Footer.jsp"%></div>
</body>
Hey all, I'm having a bit of trouble applying the style keyword to get it to work in firefox. It works fine in internet explorer. my code is: <table style="position:absolute;left:220;top:155" > as in it doesnt position the table in absolute, it still puts it UNDER any text rather than applying the position any ideas as to why this isnt working in firefox? is there an equivelent I can use to position a table on the screen? Hello, Thanks for taking a look at my question. I am in the beginning stages of setting up a site for a client and am running into the three pixel text jog problem with ie. Can anyone please take a look at my code and help me resolve this? Thank you for your time in advance. Thanks, Steve site: http://homepage.mac.com/stephenjames...ogh/index.html css: http://homepage.mac.com/stephenjames...s/ogh/main.css Ok I know this isn't really a HTML issue, but to avoid complex clientside pixel-counting of fonts I've thought of something far more simple. I need to limit the length of a string to stop it wrapping. The first step is to limit the string's length in characters, using the following php script: PHP Code: function trim_string($string) { $trim_string = '...'; $chars = 55; $chars_adjusted = $chars - strlen($trim_string); if (strlen($string) > $chars) { $string = substr($string,0,$chars_adjusted); $string .= $trim_string; } return $string; } Fine, no problem. Now however the strings are not all of equal length because of differences in length of each character (see the warmdebate.com homepage for my debacle). I thought that a relatively simple solution would be to simple use some sort of CSS or HTML wizardry to stretch the trimmed string to a fixed length (like full alignment, only for a non-wrapped string). Since this doesn't involve pixel counting or anything like that I figure it should be doable in CSS or HTML. Also, if there are any standard solutions to this other than what I'm proposing please let me know! i almost went crazy trying to troubleshoot this one... thought i'd share. HTML Code: <style type=text/css>
a:link {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
</style>
<table width="200" border="0" cellspacing="0" cellpadding="0"><tr>
<td width="100" valign="top">
<a href="link">Sample text </a>
<td width="100" valign="top">
<a href="link">Sample text</a>
</td></tr></table>
Turns out a "space" at the end of the link text pushes the text upwards slightly. Simply remove the space (or add on to the other line) or use the space code [ ] The css also plays a part, this doesn't appear happen when text is "unformatted" 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. Can any body tell me how to delete rows by row id (rows are added/deleted inbetween rows dynamically so I cannt use the index property) Hey can someone help me and tell me how i can make like a paragraph in boxes that are side by side with borders please. Thank you. Is there a way that anyone knows of to put list items side by side in a row? I'm currently working with some html/css/jquery that allows you to move li elements around and order them. However, instead of being on a new line for each element, I'd like to put several side by side in a row. Is there any way with html/css to make this happen, or is there no way to change the "nature" of li elements? |
|||||||