/    Sign up×
Community /Pin to ProfileBookmark

Untraceable Firefox Bug…

Copy linkTweet thisAlerts:
Feb 22.2006

I’m seriously considering offering a reward to anyone who can help with this ?

You’ll have to take a couple of steps to see the bug:

  • 1. in Firefox, go to [url]http://www.firstchoicevacationhomes.com/findavilla.asp[/url]

  • 2. Click on ‘North America’

  • 3. Click on ‘List All Properties in North America’

    • The resulting list doesn’t display property in Firefox. Not all the borders are displayed, but usually the calendar on the 2nd property is actually floating OUTSIDE the cell its meant to be in.

    Of course, its all drawn properly in IE but more curiously, if you hit ‘refresh’ it all draws properly in Firefox too ?

    It passes W3C Validation, and I’ve neatened up the code as best I can… please can someone shed some light on this!

    to post a comment
    CSS

    18 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @KravvitzFeb 22.2006 — Seems ok in Firefox 1.5.

    I do see the problem in Netscape 7.2. So it appears they fixed the bug in Mozilla 1.8, which is the engine that Firefox 1.5 uses.
    Copy linkTweet thisAlerts:
    @cusimar9authorFeb 22.2006 — I'm using FF 1.5.0.1
    Copy linkTweet thisAlerts:
    @KravvitzFeb 22.2006 — Hmm... it showed up in Firefox 1.5 this time.

    I suggest you make a mimimal test case. If you haven't made one before, you need to remove all of the HTML and CSS that is not related to the bug.
    Copy linkTweet thisAlerts:
    @cusimar9authorFeb 22.2006 — I did mention this bug before, did a minimal test case and we fixed it - it ended up being that I was displaying too many properties at once and FF couldn't handle it.

    But now I'm only displaying 4 properties and its still happening.

    If I dowload the page and load it offline the bug doesn't occurr...
    Copy linkTweet thisAlerts:
    @KravvitzFeb 22.2006 — Have you tried putting each property in a separate table?

    You could use JavaScript to refresh the page when it finishes loading, but it's nest to avoid hacks like that.
    Copy linkTweet thisAlerts:
    @cusimar9authorFeb 23.2006 — Well putting each property in a seperate table seems to have fixed it... I now have to have a gap between the properties though

    The main problem now is my <colgroup> definition, I have to repeat it for each property. Can I just mention it once?

    <i>
    </i> &lt;colgroup span="8"&gt;
    &lt;col span="1" style="width:150px;"&gt;
    &lt;col span="1" style="width:30px;"&gt;
    &lt;col span="1" style="width:15px;"&gt;
    &lt;col span="1" style="width:30px;"&gt;
    &lt;col span="1" style="width:15px;"&gt;
    &lt;col span="1" style="width:95px;"&gt;
    &lt;col span="1" style="width:30px;"&gt;
    &lt;col span="1" style="width:30px;"&gt;
    &lt;/colgroup&gt; <br/>
    Copy linkTweet thisAlerts:
    @cusimar9authorFeb 23.2006 — Well will you look at that

    Instead of starting a new table for each property I just wrapped each property in its own <tbody></tbody> tags and it works great now!

    Finally!
    Copy linkTweet thisAlerts:
    @cusimar9authorFeb 26.2006 — Nope its still not working :mad:

    So... back to my question in post #7

    Can I have a single <colgroup> definition for multiple tables?
    Copy linkTweet thisAlerts:
    @FangFeb 26.2006 — Nope its still not working :mad:

    So... back to my question in post #7

    Can I have a single <colgroup> definition for multiple tables?[/QUOTE]    Works ok ?

    <colgroup> will have to be defined for each table.

    btw validation not correct; backslashes in some img paths and no attribute summary in table(s)
    Copy linkTweet thisAlerts:
    @cusimar9authorFeb 26.2006 — I've made those changes thanks Fang (what validation did you use to point out the errors?)

    Seems to be working again now... its such a weird error, only comes up occasionally ?
    Copy linkTweet thisAlerts:
    @FangFeb 26.2006 — [URL=http://users.skynet.be/mgueury/mozilla/]Mozilla extension[/URL]

    Try removing StatCounter. It could be delaying the loading of the css
    Copy linkTweet thisAlerts:
    @cusimar9authorFeb 26.2006 — Thanks, I'll install that extension when I get a minute

    And I'll try removing StatCounter too...
    Copy linkTweet thisAlerts:
    @cusimar9authorFeb 27.2006 — Removed StatCounter... and fixed all the validation errors... but the bug is still there

    Most noticeable is that the bottom properties don't always have all the table borders they should have (particularly the borders above/below the coloured bar) yet a refresh always loads them correctly

    Any other suggestions? I'm really at a loss
    Copy linkTweet thisAlerts:
    @FangFeb 28.2006 — I'm still not getting the problem, but I think this is due to [I]border-collapse[/I]

    Change this:&lt;table class="table-fancy" [COLOR=Green]cellspacing="0"[/COLOR]&gt;
    and the css

    I've switched off most of the borders and some redundant font:table.table-fancy
    {
    xborder-spacing: 0px ;
    xborder-collapse: collapse ;
    xborder: 1px solid RGB(170,170,255);
    border-top: 1px solid RGB(170,170,255);
    border-left: 1px solid RGB(170,170,255);
    }
    table.table-fancy td {
    border-right: 1px solid RGB(170,170,255);
    border-bottom: 1px solid RGB(170,170,255);
    font: 11px Tahoma, Arial, Helvetica, sans-serif;
    }
    table.table-fancy td.cell-fancy-leftpadding,
    table.table-fancy td.cell-fancy-nopadding {
    border-right: 0;
    }

    td.cell-fancy
    {
    xborder: 1px solid RGB(170,170,255);
    margin: 0px; padding: 5px;
    xfont: 11px Tahoma, Arial, Helvetica, sans-serif;
    }

    td.cell-fancy-nopadding
    {
    margin: 0px; padding: 0px;
    xfont: 11px Tahoma, Arial, Helvetica, sans-serif;
    xborder-bottom: 1px solid RGB(170,170,255);
    height: 25px
    }

    td.cell-fancy-leftpadding
    {
    margin: 0px; padding: 0px 0px 0px 5px;
    xfont: 11px Tahoma, Arial, Helvetica, sans-serif;
    xborder-bottom: 1px solid RGB(170,170,255);
    height: 25px
    }

    td.cell-fancy-nopadding-border-right
    {
    margin: 0px; padding: 0px;
    xfont: 11px Tahoma, Arial, Helvetica, sans-serif;
    xborder-bottom: 1px solid RGB(170,170,255);
    xborder-right: 1px solid RGB(170,170,255);
    height: 25px;
    }

    td.cell-fancy-shade
    {
    xborder: 1px solid RGB(170,170,255);
    margin: 0px; padding: 5px;
    xfont: 11px Tahoma, Arial, Helvetica, sans-serif;
    background-color: RGB(210,219,255);
    color: #303030;
    }

    td.cell-property-blue
    {
    xborder: 1px solid RGB(170,170,255);
    margin: 0px; padding: 5px;
    xfont: 11px Tahoma, Arial, Helvetica, sans-serif;
    background: #dcd8fb url(images/bg_prop_blue.jpg) repeat-x bottom;
    color: #303030;
    }
    td.cell-property-blue a { color: #303030; text-decoration: underline;}
    td.cell-property-blue a:hover { color: #3030FF; text-decoration: underline;}

    td.cell-property-red
    {
    xborder: 1px solid RGB(170,170,255);
    margin: 0px; padding: 5px;
    xfont: 11px Tahoma, Arial, Helvetica, sans-serif;
    background: #ff4222 url(images/bg_prop_red.jpg) repeat-x bottom;
    color: #FFF;
    }
    td.cell-property-red a { color: #FFF; text-decoration: underline;}
    td.cell-property-red a:hover { color: #55F; text-decoration: underline;}

    td.cell-property-green
    {
    xborder: 1px solid RGB(170,170,255);
    margin: 0px; padding: 5px;
    xfont: 11px Tahoma, Arial, Helvetica, sans-serif;
    background: #adfeb9 url(images/bg_prop_green.jpg) repeat-x bottom;
    color: #303030;
    }
    td.cell-property-green a { color: #303030; text-decoration: underline;}
    td.cell-property-green a:hover { color: #3030FF; text-decoration: underline;}

    td.cell-sponsored-small-title
    {
    xborder: 1px solid RGB(170,170,255);
    margin: 0px; padding: 2px 4px 2px 4px;
    font: 9px Tahoma, Arial, Helvetica, sans-serif;
    background: #adfeb9 url(images/bg_prop_green.jpg) repeat-x bottom;
    color: #303030;
    }

    td.cell-sponsored-small
    {
    margin: 0px; padding: 2px 4px 2px 4px;
    font: 9px Tahoma, Arial, Helvetica, sans-serif;
    color: #505050;
    background-color: #f4f4f4;
    border: 1px solid #cccccc;
    }

    td.cell-sponsored-small-picture
    {
    margin: 0px; padding: 1px;
    font: 9px Tahoma, Arial, Helvetica, sans-serif;
    color: #505050;
    background-color: #f4f4f4;
    border: 1px solid #cccccc;
    }

    td.cell-sponsored-clear
    {
    border: 0px;
    margin: 0px;
    padding: 0px;
    font: 3px Tahoma, Arial, Helvetica, sans-serif;
    background: #FFF;
    }
    Copy linkTweet thisAlerts:
    @cusimar9authorFeb 28.2006 — Thanks Fang that must have taken you a while!

    I've tried it on another page and it looks alright, I'll try it when I get home and see if it works there too then I'll change it everywhere

    Much appreciated ?
    Copy linkTweet thisAlerts:
    @cusimar9authorFeb 28.2006 — Fang it looks like its fixed it... you're a genius!

    What exactly was the problem then? You mentioned the border-collapse property...
    Copy linkTweet thisAlerts:
    @FangMar 01.2006 — [I]border-collapse[/I] will work if the css is relatively simple. Too much css and FF gets confused.

    "cssitis" was the problem; keep css to a minimum and optimise declarations and rules.
    Copy linkTweet thisAlerts:
    @cusimar9authorMar 01.2006 — Right, I'll try and remember that

    Cheers ?
    ×

    Success!

    Help @cusimar9 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...