dfrechet
Nov 15th 2004, 8:37 am
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:
----------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css" media="all">
@import url(button_test.css);
</style>
</head><body>
<button type="button">Button with a very long label</button>
</body></html>
button_test.css:
----------------
html, body {
background-color:#FFF;
font-family:verdana,arial;
line-height:15px;
margin:10px;
padding:0px 0px 0px 0px;
width:300px;
}
button {
background-color:#FF950D;
border-bottom:1px solid #666;
border-left:1px solid #FFAA3D;
border-right:1px solid #666;
border-top:1px solid #FFAA3D;
color:#FFF;
cursor:pointer;
display:block, inline;
font-family:verdana,arial;
font-size:10px;
font-weight:bold;
margin-top:10px;
min-height:22px;
overflow:visible;
text-align:center;
vertical-align:middle;
white-space:normal;
width:100px;
word-wrap:break-word;
}
button:hover {
background-color: #FEBB64;
}
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:
----------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css" media="all">
@import url(button_test.css);
</style>
</head><body>
<button type="button">Button with a very long label</button>
</body></html>
button_test.css:
----------------
html, body {
background-color:#FFF;
font-family:verdana,arial;
line-height:15px;
margin:10px;
padding:0px 0px 0px 0px;
width:300px;
}
button {
background-color:#FF950D;
border-bottom:1px solid #666;
border-left:1px solid #FFAA3D;
border-right:1px solid #666;
border-top:1px solid #FFAA3D;
color:#FFF;
cursor:pointer;
display:block, inline;
font-family:verdana,arial;
font-size:10px;
font-weight:bold;
margin-top:10px;
min-height:22px;
overflow:visible;
text-align:center;
vertical-align:middle;
white-space:normal;
width:100px;
word-wrap:break-word;
}
button:hover {
background-color: #FEBB64;
}