z-index or box-shadow issue on nav ends

[tobeeornot]

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?

[Senff]

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.

Anyways….

If you give ul.dropdown a z-index value of 2 or higher, the shading of the right fold should disappear.

[tobeeornot]

@Senff Code is generated by a generator and was told it was good:

http://www.css3d.net/ribbon-generator/#preview

I tried changing the value you suggested and nothing happened. Did you use the the jfiddle?

[Senff]

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 ul.dropdown.

See http://jsfiddle.net/K5fVm/1/ for update.

[tobeeornot]

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!

[Senff]

Well personally I would just use small images for something like this, not pure CSS…but that’s just me! ;)

[tobeeornot]

I thought using CSS would be the way to go. Is that just a preference thing or practical as well?

[tobeeornot]

By the way, I see that Firefox is not aligning properly. Is there a way to avoid that? Apart from images :)

[TheDoc]

I think it looks better without the drop shadow, to be honest!

[Senff]

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-wrapper and .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.

[tobeeornot]

@Senff – thanks for that. Worth bearing in mind for all those points you mention.

@TheDoc – I was thinking the same thing but was undecided. If I dropped the box-shadow would that allow for more even cross-browser compatibility?

[TheDoc]

Probably, though I haven’t looked at the code enough to give you a proper answer there.

[tobeeornot]

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?

[tobeeornot]

@TheDoc – no worries. If you have a moment, great. If not, no probs.

[joshuanhibbert]

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.

[Author]

Posts