SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layout breaks occasionally, but corrects itself with page Refresh ??? Help?

    http://stoneycreekwebdesign.com/gehometech/home.php

    Only the Home page, Sitemap and Contact page of this prototype are live. At random, when switching from page to page, sometimes the layout breaks and some of the columns fall below the adjacent columns to the left. When I refresh the page, they fall back into place as they are supposed to be. See if you can duplicate this behavior.

    I think that I have read about this problem before, but cannot seem to find the solution to it. Can someone help me understand what is wrong and what I need to do to correct it.

    Thanks again,

    David
    Web Design, Marketing, Etc .............
    ....

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Dave,

    It depends on which browser you are having problems with.

    If its firefox/mozilla then the cause is most likely that you have not supplied the image dimensions in the html img tag. The browers needs these to work out how much space to allocate while the page is loading. If they are omitted then it has no idea how much space to allocate and quite often will misplace elements. Refreshing the page cures the problem because the images are now in cache and their size is known.

    Solution - add widths and heights to the img tag in the html.

    If the problem is in IE then its likely a "haslayout" issue and some parent element needs to have layout forced on it so it starts behaving correctly.

    If the problem is happening in all browsers then its probably something else

    Let me know which browsers and I will have a look

  3. #3
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul. I am seeing it in FF --- I will check the image dimensions. Now that my recollection is refreshed I am quite certain that is the problem.

    Thanks again!
    Web Design, Marketing, Etc .............
    ....

  4. #4
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I am having this same problem with this site. It is occuring in FF only. I checked all the IMG width and height dimensions, and they are all accounted for.

    http://www.stoneycreekwebdesign.com/willson/sitemap.php

    Especially noticeable when going from Site Map to Info, or vice versa. The right side column falls below the other colum, at randomy, until the page is refreshed, then it is placed back to the right side of the screen.

    CSS and XHTML validate...HELP!! I can't figure this one out!

    Dave

    PS To make matters more confusing, I can only recreate the problem on my testing serve URL noted above. On my own local server the problem does not occur, with exactly the same files and CSS....??
    Web Design, Marketing, Etc .............
    ....

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    One of the only other times I have seen this occur and not be related to images is when display:table has been used. The only solution in those cases seemed to be to lose the display:table and the problem was cured.

    However this also means that the design would need to be changed. As IE7 doesn't understand display:table anyway, but does now implement height correctly then you can't really use display:table anymore anyway unless you want to exclude IE7.

    I would suggest that you simplify your wrapper divs so that you only have one main wrapper div that stretches to the bottom and try and get the effect you want in one go.

    Something like this:

    Code:
    #outer_wrapper {
        width:750px;
        margin:0 auto;
        padding:0;
        min-height:100%;
        background:#E4E7D2 url("../willson/images/bg_wrapper.gif")  repeat-y;
        padding:10px 10px 0px 10px;
    }
    * html #outer_wrapper {
        height:100%;
    }
    You would then need to change the image above so that it is 20px longer and has the white background at each side and you could also add the side borders to the image if required.

    This means that you can get your effect (more or less) in one go.

    As I said display:table doesn't work in Ie7 so you can't really use that method anymore and the suggestion I make is less code and will work much better. Of course you may need to be creative to get the footer effects and background colours showing but its just basically a question of rubbing out what you don't want to see by using background colours on the elements you use.

    If you want to keep using display:table then I suggest that you allow some more breathing space between the elements in case it is a rounding error when display:tables is used.

    e.g. float the left column left and the right column right but makes sure there is at least a 2px breathing space between then that isn't set with margins. If you add a margin between them then again there is no room for error and a 1px rounding error could cause a drop of the content.

    This is an awkward problem to debug because I can't get the problem to occur locally and therefore can't try any possible fixes (which there may well be).

    I am wondering if something like table-layout:fixed applied to the element that has been made display:table may have some bearing and would be worth a try.

    Hope it helps

  6. #6
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As usual, Paul, you are correct. Removing display:table did the trick. At least I think it has, but until I check it a few thousand more times I will not be sure! I can't remember why I used that markup, anyway, as I cobbled this CSS together from another project of mine. I think it had something to do with causing the container to expand for a full-column-background-image look or something.

    Much thanks again, my friend, and Happy New Year.
    Web Design, Marketing, Etc .............
    ....


Bookmarks

Posting Permissions

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