CODEWITHSUNDEEP
htmlcssinternet-explorerinternet-explorer-8
belyid
belyid

Reputation: 871

Image not visible on IE8 or older

I have an image that scales accordingly to the window size. It works well on IE9+, Chrome, Safari and Firefox but it doesn't appear on IE8 or older.

HTML code:

<div class="home_main">
    <img src="main_blur.jpg"/>
    <div class="text_and_button">
        <p>Some text</p>
        <p> more text</p>
        <a href="Contacts.php" class="contact_button">Button text</a>
    </div>
</div>

My CSS code:

.home_main {
    position: relative;
    width: 100%;
    padding-bottom: 31%;
    float: left;
    height: 0;
}

.home_main img {
    min-height: 300px;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}

.home_main p {
    padding: 30px 50px 20px 50px;
    color: #FFFFFF;
    background: rgb(66,91,122);
    background: rgba(66,91,122,.6);
    font-size: 54px;
    font-family: BebasNeue;
    font-weight: normal;
}

Also the paragraphs should have a colored background and the menu on the top of the page don't appear.

You can check the problem on www.mediata-sa.pt.

How can I solve this problem?

Upvotes: 0

Views: 106

Answers (2)

morkro
morkro

Reputation: 4655

The DOCTYPE of your website is XHTML 1.0 Strict which means that every element in the DOM must be closed.

Your <img> isn't - that will only work in HTML5. Also in XHTML the <img>-tag needs height="" width="" attributes which can cause the error in IE8. Don't worry about your CSS, this will overwrite the inline attributes from you <img>.

Try <img src="XXX" height="XXX" width="XXX alt="XXX" />.

Edit

It also seems like IE8 doesn't like height: 100%; on images, which is why it's not shown. This fixed the problem for me:

.home_main img {
    height: auto;
}

Edit2

The background of your <p>-tags are transparent because CSS says so ;) Right now the values are background: none transparent scroll repeat 0% 0% which is equal transparent. In Chrome I can see that you use rgb(); and rgba(); for the background, which can't be displayed in IE8 as it's CSS3.

In IE8 colors must be CSS2 Standard like only HEX or keyword colors.

.home_main p {
    background: blue; // IE8 fallback
    background: rgb(66,91,122);
    background: rgba(66,91,122,.6);
}

Upvotes: 3

karan3112
karan3112

Reputation: 1867

Try updating the DOCTYPE from

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

to <!DOCTYPE html>

The current html in IE8 goes in IE5 quirks document mode. Which when updated with the new doctype work fine.

This should solve the problem.

Upvotes: 0

Related Questions