I’ve been asked to code a design a colleague made and while I have fair knowledge of HTML and CSS, I do lack knowledge in those browser specific issues.
At http://test.joelpuik.com/torpedo/ I’ve set up a test site (It’s just a wordpress theme) and all 's well in most browsers.
In Safari However when the window is smaller than the main content a white border appears on the right side and the background is cut off. If you resize the window the problem goes away.
My guess is it’s the way I’ve set up the containing divs to get the background images in the right place, but I wouldn’t know how to fix this.
Second issue, imo a minor one, is the floating ad container on the top right. In all browsers except IE 6 and 7 the content flows around this box.
If anyone could help or point me in the right direction, that would be appreciated.
To illustrate the issue on Safari I’ve made two screenshots.
If the window is smaller than the content container (with a scrollbar at the bottom):
When the window is wider than the content (no scrollbar):
This happens on both Mac and Windows.
As for the IE issue:
Then there’s not much I can do about that. The posts are generated by a loop, and while I could put in a condition that only the first post gets sidebar_2, I might run into trouble when sidebar_2 exceeds the height of the containing .post_normal div.
I’ve given post_normal hasLayout, since without it I couldn’t get it right.
I think I’ll leave that issue for what it is.
I couldn’t see the problem you were talking about in Safari5 so you may need to post a screenshot.
The problem in IE6 and 7 is because you have given haslayout to .post_normal and elements with haslagyout will not wrap around floats but form a rectangular block to the side (it’s the same effect that overflow other than visible has in other browsers.)
You would need to remove the dimensions, min-width and zoom from post_normal before it will wrap. However that is likely to cause issues because the element is quite complicated and will probably not render correctly without haslayout.
Instead it would have been better if you had floated sidebar_2 from within port normal rather than separating them.
When you want content to wrap make sure the float and the content are in the same container and that the fluid content (such as text) does not have haslayout.
I assume you are only seeing the gap when you scroll to the right and then it appears.
This is just how browsers work as you are scrolling to see content that is outside the viewport and greater than 100%. Any elements that are in a 100% container but are bigger than the 100% container will poke out the side. The background on the element itself will only travel to the viewport edge because that is 100% wide. It will not extend outside the viewport unless it had a specific width.
If you visit any fluid with site you will see this behaviour all the time.
If you want your background to extend then you need to make sure that your element is never smaller than the largest element inside. That means setting a min-width equal to the largest element.
In your page that looks to be about 1220px;
html, body {
height: 100%;
[B] min-width:1220px;[/B]
}
body {
font-size: 100%;
background:#ccc5c5 url(http://test.joelpuik.com/torpedo/wp-content/themes/Torpedo/images/body-bg.jpg) repeat-x top
}
#wrap {
margin: 0 auto;
min-height:100%;
height: auto !important;
height: 100%;
width: 100%;
[B] min-width: 1220px;[/B]
background:url(http://test.joelpuik.com/torpedo/wp-content/themes/Torpedo/images/TORPEDO-website_achtergrond.png) top center repeat-y;
text-align: left;
display:table;
}
#keeper {
min-height:100%;
height: auto !important;
height: 100%;
margin:0;
background:url(http://test.joelpuik.com/torpedo/wp-content/themes/Torpedo/images/TORPEDO-website_achtergrond_06.jpg) top center no-repeat;
display: table-row;
[B] min-width: 1220px;[/B]
}
Note that your header (whic is probably the main cause of the problem) is inside a 1190px container yet you have sized it to 1190 px and then given it a 22px margin thus making it 22px to fit. Elements must fit or browsers will cry.
Also note that IE7 doesn’t like the important hack when used with height:100% and will forget where the bottom of the screen is should the page be resized. See the faq on 100% height for more info.
