popcornplya Posted February 19, 2009 Share Posted February 19, 2009 For the first time, something works in IE but not in Firefox.. Anyway, here is my problem.. Submit button text is not aligned correctly. My 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" lang="en"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Form</title> <style type="text/css"> p,form { margin:0; padding:0; } #contact { width:500px; font:12px Arial, Helvetica, sans-serif } #contact label { color:#666; } #contact label span { color:#F00; } #contact p { margin:5px 0 5px; } #contact .contact_text, #contact .contact_textarea { width:100%; border:1px solid #CCC; padding:5px; background:url('form_bg.png') repeat-x; } #contact .contact_submit { background:url('form_button.png') no-repeat; width:139px; height:21px; border:0 none; color:#FFF; } #contact .contact_textarea { height:150px; } </style> </head> <body> <div id="contact"> <label>Recipient's Name: <span>*</span></label> <p> <input type="text" class="contact_text" /> </p> <label>Subject:</label> <p> <input type="text" class="contact_text" /> </p> <label>Message:</label> <p> <textarea class="contact_textarea"></textarea> </p> <p> <input type="submit" class="contact_submit" value="Send Message" /> </p> </div> </body> </html> Any help is appreciated Quote Link to comment Share on other sites More sharing options...
andrewsCWD Posted February 20, 2009 Share Posted February 20, 2009 I've had trouble getting text to align properly inside of images when viewing them in firefox and IE as well. It's hard for me to mess with this since I don't have your submit button image. Your code seems fine. Have you ever tried using the: * {margin: 0; padding:0} selector before? This will set everything on your page to 0 though, p, h1, form, etc... But I find this helps a lot with browser padding and margin issues especially with aligning text inside of small images. Andrew Quote Link to comment Share on other sites More sharing options...
haku Posted February 20, 2009 Share Posted February 20, 2009 Change this: #contact .contact_submit { background:url('form_button.png') no-repeat; width:139px; height:21px; border:0 none; color:#FFF; } To this: #contact .contact_submit { background:url('form_button.png') no-repeat; width:139px; height:21px; border:0 none; color:#FFF; line-height: 21px; } Quote Link to comment Share on other sites More sharing options...
shadiadiph Posted February 21, 2009 Share Posted February 21, 2009 I was having many problems with I.E firefox etc as long as you make sure your page validates on w3.org validatior it should work in all the main browsers. Quote Link to comment Share on other sites More sharing options...
haku Posted February 21, 2009 Share Posted February 21, 2009 I just noticed the original code has two opening <html> tags. Should take the second one out. Quote Link to comment Share on other sites More sharing options...
popcornplya Posted February 21, 2009 Author Share Posted February 21, 2009 Thanks guys.. I fixed this by setting a reset. And I removed the other <html>. Also, line height never worked xD but thanks Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.