background image not displaying in IE7 and 8

Question

Violet_82 89 Posting Whiz in Training

10 Years Ago

Hi all, I have spent a few hours on this now, and I have to admit that I have absolutely no idea what is going on. I have a background image that is not showing in IE7 and IE8, other browsers are ok. Here is the link http://antobbo.webspace.virginmedia.com/various_tests/imageProblem/confirmation.html
I am completely baffled.
The code is this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>

        <title>Test</title>  

        <link rel="stylesheet" type="text/css" href="css/style.css" />

    </head>
    <body>

        <div class="wrapper">
            <div id="container">
                <div class="left-column">
                    <h2>confirmation</h2>
                    <a href="#" class="trigger">See this</a>
                    <div class="openedContainer">                        
                        <div class="noCollapse">
                            <div class="left-container">
                                <p><span class="bold">Reference: </span>XXXXX <span class="bold leftSpace">Item: </span>10.00</p>
                            </div>
                            <div class="right-container">
                                <p><span class="">Email PDF invoice</span></p>
                            </div>
                            <div class="left-container">
                                <p><span class="bold">Item:</span> 100.00 with credit card</p>
                            </div>
                            <div class="left-container">
                                <p><span class="bold">Items:</span> 2 apples, 2 pears, 1 banana</p>
                            </div>                                                   
                            <div class="clear"></div>
                        </div>
                        <div class="toCollapse">
                            <div class="left-container">
                                <p><span class="wrappingText">Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor </span></p>
                            </div>
                            <div class="right-container">
                                <p><span class="pound">Summary</span></p>
                                <p><span>11 11 3452: £21.00</span><span class="leftSpace">credit card</span></p>
                                <p><span>11 11 3452: £21.00</span><span class="leftSpace">credit card</span></p>                              
                            </div>
                            <div class="left-container">
                                <a href="#">Need anything else?</a>
                            </div>

                            <div class="clear"></div>

                        </div>
                        <div class="clear"></div>
                    </div>

                    <div class="openedContainer">                        
                        <div class="noCollapse">
                            <div class="left-container spaceBelow">
                                <h3>Here</h3>
                            </div>
                            <div class="right-container spaceBelow">
                                <h3>There</h3>
                            </div>
                            <div class="left-container">

                                <p class="withImage"><span >Lorem ipsum</span> <span class="leftSpace">dolor sit amet</span>,<span class="leftSpace"> consectetur adipiscing elit. </span><span class="leftSpace">Aliquam rhoncus lectus porttitor </span>lacus dictum viverra. Morbi eget ante vel elit rhoncus au</p>

                            </div>
                            <div class="right-container">
                                <p><span class="bold">Lorem ipsum dolor</span></p>
                            </div>


                            <div class="clear"></div>
                        </div>
                        <div class="toCollapse">
                        </div>
                    </div>

                </div>
                <div class="rightCol">
                    <h4> extra items</h4>             
                </div>
                <div class="clear"></div>
            </div>
        </div>

    </body>
</html>




h1, h2{
    font-size:24px;
    font-weight:normal;
}
h3{
    font-size:18px;
    font-weight:normal;
}
.clear{
    clear:both;
}


.header_container{
    padding: 0 10px;
}


.left-column{
    margin-left:10px;
    width:600px;
    float:left;
    background-color:white;
    position:relative;
}

.left-column a.trigger{
    position:absolute;
    top:10px;
    right:40px;
}

.rightCol{
    width:340px;
    float:left;
    background-color:#ffffff;
}
.left-column, .rightCol{
    min-height:100px;
    padding-top:10px;

}

.left-column .openedContainer{
    border-top:1px solid black;
    margin:15px 15px 0px 15px;
    padding: 10px 0;
}
.left-column .openedContainer .left-container{
    width:315px;

}
.left-column .openedContainer .right-container{
    width:255px;    
}
.left-column .openedContainer .right-container > p, .left-column .openedContainer .right-container > h3{
    text-align:right;
}
.left-column .openedContainer .left-container, .left-column .openedContainer .right-container{
    float:left;
}

.left-column h2, .left-column h3, .left-column h4, .left-column h5{
    margin-left:15px;
}
.left-column .left-container h2, .left-column .left-container h3, .left-column .left-container h4, .left-column .left-container h5{
    margin-left:0;
}
span.pound{

}
.withImage{

    background:url("images/chromeIcon.jpg")no-repeat 32% 0;
    padding-left:0px;
    height: 45px;
    line-height: 34px; 

}




.bold{
    font-weight:bold;
}
.floatedRight{
    float:right;
}
.leftSpace{
    padding-left:49px;
}
.paddingRight{
    padding-right:20px;
}
.spaceBelow{
    padding-bottom:10px;
}

The offending bit is this:

<p class="withImage"><span >Lorem ipsum</span> <span class="leftSpace">dolor sit amet</span>,<span class="leftSpace"> consectetur adipiscing elit. </span><span class="leftSpace">Aliquam rhoncus lectus porttitor </span>lacus dictum viverra. Morbi eget ante vel elit rhoncus au</p>

with the relevant styles:

.withImage{

    background:url("images/chromeIcon.jpg")no-repeat 32% 0;
    padding-left:0px;
    height: 45px;
    line-height: 34px; 

}

Now, in ie7 and ie8 not only the image doesn't show, but it is not even inside the debugging console. It's as if it is not inserted at all, ad if this background:url("images/chromeIcon.jpg")no-repeat 32% 0; is completely ignored.
I have tried to change/remove the line height, height etc but nothing. I removed the spans and left the paragraph only, but nothing. I have really no idea what it's going on. COuld it be that somehow the fact that the main container are floating has an inpact on the image? But then again why just ie7 and ie8?

If anybody could have a go, I would be extremely grateful, like I said I just don't understand what is going on there.
thanks

css images web-design

4 Contributors
14 Replies
580 Views
1 Week Discussion Span
Latest Post 10 Years Ago Latest Post by Violet_82

All 14 Replies

stbuchok

10 Years Ago

in your .withImage class, add a space before no-repeat

Troy III 272 Posting Pro

10 Years Ago

you are using a wrong and obsolete DOCTYPE!

consider us9ng a standard <!DOCTYPE html>

Edited 10 Years Ago by Troy III

iJimJones 15 Newbie Poster

10 Years Ago

If neither of the above suggestions solve the problem, I wonder if relative URL references are different in IE, acting relative to the web page location rather than the CSS file location. To test this out, try putting an 'image' folder with a copy of the jpg image in your imageProblem directory to see if that picks it up. I doubt this is the issue... if it is then that presents a horrible inconsistency between browsers. Sorry I didn't have time to try this myself.

stbuchok

10 Years Ago

I've already tested my solution on their site, it works. Try it out yourself.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

iJimJones 15 Newbie Poster · Answer 1 · 2013-07-12T17:25:07+00:00

I just tested it but I see the JPG image on my exact copy without making any changes. That is, my copy at http://neo.graceland.edu/~jsjones/JunkTest/copyOfProblemPage.htm looks different from Violet82's copy at http://antobbo.webspace.virginmedia.com/various_tests/imageProblem/confirmation.html if I use IE10. That leads me to believe that my act of recreating directories and downloading or copying the html, css, and jpg files changed something, perhaps eliminating some corrupt and unseen character during the copy that fixed it. I know that the permissions is not an issue since I can view the JPG directly at http://antobbo.webspace.virginmedia.com/various_tests/imageProblem/css/images/chromeIcon.jpg, so a corrupt text file is the only thing that makes sense to me now. I can't think of something that the different web servers would do differently.

Troy III 272 Posting Pro · Answer 2 · 2013-07-12T18:08:22+00:00

Using a correct doctype will fix a drawing error provoked by instructing the browser to render HTML code as if xhtml.

iJimJones 15 Newbie Poster · Answer 3 · 2013-07-15T19:29:29+00:00

I don't quite follow. Setting a background image as Violet82 did is correct XHTML/CSS2 code so the XHTML doctype is correct. There is no ambiguity between HTML5/CSS3 and XHTML/CSS2 for IE to get hung up on. But I may be overlooking something so point it out if you see it.

I still think the issue is a corrupt file or invalid codes embedded in it. In fact, the British Pound symbols on lines 39-40 may be the problem, especially since there is no meta-element specifying the charset. Replace those with the HTML entity code (either £ or £) so that it will be valid even for UTF-8 charset in case IE is defaulting to that. Regardless, you should also insert a meta element to specify the charset you are using (whether you use a doctype for XHTML or HTML) and validate your html (http://validator.w3.org) and css (http://jigsaw.w3.org/css-validator/).

iJimJones 15 Newbie Poster · Answer 4 · 2013-07-15T19:53:37+00:00

The reason I have been reluctant to believe in the solutions above (including mine) is because my copy of Violet82's code at http://neo.graceland.edu/~jsjones/JunkTest/copyOfProblemPage.htm works. The copy fixed it. I only experience the problem when looking at the original web page using IE10 at http://antobbo.webspace.virginmedia.com/various_tests/imageProblem/confirmation.html All of our solutions may indirectly solve the problem if a copy of the html file gets made in the process.

stbuchok · Answer 5 · 2013-07-16T11:43:52+00:00

In the copy, it is coming up as Browser Mode: IE10 and Document Mode: standard where the original is coming up as Browser Mode: IE10 Compat View and Document Mode: IE7 standards. This is because in the original you have <!-- DOCTYPE... instead of <! DOCTYPE..., you are basically commenting out the DOCTYPE.

iJimJones 15 Newbie Poster · Answer 6 · 2013-07-16T19:13:56+00:00

Thank you stbuchok! I now see that Compatibility View was the problem. When ALT-T shows that Compatibility View is either greyed out or ON then IE drops back to 'IE7 Standard' (FYI-in that case DOCTYPE appears to be commented out when seeing it in the Developer Tools' HTML tab, although it is not that way in the file). The problem therefore is that Violet82's original web page link shows a greyed out option for Compatibility View, unless and until one changes IE's Compatibility View Settings (ALT-T) by unchecking 'Download updated compatibility lists from Microsoft'. But we don't want to tell every visitor they must do that; we want the html to override the browser's decisions here, as follows:

SIMPLEST SOLUTION
Insert these meta tags into the HEAD section of the html so that even if compatibility view is greyed out, IE will not drop back to a version earlier than IE9 (if the user explicitly turns compatibility view on then this may not solve that). The first meta tag is unrelated to our problem but I recommend it, especially since the web page contained the British Pound symbol.

        <meta charset="ISO-8859-1" />
        <meta http-equiv="X-UA-Compatible" content="IE=9,10" />

NOTE: It does not matter what version of DOCTYPE is used-- if the Compatibility View Tools menu option is greyed out or Checked then the page will not display correctly because it drops down to IE7 without the above meta tag. For convenience, here are the first lines if you wanted to use the newer and simpler HTML5 coding:

<!DOCTYPE html>
    <head>
        <meta charset="ISO-8859-1">
        <meta http-equiv="X-UA-Compatible" content="IE=9,10">
        <title>Test</title>  
        <link rel="stylesheet" href="css/style.css">
    </head>

Violet_82 89 Posting Whiz in Training · Answer 7 · 2013-07-16T20:36:29+00:00

after many attempts, it turned out that the problem was this linebackground:url("images/chromeIcon.jpg")no-repeat 32% 0;
A missing space between the url and the no-repeat can make a lot of damage. Thanks everybody for looking at this though!

iJimJones 15 Newbie Poster · Answer 8 · 2013-07-17T00:02:32+00:00

Great! Perhaps that is what triggered the compatibility issue when I viewed it in IE10; but that still doesn't explain why my copy (with the same missing space) didn't have the compatibility issue on my Intranet site. So I would still recommend the META tags.

stbuchok · Answer 9 · 2013-07-17T11:16:42+00:00

lol, you are welcome. Look at the very first answer given ;)

Violet_82 89 Posting Whiz in Training · Answer 10 · 2013-07-17T12:48:57+00:00

eh eh stbuchok, sorry I missed that...probably my eyes got so puffy for looking at the monitor that I have missed it

background image not displaying in IE7 and 8

Recommended Answers Collapse Answers

All 14 Replies

Recommended Answers