Sometimes the borders of my tables won't show properly in Firefox. Usually when I'm retrieving more than a handful of records
It seems to be related to the way the page loads. In IE I set the page buffering to true so that the browser waits until it has all the data before displaying it. Firefox however seems to insist on loading it as it arrives and as a result it messes up the drawing of the borders.
Its only on the top few rows as well, the last rows seem to be fine.
Any suggestions?That's a very common glitch in Gecko based browsers, and I think it has something to do with the Gecko Shifting Gaps 'n Overlaps bug (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/gecko/mozshift.html">http://www.positioniseverything.net/gecko/mozshift.html</a><!-- m -->). Note that many browsers suffer from this behavior once in a while. It also can have something to do with the order in which you specify the borders of table cells.Hmm... I don't have a 'line-height' property specified in any of the affected divs though...
Clicky (<!-- m --><a class="postlink" href="http://www.firstchoicevacationhomes.com/listproperties.asp?locationA=1">http://www.firstchoicevacationhomes.com ... ocationA=1</a><!-- m -->)In IE I set the page buffering to true so that the browser waits until it has all the data before displaying it.Where do you do this? This is the default for IE.Oh yeah... well I just meant I had a play around with itAre your tables using collapsed borders? If yes, a workaround is to attach a basically empty binding to these tables.Yes I am using collapsed borders... how do you mean attach an empty binding?
Nice site.Validate your html and, especially, your css. You have errors in your css that may be affecting this.Yes I am using collapsed borders... how do you mean attach an empty binding?Add the following declaration to your table's style rule:
-moz-binding: url(binding.xml#dummy)
And you need a new file 'binding.xml': <?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="dummy">
<content/>
</binding>
</bindings>I can't guarantee that this works all the time but I've had good success with it.Talk about a hack. Nice site.
Thanks Its taken ages but its nearly there now...
drhowarddrfine I've just checked and fixed a couple of CSS errors...
Orc Scorcher I don't know WHAT that is lol I'll give it a try if I can't figure out another waySo now I don't see any border issues. Am I missing something?
Orc is using xml to fix a html table. That's why I say that's a ridiculous hack unless I'm misunderstanding something somewhere.Sorry drhowarddrfine, I keep tweaking the website. I've hacked it to show up the error again
It only seems to happen when I display a LOT of records, here its 500.
The pages now passes HTML 4.01 STRICT, and the CSS Validates as well
This is really weirdI'm running out the door but check to see if your image isn't covering up the border on the left. Maybe make it thinner or remove it.
EDIT: In fact, your images are covering up the left border. Can't look into it myself right now.Thanks, but I don't think its the images. If you scroll to the very bottom you'll see which borders you SHOULD be able to see... there's borders everywhere and they're ALL invisibleToo big a table and way too much css for FF to handle.
Place all css in the external css.
Optimize the table styles; whichever class is used the most use as the td rule.
I can understand stress testing the layout, but 500 houses. No-one would want to look at more than 20 houses. Maybe 5 houses on a page with the option to make a selection to show on another page. Just an idea.The problem is that collapsed borders and incremental reflow don't play nice together. The little trick with the binding is supposed to delay the rendering until the table is complete but in the case of your huge table the delay isn't long enough to have an effect.
I could adjust the binding so the table is only rendered after the page is complete, that fixes the border problem but it makes the page look a bit empty while it's still loading. Pick your poison.Hmmm... the problem I guess only became apparent in the ADMIN section where I DO have all the houses displayed at the same time...
I'll remove the CSS from the page, that'll give it much less to load as wellRight this is ridiculous...
I've limited the number of records to 10 per page, the page validates as 4.01 Strict, I've removed all CSS to an external file yet it STILL won't display properly in CSS
This is the link...
CLICKY (<!-- m --><a class="postlink" href="http://www.firstchoicevacationhomes.com/listproperties.asp?locationA=1">http://www.firstchoicevacationhomes.com ... ocationA=1</a><!-- m -->)
Try hitting "refresh" a few times and I guarantee the table borders will dissappear...No problems ...lol typical its not doing it any more
Cheers Guys
It seems to be related to the way the page loads. In IE I set the page buffering to true so that the browser waits until it has all the data before displaying it. Firefox however seems to insist on loading it as it arrives and as a result it messes up the drawing of the borders.
Its only on the top few rows as well, the last rows seem to be fine.
Any suggestions?That's a very common glitch in Gecko based browsers, and I think it has something to do with the Gecko Shifting Gaps 'n Overlaps bug (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/gecko/mozshift.html">http://www.positioniseverything.net/gecko/mozshift.html</a><!-- m -->). Note that many browsers suffer from this behavior once in a while. It also can have something to do with the order in which you specify the borders of table cells.Hmm... I don't have a 'line-height' property specified in any of the affected divs though...
Clicky (<!-- m --><a class="postlink" href="http://www.firstchoicevacationhomes.com/listproperties.asp?locationA=1">http://www.firstchoicevacationhomes.com ... ocationA=1</a><!-- m -->)In IE I set the page buffering to true so that the browser waits until it has all the data before displaying it.Where do you do this? This is the default for IE.Oh yeah... well I just meant I had a play around with itAre your tables using collapsed borders? If yes, a workaround is to attach a basically empty binding to these tables.Yes I am using collapsed borders... how do you mean attach an empty binding?
Nice site.Validate your html and, especially, your css. You have errors in your css that may be affecting this.Yes I am using collapsed borders... how do you mean attach an empty binding?Add the following declaration to your table's style rule:-moz-binding: url(binding.xml#dummy)
And you need a new file 'binding.xml': <?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="dummy">
<content/>
</binding>
</bindings>I can't guarantee that this works all the time but I've had good success with it.Talk about a hack.
Nice site.Thanks
Its taken ages but its nearly there now...drhowarddrfine I've just checked and fixed a couple of CSS errors...
Orc Scorcher I don't know WHAT that is lol I'll give it a try if I can't figure out another waySo now I don't see any border issues. Am I missing something?
Orc is using xml to fix a html table. That's why I say that's a ridiculous hack unless I'm misunderstanding something somewhere.Sorry drhowarddrfine, I keep tweaking the website. I've hacked it to show up the error again
It only seems to happen when I display a LOT of records, here its 500.
The pages now passes HTML 4.01 STRICT, and the CSS Validates as well
This is really weirdI'm running out the door but check to see if your image isn't covering up the border on the left. Maybe make it thinner or remove it.
EDIT: In fact, your images are covering up the left border. Can't look into it myself right now.Thanks, but I don't think its the images. If you scroll to the very bottom you'll see which borders you SHOULD be able to see... there's borders everywhere and they're ALL invisibleToo big a table and way too much css for FF to handle.
Place all css in the external css.
Optimize the table styles; whichever class is used the most use as the td rule.
I can understand stress testing the layout, but 500 houses. No-one would want to look at more than 20 houses. Maybe 5 houses on a page with the option to make a selection to show on another page. Just an idea.The problem is that collapsed borders and incremental reflow don't play nice together. The little trick with the binding is supposed to delay the rendering until the table is complete but in the case of your huge table the delay isn't long enough to have an effect.
I could adjust the binding so the table is only rendered after the page is complete, that fixes the border problem but it makes the page look a bit empty while it's still loading. Pick your poison.Hmmm... the problem I guess only became apparent in the ADMIN section where I DO have all the houses displayed at the same time...
I'll remove the CSS from the page, that'll give it much less to load as wellRight this is ridiculous...
I've limited the number of records to 10 per page, the page validates as 4.01 Strict, I've removed all CSS to an external file yet it STILL won't display properly in CSS
This is the link...
CLICKY (<!-- m --><a class="postlink" href="http://www.firstchoicevacationhomes.com/listproperties.asp?locationA=1">http://www.firstchoicevacationhomes.com ... ocationA=1</a><!-- m -->)
Try hitting "refresh" a few times and I guarantee the table borders will dissappear...No problems ...lol typical its not doing it any more
Cheers Guys