SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Button & text problem

    My web page reads fine in Chrome, but on one of the buttons in IE half of text disappears and in Firefox it shows out of the box

    The page is http://www.c5d.co.uk/descriptioned51891.php

    Is the real answer to increase the button size, or reduce the text size in the button ?

    I hope not because I want to keep the button & text all the same on all my pages

    Thanks for any help

    Antony

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It's probably because the default padding on the button is different in various browsers. You could try:

    Code:
    button{padding:0}
    However the text in the "Return to the 1981 Homepage" button is almost at full width and some browsers may render the text longer than will fit on one line so you could lengthen the button a little more.

    Or perhaps use a min-width (IE7+) e.g.

    Code:
    button{width:auto!important;min-width:200px}
    The !important is needed because you have used inline styles and only !important will over-ride them.

  3. #3
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, it almost worked as suggested !

    Having done what you suggested it rendered in one straight line, but shrank the height of the button.

    I added in (height:auto!important;min-height:30px) and it worked a treat !

    Thanks for the prompt reply

    Antony

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by certificates View Post
    Thanks, it almost worked as suggested !
    Having done what you suggested it rendered in one straight line, but shrank the height of the button.
    You could have just added some padding top and bottom back into the rule as it was the horizontal padding extending the button However the min-width should do what you want anyway without changing the default padding.


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
  •