IE7 Disappearing Background

[w1nk5]

Can anyone please explain to me why my backgrounds are disappearing on the following page in IE7?

http://174.121.35.254/~homeappr/services/

Thanks

[AtSea webdesign]

you have background set to #FF in the row2-content div.

.services #row2-content .service-container img {
	float: left;
	margin-right: 10px;
	margin-bottom: 5px;
	background: #fff;
	padding: 5px;
	border: 1px solid #CFBFB0;	
}

[AtSea webdesign]

eh, looks like the wrong area.

what if you add your background color to this class?

.services #row2-content .service-container

It's something to do with the .service-container styles.

BTW, your naming styles are a bit confusing as you have both a class and id of service-container

[w1nk5]

you have background set to #FF in the row2-content div.

.services #row2-content .service-container img {
	float: left;
	margin-right: 10px;
	margin-bottom: 5px;
	background: #fff;
	padding: 5px;
	border: 1px solid #CFBFB0;	
}

That is actually applying a white background to the image in that div. To give the effect of the white frame around the image, due to the padding.

[w1nk5]

eh, looks like the wrong area.

what if you add your background color to this class?

.services #row2-content .service-container

It's something to do with the .service-container styles.

BTW, your naming styles are a bit confusing as you have both a class and id of service-container

Adding the background colour won't apply the border that the background image contains.

[AtSea webdesign]

yeah my first post was a mistake.

You can apply a border to your img through styles. No need to do it in photoshop. So you can add the background color and then add border to your img style

[w1nk5]

The issue is with a background image within a div. The images within the div are fine. I cannot simply add a background colour and a border to the div because it will not have rounded corners in all browsers including IE7 and up.

For some reason, the background image simply stops to show after like 20 pixels. It works in every browser except IE7 and down.

I really just want to know what IE7 bug is causing the issue so I can correct.

Thanks for your help though, I appreciate you taking the time.

Cheers

[AtSea webdesign]

not sure why it's happening. I generally use CSS3 for rounded corners and let the IE folks deal with squared edges.

Less HTTP requests and less of a page load.

Although I know that doesn't help with your issue.

[Paul O'B]

It's classic haslayout behaviour. Add this :

.services #row2-content .service-container {
    background-image: url(http://174.121.35.254/~homeappr/wp-content/themes/homeappr/images/services-bg.jpg);
    background-repeat: no-repeat;
    padding: 20px 20px 20px 20px;
    font-size: 14px;
    position: relative;
    margin-bottom: 20px;
    min-height:0;/* ie7 haslayout trigger*/
}

If you want ie6 support then add zoom:1.0 (or the * html .services #row2-content .service-container{height:1%,overflow;visble} hack if it needs to be valid).

[AtSea webdesign]

Ahhh the old zoom:1 addin. Brilliant

[w1nk5]

It's classic haslayout behaviour. Add this :

.services #row2-content .service-container {
    background-image: url(http://174.121.35.254/~homeappr/wp-content/themes/homeappr/images/services-bg.jpg);
    background-repeat: no-repeat;
    padding: 20px 20px 20px 20px;
    font-size: 14px;
    position: relative;
    margin-bottom: 20px;
    min-height:0;/* ie7 haslayout trigger*/
}

If you want ie6 support then add zoom:1.0 (or the * html .services #row2-content .service-container{height:1%,overflow;visble} hack if it needs to be valid).

Works Perfect! You the man.

Thanks alot, I appreciate it.