Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Page occasionally renders wrong in FF, fixes upon refresh.

    I'm finding that a bunch of sites I've made render incorrectly in FF and return to normal upon refresh (or if you go to edit the CSS using the web developer extension). Has anyone heard of this before?

    http://causafirma.com/services/ is a clear example. Keep refreshing until you see it push the main content way down (I'll post screen caps upon request). The CSS and XHTML strict are both 100% valid. This happens across multiple machines outside the testing server.

    What's going on? I'm thinking it might be due to using includes but I haven't been able to find any evidence of that, nor have I found a lot of people talking about this issue on the web. Any thoughts?

  • #2
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I didn't see the problem, but I'm guessing it's because of this:
    Code:
    <img src="i/services_IMG.jpg" alt="Our Services" />
    Try adding the height attribute.

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the input. I gave that a try but much to no avail. The problem will rear its head if you keep clicking the link in the navbar instead of just refreshing the page.

    http://causafirma.com/schedule/ is a more reliable example - and this is a form that contains no elements that would need a size attribute. Once you hit "edit css" in the web developer toolbar it goes back to normal.

  • #4
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Try floating your left and right columns in the same direction

  • #5
    New to the CF scene
    Join Date
    May 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried that just now (set the right column to float:left) and it produces a similar incorrect result. You can see it in effect because the updated stylesheet is still up. It appears as though something is clearing-right. You'd think that if it were a CSS issue though it would happen every time; this is only certain times for pages other than the form. What's going on?

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by ihavecomputer View Post
    What's going on? I'm thinking it might be due to using includes but I haven't been able to find any evidence of that, nor have I found a lot of people talking about this issue on the web. Any thoughts?
    Yeah I see it happening too. I downloaded your page and I couldn't make it happen locally. So I uploaded it to my host and tried. Here the bug reappeared. Screen shots provided for others to view:

    Normal state:
    http://i173.photobucket.com/albums/w...0_2_normal.png

    Rarely occurring state:
    http://i173.photobucket.com/albums/w..._0_2_error.png

    This rules out that it could be your server-side includes. But it seems to happen so rarely which makes it hard to debug. I suggest that you try to scrape off code until you find the minimal document that shows the error.

    It seems to be some sort of timing error. I would start removing images and see what happens. Then remove imported style sheets. Then try to use an embedded style sheet, etc.

    Keep us updated.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I think BonRouge is on to something. Add both width and heights to your images. I remember having this issue a while back in the earlier versions of Firefox. Add width and heights to my images seemed to resolve the issue. Reason it works after a refresh is because the images are already cached by the browser so it knows their sizes and renders the layout properly. And the page you linked to actually shows up fine on first view. It could be an issue with your extensions as well. Do you have the latest version of the web developer toolbar? Do you have Edit CSS open while viewing your page?
    Last edited by _Aerospace_Eng_; 05-17-2007 at 12:00 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New to the CF scene
    Join Date
    May 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I added the width property for the image on the http://www.causafirma.com/services page just for the heck of it and I'm still running into the same problem.

    I thought of possibly putting the width & height values into the CSS for that image element but that just seems like overkill to me. That's not standard practice, is it? To have CSS width & height declarations for every HTML element?

    This is so odd because I do 99.9% of my browsing through FF and I never see this problem on other sites. I've checked it on systems that have old versions of FF and ones w/o any extensions installed. It's the oddest thing. I'm going to keep digging into this issue and if I come up with something I'll be sure to report on it.

  • #9
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've had another look and can't find the problem. Try fixing your errors. That may help - one or two of your errors can cause real problems.

    http://validator.w3.org/check?verbos...%2Fschedule%2F

  • #10
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by ihavecomputer View Post
    I added the width property for the image on the http://www.causafirma.com/services page just for the heck of it and I'm still running into the same problem.
    I'm not sure if you managed to get the page fixed. I didn't check. Because the rendering error happens so rarely, it is not easy to check for. One would have to refresh the page at least a couple of hundred times to know with some probability that the issue is gone.

    Anyway, the question needs an answer. I had a copy of your original page, so I gradually stripped down some of the code while making sure the rendering error was still occuring.

    Live example of altered page.

    Following BonRouge and Aero's suggestions, the performed changes were basically these, and the page still shows the occasional rendering bug in Firefox 2.0.0.3.
    • Image removed. That excludes that it had anything to do with missing width and height attributes.
    • Validation errors fixed
    • JavaScript removed.
    • Imported style sheet removed.
    • Styles collected in one single style sheet.
    • Favicon removed.
    • Random string is now appended via PHP to the stylesheet's url to ensure that it is reloaded every time. (Maybe not even necessary)

    With guarantee it still has the occasional rendering error in Firefox 2.0.0.3. It appears that it happens with quite high probability on first or second page load, but otherwise it happens approximately once for every some 50-100 refreshes.

    Firefox 2.0.0.3 screenshots:

    Any ideas? I will leave the live example unaltered, but continue stripping off code until I get an even simpler example. But it surely takes time.

  • #11
    New to the CF scene
    Join Date
    May 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah - I figured this out a little while back. Time to share. Turns out floated elements within parent elements that are set to display:table will render erratically in Firefox. I'd set the parent elements to display:table so that they would properly fit to the height of the floated content within.

    After realizing that, I began inserting an <hr style="clear:both"/> after the floated content, which ended up being pretty crude. It fixed the Firefox issue but made it more difficult to achieve precise, consistent results between IE / FF. Plus it added unnecessary markup.

    Then I came across the clearFix method which is apparently quite popular. Works like a charm, Firefox rendering problems solved. See here for more info on the method.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •