Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Help Required CSS/Markup Problem (IE)

Bottom of Page

1 to 13 of 13

  1.  
    • CommentAuthortechunar
    • CommentTimeMay 27th 2008
     permalink
    Hello Everyone!

    I am glad to be here, this is my first post to the community :)

    Well, following is my markup that works fine for Safari and FF, but it has problems with IE6/7.

    This is the Markup:

    <button class="buttonWrapper" type="reset">
    <ul class="button">
    <li>
    <span class="left"> </span>
    <a href="#">Reset</a>
    <span class="right"> </span>
    </li>
    </ul>
    </button>

    CSS for this is:


    .buttonWrapper{
    background:none;
    border:0pt none;
    cursor:pointer;
    height:36px;
    line-height:36px;
    margin:0pt;
    padding:0pt;
    vertical-align:middle;
    }

    ul.button{
    line-height:22px;
    float:left;
    }

    ul.button li{
    display:block;
    float:left;
    }

    ul.button li span.left{
    float:left;
    background-image: url(../images/lightbox_btn_orng_left_0.gif);
    background-repeat: no-repeat;
    width:6px;
    height:22px;
    }

    ul.button li a{
    padding:2px 5px;
    text-align:center;
    font-family: arial;
    font-size:12px;
    color:#fff;
    font-weight:bold;
    background-image: url(../images/lightbox_btn_orng_center_0.gif);
    background-repeat: repeat-x;
    height:22px;
    line-height:17px;
    float:left;
    }

    ul.button li span.right{
    float:left;
    background-image: url(../images/lightbox_btn_orng_right_0.gif);
    background-repeat: no-repeat;
    width:6px;
    height:22px;
    }

    After hours of fixes, I found out that I had to apply the width to the Button element in order to work for IE, but that breaks everything in FF/Safari.

    Well I am short on time, I have this markup everywhere in my application.

    Looking forward for HELP!

    Thanks.
    • CommentAuthorarvana
    • CommentTimeMay 27th 2008
     permalink
    I haven't studied your CSS in detail, but the trick that jumps to mind is to try the old height:1% fix for IE on your button. See if that works!
  3.  permalink
    Having a list inside a button seems unnecessary. Google "styling button element" and you'll find a lot of better ways to do it.
    • CommentAuthorkesav
    • CommentTimeMay 28th 2008 edited
     permalink
    I can understand your requirement... You need to button to accommodate any length of text and a flexible background with curved corners...

    you have unnecessary markup complication... Here is my solution...

    Markup:
    <a href="#" class="button"><span class="left"></span> Reset <span class="right"></span></a>

    CSS:
    .button{
    position: relative;
    float: left
    /*Add other presentational stuffs like, line-height, background, padding...*/
    }
    .left{
    position: absolute;
    top:0;
    left:0;
    /*Add other presentational stuffs like, width, height, background, padding...*/
    }
    .right{
    position: absolute;
    top:0;
    right:0;
    /*Add other presentational stuffs like, width, height, background, padding...*/
    }

    -Cheers!
    -Kesav
  5.  permalink
    Those empty spans are also unnecessary markup, and non-semantic as well.
    • CommentAuthorkesav
    • CommentTimeMay 28th 2008 edited
     permalink
    Yes I know those empty spans are non-semantic, but very much needed for the output...

    Can you please provide a semantic solution for the button- that will accommodate text of any length and that should have curved corners (images)

    -Cheers! Kesav.
    • CommentAuthorpixelalb
    • CommentTimeMay 28th 2008
     permalink
    See an example here: http://pixelalb.ro/projects/example/button/

    The html:
    <a href="#" class="button"><span >Reset </span></a>

    The CSS:

    .button{display: block; float: left; text-decoration: none; height:20px; font-size:11px; background: url(eft_small_cnr.gif) no-repeat 0 0; }
    .button span{display: block; float: left; padding:3px 8px 0 0px; height:17px; cursor: pointer; background: url(right_long_img.gif) no-repeat right 0;}
    • CommentAuthortechunar
    • CommentTimeMay 28th 2008
     permalink
    Thanks Everyone! :)

    Kesav, thanks for taking it serious, problem is, I have 3 slices from my designer, and this always gives me tough time :P

    But finally after hours I have come with with this sweet markup :) and this works fine everywhere...!

    The Markup:

    <button class="wrapButton">
    <span class="left">
    <span class="mid">
    My Sweet Button
    </span>
    </span>
    </button>

    And the CSS:

    .wrapButton{
    border:0pt none;
    cursor:pointer;
    margin:0px;
    overflow:visible;
    white-space: nowrap;
    padding:0px;
    background: none;
    height:1%;
    background:transparent url(../images/lightbox_btn_orng_right_0.gif) no-repeat scroll right center;
    padding-right:6px;
    }

    .wrapButton span.mid{
    background:transparent url(../images/lightbox_btn_orng_center_0.gif) repeat-x scroll left center;
    display:block;
    height:22px;
    margin-left:6px;
    padding:0px 10px;
    line-height:20px;
    font-family:Lucida Grande, Arial;
    font-size:12px;
    font-weight:bold;
    color:#fff;
    }

    .wrapButton span.left{
    display:block;
    background:transparent url(../images/lightbox_btn_orng_left_0.gif) no-repeat scroll left center;
    height:22px;
    white-space: nowrap;
    }


    Well, now I haven't used float if I have applied display:block! :)

    Thanks really for the help people..
  9.  permalink
    Kesav
    Here's one way to (almost) do it. I have to admit that there isn't a semantically correct way to style buttons, but empty elements are never the way to go. I'd still like to argue that using two images is enough - with or without the rounded corners.
    • CommentAuthortechunar
    • CommentTimeMay 30th 2008
     permalink
    well, I wonder with two images we have to explicitly assign a width, but with three slices for button we can have automatic size
  11.  permalink
    No you don't, if the second slice is wide enough. Set a fixed width on the smaller one and make the other one fluid.

    (this really isn't a big deal, but it's still one request from the server that could be avoided)
    • CommentAuthortechunar
    • CommentTimeJun 2nd 2008
     permalink
    wonder how.. can you show some markup/css ?
  13.  permalink
    Just check the link from my previous comment.

1 to 13 of 13

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page