CODEWITHSUNDEEP
htmlcssinternet-explorerfirefox
Dominic
Dominic

Reputation: 67

Div not showing correctly in FF or IE

I am working on a website in which I've styled divs on a home page to be clickable and have an image background.

The home page displays the opacity div behind the text correctly in Chrome, but in FireFox and Internet Explorer you cannot see the opacity div and the text is at the top of the div.

<div id="main" class="site<?php if ( $with_sidebar ) : ?> site-with-sidebar<?php endif; ?>">
<div id="content" class="site-content">     
<!----Home Content START---->
        <div style="width: 980px; overflow: auto;">
                        <div  onclick="window.location='/portfolio/architecture/architecture/';" id="item1" style="width:453px; height:400px; background-image:url('http://jeremy.insctest1.com/wp-content/uploads/2015/02/arch-home.png'); float: left; margin: 0 20px 20px 0;">

                <div class="item-title" style="width:inherit; position: relative; top:350px; height: 50px; background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgba(232,232,232,0.8)), color-stop(1, rgba(214,214,214,0.8)) ); display: table-cell; vertical-align: middle;" >

                <center> Architecture </center>
                </a>
                </div>
            </div>

Upvotes: 1

Views: 72

Answers (2)

Joshua Whitley
Joshua Whitley

Reputation: 1186

This is because your background container is using the vendor-specific prefixed style -webkit-gradient which FF and IE will ignore. This question (Linear-gradient works only with -moz vendor prefix) will give you all of the vendor prefixes necessary to properly implement gradient.

Upvotes: 1

marcelo2605
marcelo2605

Reputation: 2794

Your gradient is just set to webkit browsers. You need to include other prefixers and a fallback for IE < 10. More info: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Upvotes: 0

Related Questions