2 replies [Last post]
dfrechette
Offline
newbie
Montreal, QC, Canada
Last seen: 16 years 9 weeks ago
Montreal, QC, Canada
Joined: 2004-11-15
Posts: 2
Points: 0

Hello,

I'm having trouble making a button with a long label display the same in FireFox (1.Innocent 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;
} 

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

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

IE doesn't understand :hover on anything but a(nchor).

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

dfrechette
Offline
newbie
Montreal, QC, Canada
Last seen: 16 years 9 weeks ago
Montreal, QC, Canada
Joined: 2004-11-15
Posts: 2
Points: 0

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

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 line change (<br />) tags in the label names.

It is not the ideal solution, but it works.

Thank you again,
Daniel