please help css button not working in firefox (but works on ie)

**transcend** · 04-06-2008 04:30 PM

i'm getting quite frustrated with this problem. please help. i have :

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>

button { 
   width:auto; 
  overflow:visible; 
  border:0; 
  cursor:pointer; 
  font-weight:bold; 
  padding:0 5px 0 0; 
  text-align:center;
  height:23px;
}


button span { 
  padding:0 23px 0 0;
  margin:0;
}


/*blue buttons*/
button.submitBtn { 
  background:url(button_orange.gif) top right no-repeat; 
  font-size:11px;


}
button.submitBtn span { 
  background:url(button_orange.gif) top left no-repeat;
  color:#fff; display:block; padding-left:23px;  line-height:23px;
}


button.submitBtn:hover {
	background:url(button_orange.gif) bottom right no-repeat; 
}
button.submitBtn:hover span {
	background:url(button_orange.gif) bottom left no-repeat; 
}
button:focus::-moz-focus-inner { border-color: transparent ! important; } 
</style>
</head>

<body>
<button value="submit" class="submitBtn"><span>Submit</span></button>
</body>
</html>

the problem is that on firefox the span is 1 px down so the images dont quite align. thanks for taking time in my problem . i've attached the image i'm using...

**WebJoel** · 04-06-2008 05:01 PM

can "button" exist this way, without id or class? Isn't this done with "<input>"?
noticed that you have :hover without any referance to this being "a"... IE won't recognize the psuedo-class ":hover" on anything other than an anchor

"<button></button>" is html, -you're trying to use it in xhtml I think... no such thing(??) That it works in IE and not Fx doesn't surprise me.

**ray326** · 04-06-2008 11:07 PM

http://www.w3.org/TR/html401/interac...ml#edef-BUTTON and, yes, it probably doesn't work in XML.

**transcend** · 04-07-2008 01:37 AM

well it works !!!! both the button and the hover as they supposed to work. the only problem is that in firefox the <span> shows a top margin of 1 pixel or something .... you can test it by creating a html document with the code from the first post and use the image i've attached in the first post (location same as the .html file.). i've attached an image with the problem. thanks.

Thread: please help css button not working in firefox (but works on ie)

Thread Tools

Display

please help css button not working in firefox (but works on ie)

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions