position:absolute vertical centering with background that changes width

I need help with:


mousing over "Patient Stories" and having the down arrow be vertically centered.

Looking at the screengrab, there are 2 down arrows under "Patient Stories." The left arrow is perfectly centered, the right arrow is the arrow that appears on mouseover. I want the right arrow to be positioned where the left arrow is (perfectly centered) on mouseover.

The tricky part: "Patient Stories" is text (not image) and the sea foam background height and width are determined with padding.

This is the css I'm using for the perfectly centered down arrow:

.main-navigation li.current-menu-item {background:url(images/nav-arrow.png) no-repeat center bottom;}

Open in new window


This is the css for the positioning of the mouseover arrow that needs to be vertically centered:

.menu-item a.menu-image-hovered img.hovered-image, .menu-item a.menu-image-hovered:hover img.menu-image{margin:0 auto;
  position: absolute;
   bottom: 0;left: 66%;
  transform: translate(-66%,0);}

Open in new window


Here is the rest of the navigation css:

.main-navigation li {font:16px 'Intro-Bold', Arial, Helvetica, sans-serif; margin:0 0;padding-bottom:10px;}
.main-navigation li.current-menu-item {background:url(images/nav-arrow.png) no-repeat center bottom;}
.main-navigation li a{color:#94b7bb;text-transform:uppercase;text-decoration:none;background:none; color:#fff;padding:6px 19px 12px 26px;}
.main-navigation li a:hover,.main-navigation li.current-menu-item a{background:#94b7bb;}
.menu-item a.menu-image-hovered img.hovered-image, .menu-item a.menu-image-hovered:hover img.menu-image{margin:0 auto;
  position: absolute;
   bottom: 0;/*right:41%;*/left: 66%;
  transform: translate(-66%,0);}

Open in new window

phillystyle123Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Link? Bit of css or an image is no use
0
phillystyle123Author Commented:
0
GaryCommented:
Change the left margin to -27px

<img width="19" height="10" src="http://www.medicalwebdevelopers.com/underscore/wp-content/uploads/2014/10/nav-arrow.png" class="hovered-image menu-image-title-before" alt="nav-arrow" style="margin-left: -19px;" />
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

phillystyle123Author Commented:
Not doing the trick:

http://www.medicalwebdevelopers.com/underscore/ee.html

<img width="19" height="10" src="http://www.medicalwebdevelopers.com/underscore/wp-content/uploads/2014/10/nav-arrow.png" class="hovered-image menu-image-title-before" alt="nav-arrow" style="margin-left: -27px;" />

The link code is dynamically generated (WordPress) so I'd rather see if I can manage this in the css.
0
GaryCommented:
Looks fine to me. Both arrows are in the same place. (and that is CSS)
0
phillystyle123Author Commented:
Apologies: I need to manage this in the style.css file.

Your solution works in FF (and maybe others), but the arrows are not aligned properly in Safari (5.17/PC)
0
GaryCommented:
Is this your own code or a plugin?
0
phillystyle123Author Commented:
Currently using a plugin to generate the mouseover arrows  - it's a plugin that adds image functionality to menus.
I'm styling it though in style.css - so the position of the mouseover is being dictated by this css in style.css:

.menu-item a.menu-image-hovered img.hovered-image, .menu-item a.menu-image-hovered:hover img.menu-image{margin:0 auto;
  position: absolute;
   bottom: 0;/*right:41%;*/left: 66%;
  transform: translate(-66%,0);}

Open in new window


current-menu-item.a is what I'm using to display the down arrows to notate which page we are on:

.main-navigation li.current-menu-item {background:url(images/nav-arrow.png) no-repeat center bottom;}

Open in new window


I was using only css to generate the mouseover arrows with no plugin, but it was buggy - I was using li:hover {background:url(images/nav-arrow.png) no-repeat center bottom;}

If there's a solid way to do the mouseovers w/o the plugin just using css, I'd love to know about it.
0
GaryCommented:
The easiest way is to just hide the hover element - html is too messed up to try and line them up cross browser

.current-menu-item a span img {
    display: none;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
phillystyle123Author Commented:
hmm - there has to be a workable solution to this. I'm guessing the down arrows CAN be perfectly centered.
0
GaryCommented:
Well good luck with that, the HTML of the plugin makes that impossible as it relies an absolute positioning of elements and the way it uses positioning is basically crap to start with
This is a big problem with plugins - they only test them in IE, FF, Chrome on Windows and not cross browser/device
The solution above does what you want with no detrimental affect.
0
phillystyle123Author Commented:
Yes-I'm going to lose the plugin -I need the arrow to be centered -there should be a pure CSS solution
0
GaryCommented:
There is no pure CSS plugin as every browser behaves differently - even fonts are sized differently in the different browsers.
That plugin relies on absolute pixel positioning - that doesn't work cross browser.

If you don't want to use the above simple solution that's fine, but I cannot help you more.
0
phillystyle123Author Commented:
To clarify-I'm not going to use a plugin, just CSS.  Thanks for the help.
0
phillystyle123Author Commented:
Thanks Gary. This is a workable solution given the plugin. I'm going to post a separate question about pulling this off with pure css and no plugin.
0
phillystyle123Author Commented:
Here is the pure css option. No plugin needed, just a down arrow image. This code will center a down arrow just below the background color.

css:

.main-navigation li a:hover,.main-navigation li.current-menu-item a{background:red;}
.main-navigation li:hover,.main-navigation li.current-menu-item {background:transparent url(images/nav-arrow.png) no-repeat scroll center bottom;}
.main-navigation li a{color:red;text-transform:uppercase;text-decoration:none;background:none; color:#fff;padding:6px 26px 12px 26px;}

Open in new window


html:

<ul id="menu-top-navigation" class="menu nav-menu"><li id="menu-item-1730" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1706 current_page_item menu-item-1730"><a title="Home" href="#">Home</a></li>
<li id="menu-item-1729" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1729"><a title="Impact" href="#">Impact</a></li>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.