Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,994
    Thanks
    120
    Thanked 76 Times in 76 Posts

    Sexy buttons modified

    based on this:
    http://www.oscaralexander.com/tutori...-with-css.html

    I made modifications that instead of text u can have image inside button. Sample is made so there can be inserted any image 24 x X pixels.

    Works in FF ok does not on IE7(only click at right most part of button works)

    What is that I dont see ?. Thanks for help.

    here is the link to sample:http://86.61.66.17:8084/#

    and css:

    Code:
    a.buttonImg {
        background: transparent url('bg_button_a.png') no-repeat scroll top right;
        display: block;
        float: left;
        height: 26px;
        padding-right: 18px; /*push span to the right for background width*/
        outline: none; /* hide dotted outline in Firefox */
    }
    
    a.buttonImg span {
        background: transparent url('bg_button_span.png') no-repeat scroll top left;
        display: block;
        height: 26px;
        padding-left:18px;/*make space from right background image*/
    } 
    
    a.buttonImg span img {
        height:auto;
        width:auto;
        border: 0 none;
        alt:"žnj";
    } 
    
    a.buttonImg:active span img {
        position:relative;
        top:1px;
        left:1px;
    } 
    
    a.buttonImg:active {
        background-position: bottom right;
    }
    
    a.buttonImg:active span {
        background-position: bottom left;
    }

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Tried swapping around the span and anchor?
    Last edited by Apostropartheid; 12-22-2007 at 11:08 PM.

  • #3
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,994
    Thanks
    120
    Thanked 76 Times in 76 Posts
    Did that, no effect, now there isn't any response at all anywhere in IE7.

    The second button new way --> http://86.61.66.17:8084/#

    any other ideas ?

  • #4
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,994
    Thanks
    120
    Thanked 76 Times in 76 Posts
    did this test, all works in FF, in IE only on a tag, perhaps this has something to do with problem ?
    Code:
    div.test:active
    {
      color: red;     
    }
    
    span.test:active
    {
      color: red;     
    }
    
    a.test:active
    {
      color: red;    
    }
    Last edited by BubikolRamios; 12-23-2007 at 10:50 AM.

  • #5
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,994
    Thanks
    120
    Thanked 76 Times in 76 Posts
    ok, found the bugger. Is there any way to do something like:

    Code:
     <!--[if IE]><style type="text/css">@import "ie_fixes.css";</style><![endif]-->
    inside css file itself, coz I dont fill like copying whole css file just for 1 line change ?

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    No, you can't write conditional comments inside a CSS file.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New Coder
    Join Date
    Jun 2007
    Location
    Quebec, Canada
    Posts
    64
    Thanks
    4
    Thanked 3 Times in 3 Posts
    you can always filter IE7 in css by using * + html as in * + html a.buttonImg span

    and by the way, it gets glitchy when the text size is bumped a few notches in FF.

  • Users who have thanked vexen for this post:

    BubikolRamios (12-23-2007)

  • #8
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,994
    Thanks
    120
    Thanked 76 Times in 76 Posts
    Vexen, thanks for tip however, can't seem to fit this for what I need:

    the css below works in FF, for IE "height: 24px;" should be removed. Any ideas ?

    or at least I would have to know what is default span height for IE and how to set it ..

    Code:
    a.buttonImg span {
        background: transparent url('../img/button/bg_button_span.png') no-repeat scroll top left;
        display: block;
        height: 24px;
        padding-left:18px;/*make space from right background image*/
    }
    Last edited by BubikolRamios; 12-23-2007 at 05:52 PM.


  •  

    Posting Permissions

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