i cannot figure out why the border-image in between the navigation menu items on this site (www.guitarstorage.com) is not being applied to the left border of the HOME menu item and right border of the CONTACT US menu item. any ideas? thanks in advance!
Why not just apply it as a background image? Why do you want it as a border-image?
rather than a work around, i’d like to better understand the issue. i cannot figure out what is applying that white border to the right of Contact Us button and why i cannot get the border-image to work.
It is from what I’m seeing. It’s only 1px wide so far. The selectors are correct and on the right element.
I increase the border-width to 15px and I see it clearly.
but the image that appears when increasing the border width to 15px is a different image than the one in the CSS. here is what’s in our CSS.
border-style:solid;
border-width:1px;
-moz-border-image: url(/wp-content/uploads/site-elements/nav-border.jpg) 1 1 1 1;
-webkit-border-image: url(/wp-content/uploads/site-elements/nav-border.jpg) 1 1 1 1;
-o-border-image: url(/wp-content/uploads/site-elements/nav-border.jpg) 1 1 1 1;
border-image: url(/wp-content/uploads/site-elements/nav-border.jpg) 1 1 1 1;
Change the border width to 15px and also update the border-image values to “15 15 15 15” and then you tell me if it doesn’t look identical (it does.)
The one on the left is your image opened up (direct image) and zoomed 500 times.
The one on the right is border-width set to 15px and the border-image updated to “15 15 15 15”.
Looks pretty identical (the separator would look more fuzzed but it’s not stretched as tall.)
Apologies for the black mark on the right image but I’m not that great at editing images.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.