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 Link to comment https://forums.phpfreaks.com/topic/146011-solved-firefox-help/ 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 Link to comment https://forums.phpfreaks.com/topic/146011-solved-firefox-help/#findComment-766862 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; } Link to comment https://forums.phpfreaks.com/topic/146011-solved-firefox-help/#findComment-766873 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. Link to comment https://forums.phpfreaks.com/topic/146011-solved-firefox-help/#findComment-767728 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. Link to comment https://forums.phpfreaks.com/topic/146011-solved-firefox-help/#findComment-767742 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 Link to comment https://forums.phpfreaks.com/topic/146011-solved-firefox-help/#findComment-767810 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.