Strangely, my site http://www.crosst.org displays incorrectly only on IE and iOS Safari (mobile). It appears to be cutting off the repeating images for the header, mid bar and footer as well as not centering the main content. I’ve been over it and can’t find anything that would cause this. Any suggestions would be great!! Thanks.
It appears, after looking into this some more, it is cutting off any css background “repeat-x” content only when scrolling in a smaller browser window. This happens in all browsers, so is it a overflow problem or what? Could someone take a look and help me figure this out please? http://www.crosst.org
for the most part, you never want to set width: 100% on block level elements. They take up all available width by default anyway. What I would do is to remove those widths and place a min-width on the body of 1105px, which is the minimum needed to include all your content (including the leaf, which by the way should have its width set to 206, not 287). This way all the children divs of body will be at least 1105 wide and their background will scroll with the scrollbar to that point.
Also note that using empty clearing divs is bad practice and that margin: 0 auto will not center a 100% width element, nor will it center an element with no width set (you have this in main). Also, why is the repeating bg image for the header so wide? If it’s repeating you only need a small slice (I like to use 10px, but some use 1, 5, or other small amount) – not 1300px.
I can think of two things off the top of my head. The simplest is to just give #block header a height. That area, I’m guessing, is going to be fairly consistent through-out the site. No reason not to set it’s height and allow the leaf to overflow it. The second would be to simply add the clear to the next element (the slider in this case). It does the exact same thing.
I opted for clear:both on the next element. That being said, what about the case of the two floats without individual parents? I am referring to the “tab-top” and the following floats, “logo-main” and “menu-main”. I have to use an empty “div” with “class=”clr” don’t I? Thanks for all your help wolf!