Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

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)

2012-07-29

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.