- This topic is empty.
December 13, 2011 at 1:15 pm #35624
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.
Any ideas?December 13, 2011 at 1:27 pm #92617
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-indexvalue of 2 or higher, the shading of the right fold should disappear.December 13, 2011 at 1:38 pm #92619December 13, 2011 at 1:50 pm #92620
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
ul.dropdown li, and not the
See http://jsfiddle.net/K5fVm/1/ for update.December 13, 2011 at 1:54 pm #92621
Thanks, and if you can suggest a more efficient means to write the code, I’m all ears. I’m still just learning so it would be a great help!December 13, 2011 at 1:57 pm #92622
Well personally I would just use small images for something like this, not pure CSS…but that’s just me! ;)December 13, 2011 at 2:01 pm #92623
I thought using CSS would be the way to go. Is that just a preference thing or practical as well?December 13, 2011 at 2:04 pm #92624
By the way, I see that Firefox is not aligning properly. Is there a way to avoid that? Apart from images :)December 13, 2011 at 2:06 pm #92625TheDocMember
I think it looks better without the drop shadow, to be honest!December 13, 2011 at 2:08 pm #92626
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.December 13, 2011 at 2:18 pm #92629December 13, 2011 at 2:41 pm #92630TheDocMember
Probably, though I haven’t looked at the code enough to give you a proper answer there.December 13, 2011 at 2:42 pm #92631
Yea, FireFox is the only issue now the box shadow is gone. What CSS would be a better for all browsers or there isn’t?December 13, 2011 at 2:43 pm #92632December 13, 2011 at 5:04 pm #92649joshuanhibbertMember
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.
- The forum ‘CSS’ is closed to new topics and replies.