CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
TJ Grant
TJ Grant

Reputation: 59

DIV Not Displaying In Chrome & Firefox

I am very new to working with cross-browser HTML/CSS. I'm trying to create a page with DIVs that have embedded DIVs.

I want to create a page that looks something like this:

http://www.tennantco.com/am-en/equipment

Where I have a DIV with a background picture and also a "header" DIV within the DIV that contains a background-color and text. Something like this:

<div>
    <div>
        <a/>
        <div>
            <h3/>
        </div>
    </div>
</div>

which is how the above referenced website seems to do it.

But I can't get it to work in Chrome & Firefox. It does work on IE8 (which is the version of IE - the only version - I need to support). The above referenced website does work in Chrome & Firefox, so I know I'm doing something wrong.

The problem is that on Chrome and Firefox the header part does not show up. I've created a fiddle:

http://jsfiddle.net/03ddL05k/

This is probably very simple, but I can't figure out what I'm doing wrong. I apologize for asking such an inane question.

Thanks for your help.

Upvotes: 0

Views: 418

Answers (1)

Chris Yongchu
Chris Yongchu

Reputation: 789

You have opacity: 0; defined (inlined) for your anchor tags.

opacity specifies the transparency of an element. The value applies to the element as a whole, including its content, the element and its contained children as well. 0 is fully transparent, meaning invisible.

I updated your fiddle for your review http://jsfiddle.net/yongchuc/03ddL05k/4/.

Upvotes: 2

Related Questions