Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Piers FC
Piers FC
10,402 Points
Posted by Piers FC
Piers FC
10,402 Points

image in header not displaying on interner explorer - but works for chrome and mozilla

Hi

I am designing a website for a mobile app and I need to show an image that goes from the header element and then further down the page.

My HTML:

<header>
        <img src="img/screenshots3.png" alt="Screenshots of FC features" id="phone">
......
.......
</header>

My CSS:

#phone {
    width: 40%;
    padding: 2.5% 1.5% 2.5% 3.5%;
    margin: 60px 0% 2rem 5%;
    padding: 0;
    float: left;
    display: initial;
}

The image displays perfectly in Mozila Firefox and Chrome but doesn't appear in internet explorer 11.

Any ideas? would be a massive help if someone could solve this. Have spent over a day trying solutions but none have worked so far.

Thanks :)

3 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,243 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,243 Points

It looks like when you're trying to reference the id of image element you haven't included the # in your id selector.

so 

#phone{
width: 40%;
padding: 2.5% 1.5% 2.5% 3.5%;
margin: 60px 0% 2rem 5%;
padding: 0;
float: left;
display: initial;
}

should work for you!

Is that that image isn't displaying at all or not displaying correctly?

Thannks

Piers FC
Piers FC
10,402 Points
Piers FC
Piers FC
10,402 Points

The image isn't displaying at all for IE.

Piers FC
Piers FC
10,402 Points
Piers FC
Piers FC
10,402 Points

for some reason treehouse won't include the # for the id selector.

I have included the # for the id selector and it still doesn't work :(

Sean T. Unwin
Sean T. Unwin
28,688 Points
Sean T. Unwin
Sean T. Unwin
28,688 Points

I just created a test, with a random .png, and it displayed for me using your code.

Which version of IE are you using?

Does the image show if you tried to view the image directly within IE, i.e. in the address bar type in the path to the image?

Do you have another reference to #phone later in your CSS that may be cancelling out or another instance of an element with an id="phone" in your html?

Not related, but I see you have padding listed twice. ;-)