Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Senior Member bluntknife's Avatar
    Join Date
    Jan 2003
    Location
    Bucks UK
    Posts
    288
    Member #
    451
    Hi all,

    Long time no post! I'm having some problems with an e-commerce site that I'm working on, and was wondering if someone would be able to help me.

    I'm trying to style some a tags and submit buttons to look 'roughly' the same, with mixed success. At the moment, they look great, but they are not quite the same. They seem to have different padding, text sizes and margins which my style sheet isn't 'cancelling out'.

    Can anyone see where the problem is? The best way to see it in effect is to click the link below and add something to your cart - when viewing the cart the 'Update Details' (input) and 'Checkout' (a) 'buttons' look quite different. What am I doing wrong? Do i need to use another selector to stop the default browser values overriding something? Or am I missing something else?

    Code:
    a.button, #content a.button, input.button, #content input.button {
        background-color: #FBFBFB;
        background-repeat: no-repeat;
        background-position: 4px 3px;
        color: #000;
        border: 2px solid #EEE;
        font-size: x-small;
        
        padding: 4px 6px 4px 25px;
        margin: 6px;
        
        cursor: pointer;
        display: inline;
        text-decoration: none;
        
        line-height: normal;
        
        zoom: 100%;
    }
    
    a.button:hover, #content a.button:hover, input.button:hover, #content input.button:hover {
        background-color: #FDF2EE;
        border-color: #F3AB8F;
        color: #E6551E;
        cursor: pointer;
    }
    http://byford.gotadsl.co.uk/shop/ind...&products_id=1

    Please note that's a link to Apache on my localhost, so if my local IP changes, it might not work... Sorry I'll try and keep it working!

    Thanks in advance,

    Ollie
    Hardly the sharpest thing in the drawer.
    Design | Life | Outdoors | Ryukin Radio

  2.  

  3. #2
    Senior Member bluntknife's Avatar
    Join Date
    Jan 2003
    Location
    Bucks UK
    Posts
    288
    Member #
    451
    A screenshot, if it helps at all
    Attached Images Attached Images
    Hardly the sharpest thing in the drawer.
    Design | Life | Outdoors | Ryukin Radio

  4. #3
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    You can also use a normal submit input to do the same, so if you must, just make yourself a form with the target URL as the action parameter. Or you could also do it the other way around - use an anchor to submit the form via JS. If you choose this method, also supply a normal submit input that JS hides, so it degrades peacefully.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    I was going to say, I'm pretty sure you can use the <button> element for this purpose.

    And Steax, layouts degrade gracefully, not peacefully :-D Although I'd like to see a layout that degrades in a warlike manner. *BANG* goes the computer. `I DEGRADED, ****' :-P

    While this is a nasty solution, try !importanting some of your directives and see if that fixes things at all.

  6. #5
    Senior Member Ferro's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    386
    Member #
    14204
    Liked
    5 times
    Quote Originally Posted by Shadowfiend

    Although I'd like to see a layout that degrades in a warlike manner.
    The "Genghis Khan tribute site" ???

    :laugh:

  7. #6
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Have I ever told you the horror story about the website with 7 buttons for the same function, each for no JS, IE5, IE6, Firefox, Safari, screen readers, and mobiles, that all appear when JS is turned off? Well lately I've been using the term "peacefully", because people often think they can win the battle using JS alone, and things go bang when JS goes off or haywire... So yeah.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  8. #7
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Hahaha. Point well made.

  9. #8
    Senior Member bluntknife's Avatar
    Join Date
    Jan 2003
    Location
    Bucks UK
    Posts
    288
    Member #
    451
    Quote Originally Posted by Shadowfiend
    While this is a nasty solution, try !importanting some of your directives and see if that fixes things at all.
    Already tried that, without much luck Well, without any luck at all. I can't work out what's causing the problem here
    Hardly the sharpest thing in the drawer.
    Design | Life | Outdoors | Ryukin Radio

  10. #9
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Browsers seem to have special built-in layouting for buttons, although there has to be official docs on that, if you'd bother to search the w3c. Basically you shouldn't try to mix them up. And if I remember correctly, safari won't let you style buttons at all.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  11. #10
    Senior Member bluntknife's Avatar
    Join Date
    Jan 2003
    Location
    Bucks UK
    Posts
    288
    Member #
    451
    Actually, I think Safari is probably rendering them the 'closest' together - it's still not quite perfect, but it's not as far off as Firefox or IE.

    I've tried using the button tag now, but it looks exactly the same as the input tag when used!
    Hardly the sharpest thing in the drawer.
    Design | Life | Outdoors | Ryukin Radio


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:13 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com