SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Consitent Button padding across various browsers?

    Hi all,

    I am programming a widget for a client. It uses a standard HTML button - I need the button to have the exact same dimensions across the major browers.

    The thing is, the padding looks different in firefox (more of it) than in say Apple Safari or MS IE. If I set explicit width and height values then of course the text value (e.g search) does not sit dead on horizontal.

    Is there anything I can do to keep things looking consitent? thanks!


    Code CSS:
    #search_button_min{
    	padding:3px;
    	color:#ffffff;
    	border: 1px solid #ffffff;
        background: #cccccc;
    	position:absolute;
    }

  2. #2
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    There's not much I can see wrong. There aren't any trouble-spots in your code that are known to be interpreted differently in different browsers, except your background property.

    If you're only describing the color that the background should be, I would recommend only using the background-color property as there's no reason to use the shorthand property/

    That might be the reason.

    Good luck.
    ~TehYoyo

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    Using the background shorthand syntax is perfectly fine.
    I hadn't actually seen that in firefox before, I guess I've never looked to achieve that sort of pixel perfection when it comes to form elements - Most people don't worry about these small differences and let form elements do their own thing.

    I thought you were referring to a nasty bug in IE(6,7 I believe) that horizontal padding is simply ignored, a fix is to simply add overflow: visible to the element.

    But, what you're actually looking at is a default style in firefox that is a little hard to track down.
    Code html5:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>BUTTON</title>
    <style>
    .btn {
    	padding: 3px;
    	color: #fff;
    	border: 1px solid #fff;
    	background: #ccc;
    	overflow: visible;
    	line-height:normal !important;
    }
    input::-moz-focus-inner { padding:0; border:0; }
    </style>
    </head>
    <body>
    <input type="submit" class="btn">
    </body>
    </html>
    You can find these browser provided styles in Firebug under User Agent CSS > forms.css


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
  •