SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot w1nk5's Avatar
    Join Date
    Aug 2009
    Location
    Ontario, Canada
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 Disappearing Background

    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

  2. #2
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you have background set to #FF in the row2-content div.

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

  3. #3
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    eh, looks like the wrong area.

    what if you add your background color to this class?

    Code:
    .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

  4. #4
    SitePoint Zealot w1nk5's Avatar
    Join Date
    Aug 2009
    Location
    Ontario, Canada
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AtSea webdesign View Post
    you have background set to #FF in the row2-content div.

    Code:
    .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.

  5. #5
    SitePoint Zealot w1nk5's Avatar
    Join Date
    Aug 2009
    Location
    Ontario, Canada
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AtSea webdesign View Post
    eh, looks like the wrong area.

    what if you add your background color to this class?

    Code:
    .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.

  6. #6
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    SitePoint Zealot w1nk5's Avatar
    Join Date
    Aug 2009
    Location
    Ontario, Canada
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    It's classic haslayout behaviour. Add this :

    Code:
    .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).

  10. #10
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhh the old zoom:1 addin. Brilliant

  11. #11
    SitePoint Zealot w1nk5's Avatar
    Join Date
    Aug 2009
    Location
    Ontario, Canada
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It's classic haslayout behaviour. Add this :

    Code:
    .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.


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
  •