I have two ribbon ends attached to both sides of a nav bar but it appears the right end is slightly distorted, especially in chrome and firefox.
I am wondering if this could be an issue with the box-shadow or the z-index stacking order. I have made a jfiddle and you can also see the problem.
Here is the jfiddle code.
I have tried changing the z-index on the right side but it ends up covering up the box shadow.
Very confused by your code and all its positive/relative positioning and the actual ribbon doesn’t line up perfectly with the shades/folds/ribbons in some browsers. All those nested divs look very unnecessary at first glance but maybe you have a good reason for it.
If you give
z-index value of 2 or higher, the shading of the right fold should disappear.
Didn’t mean to say the code was bad as such, just that I would have coded it less complex….but since it comes from a generator, it kind of makes sense why it’s like this. :)
Anyway, looks like you added the
z-index:3 to the
ul.dropdown li, and not the
See http://jsfiddle.net/K5fVm/1/ for update.
Sure, with pure CSS you might save bandwidth if you use it to replace graphics that are significantly larger than the CSS code, but in this case, images for this menu wouldn’t be large at all.
To use pure CSS just for the sake of using CSS instead of graphics, I never got that to be honest. Just because you can, doesn’t always mean you should. I believe it’s personal choice, and depending on the situation, not necessarily a defined “way to go”. It can cause a lot of other issues….like not displaying correctly in Firefox. ;)
It can be fixed easily in Firefox (change the top value of
.ribbon-wrapper2) but I’m sure it will break in other browsers then. This is what I meant with the complexity of all the absolute/relative positioning, I wouldn’t say it’s such a good idea.
I disagree with @Senff regarding the use of images for this. What if you wanted to change the color/height/shadow? With CSS that is very easy to do; just change a few values. So in other words, there is a tangible benefit from using CSS instead of images. That isn’t always the case (experimental CSS3 features), but it certainly is in this instance.
On another note, the markup you have got from that generator is absolute rubbish. Have a look at this technique (but use the triangle border technique): http://csswizardry.com/2011/02/css-powered-ribbons-the-clean-way/
P.S. I agree with @TheDoc, it looks better without the shadow.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".