SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Rounded corners DROP DOWN BREAKING in Firefox and IE8

    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. #2
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,518
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

    Quote Originally Posted by drjohn
    Finally to target older IE you would finish with behavior: url(PIE.htc);
    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. #5
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    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?
    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. #6
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.
    rounded corners
    box shadows
    css gradients

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by drjohn
    rounded corners
    box shadows
    css gradients
    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/chan...ser-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. #8
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,518
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    vineet,

    The css solution looks like this:
    Code:
    #mega div {
        position:absolute;
        left:-999em;
        width:350px;
        padding:15px 10px 15px 10px;
        font-weight:normal;
        text-align:left;
        background:#fff;
        border-top:0;
        border-left:2px solid #3d90b3;
        border-right:2px solid #3d90b3;
        border-bottom:2px solid #3d90b3;
        border-bottom-left-radius:15px;
        border-bottom-right-radius:15px;
        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. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,518
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    vineet, are you still looking for background images with round corners instead of css corners? or have you solved this already?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •