1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Button with long label does not wrap in IE, but does with FF

Discussion in 'CSS' started by dfrechet, Nov 15, 2004.

  1. #1
    Hello,

    I'm having trouble making a button with a long label display the same in FireFox (1.0) and IE (6). The problem is that IE does not wrap the button label when it is longer that the specified width of the button. I want it to be identical to FF. During testing, I discovered that if I set the "overflow" property to "visible", IE will extend the width of the button to display the entire label. And if I remove or comment out the "overflow" property, the label is cut.

    Another problem I have with IE is that the button does not change color when the mouse pointer hovers over it. It works fine in FF.

    I have tried many things up to now, but nothing worked. ANY HELP OR ADVICE IS WELCOME.

    Thank you,
    Daniel

    Here is my code:

    button_test.htm:
    ----------------
    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html><head>
    3. <style type="text/css" media="all">
    4. @import url(button_test.css);
    5. </style>
    6. </head><body>
    7. <button type="button">Button with a very long label</button>
    8. </body></html>
    button_test.css:
    ----------------
    Code (Text):
    1. html, body {
    2. background-color:#FFF;
    3. font-family:verdana,arial;
    4. line-height:15px;
    5. margin:10px;
    6. padding:0px 0px 0px 0px;
    7. width:300px;
    8. }
    9.  
    10. button {
    11. background-color:#FF950D;
    12. border-bottom:1px solid #666;
    13. border-left:1px solid #FFAA3D;
    14. border-right:1px solid #666;
    15. border-top:1px solid #FFAA3D;
    16. color:#FFF;
    17. cursor:pointer;
    18. display:block, inline;
    19. font-family:verdana,arial;
    20. font-size:10px;
    21. font-weight:bold;
    22. margin-top:10px;
    23. min-height:22px;
    24. overflow:visible;
    25. text-align:center;
    26. vertical-align:middle;
    27. white-space:normal;
    28. width:100px;
    29. word-wrap:break-word;
    30. }
    31.  
    32. button:hover {
    33. background-color: #FEBB64;
    34. }
     
    dfrechet, Nov 15, 2004 IP
  2. Smyrl

    Smyrl Tomato Republic Staff

    Messages:
    13,147
    Likes Received:
    1,374
    Best Answers:
    68
    Trophy Points:
    510
    #2
    Should this - color:#FFF; be changed to color;#ffffff
     
    Smyrl, Nov 15, 2004 IP
  3. dfrechet

    dfrechet Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi Smyrl,

    The color property is fine. It is a shot-hand notation supported by all browsers.

    The format of an RGB value in hexadecimal notation is a '#' immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.

    For more info, visit www.w3.org/TR/2003/CR-css3-color-20030514/#color

    Thanks,
    Daniel
     
    dfrechet, Nov 15, 2004 IP
  4. expat

    expat Stranger from a far land

    Messages:
    873
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #4
    display:block, inline; .... if I remember corectly one combination of this is illegal I think inline is the one you want to use to generate a box with multiple lines allowing text break.....


    a.button:hover {
    background-color: #FEBB64;
    }
    should work for both

    M
     
    expat, Nov 15, 2004 IP
  5. dfrechet

    dfrechet Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thank you all,

    I was so absorbed and preoccupied at making it work via the style sheet that I simply did not think of other alternatives. I got a reply from A1ien51 in another forum telling me to insert <br /> tags in the label names.

    It is not the ideal solution, but it works.

    Thank you again,
    Daniel
     
    dfrechet, Nov 15, 2004 IP