Rounded corners DROP DOWN BREAKING in Firefox

HTML & CSS
1

hi

Sorry about posting it again. The Problem has arisen again.

the bottom curve of the drop down is breaking again in Firefox and IE8.

works perfect in IE7

http://wdpixels.com/stuff/menuprob/menuprob.html

PLEASE HELP ME CORRECT THIS

VINEET

2

You are using images for rounded corners??!!!

CSS does it for you, via border-radius, although for older browsers you would add -webkit-border-radius and -moz-border-radius.
Finally to target older IE you would finish with behavior: url(PIE.htc); You can check out PIE.htc at http://css3pie.com/

3

Vineet, it seems to be working exactly as designed in IE8 and Firefox. You didn’t describe how it is “broken”. If you are referring to the little “feet” beside the bottom corners, those are the left and right borders that you’ve applied to #mega div. Maybe give your .gif a solid background color instead of transparent. How did you fix this problem before?

4

Yup, ronpat has it: those are your borders sticking out.

If you keep using images… you could have your submenu hold the sideborders and let the div only have a bottom border and the images. That’s one possibility.
Another is similar to ronpat’s idea… but instead of making the images larger, you could give the spans borders instead. White ones. Unless the background behind the menu won’t be white, but I dunno what you’re planning.

I would feel bad wasting someone’s CPU for a rounded doohickey. Let’em have pointy corners like in the good old days, sez I.

5

hi ronpat

yes you are right

i m talking about the right and left borders that extend around the corners.

i cannot have solid background around the corners because those drop downs need to be above all my content.

On homepage they will be above the image slider, on inside pages they will be above header banners that are multicoloured

So i need to have to rounded corners transparent.

vineet

6

rounded corners
box shadows
css gradients

7

Yup, added to the wastelist. Ain’t nobody left a site because it wasn’t rounded enough or gradientatious enough for them. Or if they did… well… http://usability.com.au/2012/11/changes-in-web-user-behaviour/ we can’t fix everyone

I would consider using something like PIE for, say, improved form controls. But honestly, like the idea that a website looks and acts differently between user agents feels at home with me, and letting users of square antigradientious shadowless browsers get what they get. Having them run a bunch of Javascript for… looks… just seems wrong to me.

That all said, Vineet might find everything much easier if he were to use it though. Might also depend what IE use levels are in India or wherever his visitors are. If they’re low I’d still rather CSS3+noPIE

8

hi stomme

if left_curve is 15px
right_curve is 15px

But i want to mention center_curve in percentage. so that i dont have to change it, when i change the div width.

I guess it would be difficult to know the exact percentage.

if i dont mention width, then the border doesnt show

vineet

9

vineet,

The css solution looks like this:


#mega div {
    position:absolute;
    left:-999em;
    width:350px;
    padding:15px 10px [COLOR="#0000FF"]15px[/COLOR] 10px;
    font-weight:normal;
    text-align:left;
    background:#fff;
    border-top:0;
    border-left:2px solid #3d90b3;
    border-right:2px solid #3d90b3;
[COLOR="#0000FF"]    border-bottom:2px solid #3d90b3;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;[/COLOR]
    margin-left:1px;
}

You will have to add vendor specific code for greater browser compatibility, but this is the basic pattern.

On the html page, delete the <p> line entirely.

If you want to use images instead of border-radius, let us know. I’m sure we can come up with something.

10

vineet, are you still looking for background images with round corners instead of css corners? or have you solved this already?