bgen bgen - 3 months ago 7
CSS Question

Css template not the same in all browsers (overlaying div)

Basically i have 2 columns and the left side has an overlaying grey image to create a kind of blur effect. When you mouseover it, it will turn see-through. It works well in Chrome/Safari but not in Firefox and i can't really figure out why.

I uploaded a link to my site to show what i mean:

http://generowicz.nl/showing_template.html

When viewed in Firefox the overlaying image doesnt fit and overlay the whole left side.



html, body {
height: 100%;
margin: 0;
font-size: 15px;
font-family: Helvetica;
font-weight: lighter;
}
#left{
text-indent:1cm;
width: 20%;
height: 100%;
position: fixed;
background: rgba(51,51,51,1);
}

#right {
padding-top:2cm;
width: 80%;
height: auto;
position: absolute;
right: 0;
background: white;
}

#img {
position: absolute;
opacity: 0.4;
width:100%;
height:100%;
pointer-events:none;
-webkit-transition: opacity .25s ease-out;
-moz-transition: opacity .25s ease-out;
-o-transition: opacity .25s ease-out;
transition: opacity .25s ease-out;
color:#000;
}

#left:hover>#img {
opacity: 0;
}

h1{
font-size: 80px;
color:#CCC;
}

h2 {
font-size: 15px;
color: #CCC;
font-weight: lighter;
}

h3 {
font-size: 15px;
color:#CCC;
}

/* These are for main body */
h4 {
font-size: 15px;
color:#000;
}

h5 {
font-size: 15px;
color:#000;
font-weight: lighter;
}



a.one:link {
text-decoration: none;
color: #CCC;
-webkit-transition: all 0.5s ease-out; Saf3.2+, Chrome
-moz-transition: all 0.5s ease-out; FF4+
-ms-transition: all 0.5s ease-out; IE10
-o-transition: all 0.5s ease-out; Opera 10.5+
transition: all 0.5s ease-out;
}

a.one:link:hover {
text-decoration: none;
color: #09F;
}

a.one:visited {
text-decoration: none;
color: #CCC;
-webkit-transition: all 0.5s ease-out; Saf3.2+, Chrome
-moz-transition: all 0.5s ease-out; FF4+
-ms-transition: all 0.5s ease-out; IE10
-o-transition: all 0.5s ease-out; Opera 10.5+
transition: all 0.5s ease-out;
}

a.one:visited:hover {
text-decoration: none;
color: #09F;
}
a.one:active { text-decoration: none;
color: #CCC;
-webkit-transition: all 0.5s ease-out; Saf3.2+, Chrome
-moz-transition: all 0.5s ease-out; FF4+
-ms-transition: all 0.5s ease-out; IE10
-o-transition: all 0.5s ease-out; Opera 10.5+
transition: all 0.5s ease-out;
}

<body>
<div id="left"><img src="images/graysmall.png" name="img" width="93" height="55" id="img" />
<h1> B </h1>
<h2><a class="one" href="../index.html">Home</a></h2>
<h2><a class="one" href="../about.html">About Me</a></h2>
<h2><a class="one" href="../contact.html">Contact</a></h2>
</div>

<div id="right">


<table width="100%" border="0" align="left">
<tr>
<td width="5%">&nbsp;</td>
<td width="95%" align="left" valign="top">
<!-- TemplateBeginEditable name="Content" -->


<!-- TemplateEndEditable -->
</td>
</tr>
</table>
</div>

</body>




Answer

Adding left:0 in your #img class will give the result you need. See the updated class below,

#img {
position: absolute;
opacity: 0.4;
width: 100%;
height: 100%;
pointer-events: none;
-webkit-transition: opacity .25s ease-out;
-moz-transition: opacity .25s ease-out;
-o-transition: opacity .25s ease-out;
transition: opacity .25s ease-out;
color: #000;
left: 0;
}