position of overlay image over slider different in browsers WordPress
- SOLVED
Hi, I am currently working on http://caffebuongiorno-norwood.com.au/breakfast/ and as you can see in this page it looks fine with the title overlay in Chrome, but in all other browsers it has a big gap above the overlay.
here is the CSS I have used:
.wprmm_menu h1 {
position: absolute;
top: 244px;
z-index: 10;
background: rgba(255, 255, 255, 0.7) 100%;
width: 200px;
line-height: 202px;
padding: 0 20px;
color: #424242;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
}
Answers (1)
Plugarized answers:
<strong>Replace your code with the following;</strong>
.wprmm_menu h1 {
position: absolute;
top: 215px;
z-index: 10;
background: rgba(255, 255, 255, 0.7) 100%;
color: #424242;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
margin-left: -20px;
padding: 78px;
}
<strong>The following are screenshot of the outcome in major browsers;</strong>
http://img526.imageshack.us/img526/982/chromejh.png
http://img715.imageshack.us/img715/9508/67368855.png
http://img7.imageshack.us/img7/3250/maxthons.png
http://img21.imageshack.us/img21/3896/mozillao.png
<strong>Also add the following to your style sheet for your submenu</strong>
.sub-menu {background: rgba(255, 102, 0, 0.83);
.ddsmoothmenuh ul li a.selected{background: white;color: white;}
.ddsmoothmenuh ul li a:hover{background: white;color: white;}
}
You can play around with the submenu colours, black looks bad
Ciaran Whelan comments:
Thank you David, it was really bugging me that I couldn't for the life of me figure out what bit of my CSS was causing the issue. I see it was line-height. Is that correct?
Ciaran Whelan comments:
Hi there Jose David,
I have added your CSS to the custom css
.wprmm_menu h1 {
position: absolute;
top: 215px;
z-index: 10;
background: rgba(255, 255, 255, 0.7) 100%;
color: #424242;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
margin-left: -20px;
padding: 78px;
}
It seems to fix the issue in all browsers, but in Chrome now the overlay is too high and leaves a gap under the overlay.
I don't know how to make it sit correctly in all browsers.