Block misalignment on page reload

[criderweb]

I am building a website where the home page is all css and has a css horizontal menu with its own css and below the menu are a long left and right text block separated by a slideshow with a logo/slogan underneath.  Subsequent pages are essentially full size text blocks.

 

First:  It works properly on initial load, but if I click on a different page, that page loads, but 9 times out of 10 seems to hang over the right boundry.  If I click my browser refresh button, the page snaps to where it should be.  Likewise, if I click back to the Home Page, everthing is positioned properly except the right panel which has moved a little over half-way down the page, but if I click my browser refresh button, it snaps to where it is supposed to be.

 

I also have an issue in IE 6 (and I think 7) where pretty-much all the time the right panel is positioned over halfway down the page.  I have tried clearing, not clearing, reset css code and not resetting css to no avail.  I'm really getting frustrated with this and am considering chunking the css and rewrite it using the tried and true tables approach.  I am attaching a word document to show the screens as specified above.

 

Thanks in advance for anybody who can take pity on this poor css ignorant coder.

 

THIS SEEMS TO WORK PROPERLY IN IE9, but the above problem is what happens in FIREFOX.

 

[attachment deleted by admin]

[monkeytooth]

whats your CSS look like?

[criderweb]

css is in this attached file.

 

[attachment deleted by admin]

[cssfreakie]

instead of attaching files do you have an on line example of what you mean? there are some free hosts where you can dump stuff like this.

[criderweb]

Sorry, the website can be seen at http://mooremiddleschool.org/index3.php

[cssfreakie]

just to rephrase the problem. The block with calender events sometimes shows up underneath the flash video.

The reason for this is because in that case it's to big. make it a little smaller say width 250px;

at line 366 of your stylesheet:

 

#rightcolumn_wrapper {
    background: none repeat scroll 0 0 white;
    border: 2px solid #ECECEC;
    border-radius: 12px 12px 12px 12px;
    color: #333333;
    display: block;
    float: right;
    height: 460px;
    margin: 40px 2px 2px 0;
    overflow: auto;
    padding: 2px;
    position: relative;
    text-align: left;
    width: 250px; /* i changed this value */
}

 

That should work

[criderweb]

Thanks Freakie, that seems to have solved the upy-downy thingy, but I still have an issues (Firefox 4):

1. When I click on any of the other menu (besides home) links, it loads a full page and the border more often than not extends past the border although if I click the Browser Refresh button, it snaps to the correct position.

 

Any thoughts and or help would be appreciated.

[cssfreakie]

When I click on any of the other menu (besides home) links, it loads a full page and the border more often than not extends past the border although if I click the Browser Refresh button, it snaps to the correct position.

if you post a question make sure it is understandable. certainly if you are in school business.

 

If something is wider than it's container it will overlap the container. I assume you made this yourself? if so get firebug (addon for firefox)  and see what the width is of the part that is overlapping. I just checked and it's to wide. If you never worked with firebug, you might want view a brief introduction vid on my blog.

 

For any future project i can recommend you use a css grid system. it keeps things nicely aligned and you won't have any troubles like you have now.