www.webdeveloper.com
Results 1 to 4 of 4

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

  1. #1
    Join Date
    Apr 2008
    Posts
    2

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

    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...
    Attached Images Attached Images

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    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.
    Last edited by WebJoel; 04-06-2008 at 05:09 PM.
    I build for: Firefox and tweak for IE

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    http://www.w3.org/TR/html401/interac...ml#edef-BUTTON and, yes, it probably doesn't work in XML.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  4. #4
    Join Date
    Apr 2008
    Posts
    2
    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.
    Attached Images Attached Images

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles