सीएसएस एचटीएमएल

Question

का उपयोग कर सबमिट बटन का वर्टिकल संरेखण मुझे इंटरनेट एक्सप्लोरर में अपने इनपुट के साथ प्रदर्शित करने के लिए मेरा सबमिट बटन प्राप्त करने में परेशानी हो रही है। संरेखण सफारी और फ़ायरफ़ॉक्स में ठीक है लेकिन आईई 5px के नीचे बटन छोड़ रहा है। कोई विचार यह क्यों हो रहा है या मैं इसे कैसे ठीक कर सकता हूं?

यूआरएल http://www.menslifestyles.com क्लिक पेज के शीर्ष पर सदस्यता के रूप में पॉप जाएगा। दो आदानों लाइन अप सीधे लेकिन यानी में सबमिट बटन पर संरेखित नहीं करता है!

------- एचटीएमएल -------

<div id="subscribe"> 
<form id="subscribeform" method="post" action="/maillists/subscribe" accept-charset="utf-8"> 
<div style="display:none;"><input type="hidden" name="_method" value="POST"></div> 

<label for="MaillistName">Name</label><input name="data[Maillist][name]" type="text" maxlength="255" id="MaillistName">&nbsp; &nbsp; 
<label for="MaillistEmail">Email</label><input name="data[Maillist][email]" type="text" maxlength="500" id="MaillistEmail"> 
<input type="submit" value="Submit"><a href="#" id="closelink">X</a> 
</form></div> 

----- सीएसएस -------

#subscribe{ 
    width:620px; 
    position:absolute; 
    top:25px; 
    left:50%; 
    margin-left:-120px; 
    overflow: auto; 
    z-index: 1000; 
    background: #ffffff; 
    color:#6e6e6e; 
    font-size: 10px; 
    text-transform: uppercase; 
    font-family: Helvetica, Verdana; 
} 
#subscribe input{ 
    border: 1px solid #e5e5e5; 
    display: inline; 
    height: 12px; 
    color:#cccccc; 
    width: 215px; 
} 
#subscribe input[type="button"], #subscribe input[type="submit"]{ 
    clear:both; 
    padding:3px, 0px; 
    -webkit-appearance: none; 
    font-family: Helvetica, Verdana; 
    background-color:#cccccc; 
    text-align:center; 
    color: #3c3c3c; 
    font-size:10px; 
    text-transform: uppercase; 
    border: none; 
    cursor: pointer; 
    display: inline; 
    height:15px; 
    width:60px; 
    position:relative; 
    margin-left:5px; 
} 
#subscribe form{ 
    margin:0px; 
    padding:0px; 
} 
#subscribe label{ 
    display: inline; 
    font-size: 10px; 
} 
#subscribe a{ 
    text-decoration: none; 
    color: #cccccc; 
} 
#subscribe #closelink{ 
    padding:0 5px; 
} 

Answer 1

आप स्थापित करना चाहिए गद्दी और मार्जिन स्पष्ट रूप से, कुछ ब्राउज़रों के पास अलग-अलग डिफ़ॉल्ट होते हैं जो गड़बड़ कर देंगे। तो मार्जिन-बाएं: 5 पीएक्स; मार्जिन बन जाता है: 0 0 0 3 पीएक्स;

रूपों आम तौर पर भी सिर्फ असंगत हैं, तो आप की कोशिश करने और पूरी तरह से स्थिति सबमिट बटन, जिस स्थिति में # ग्राहकी स्थिति देना चाहते हो सकता है: रिश्तेदार, और बटन स्थिति प्रस्तुत: पूर्ण; सही: 0px; शीर्ष: 0px;

भविष्य में आप लगभग डिफ़ॉल्ट ब्राउज़र मान प्राप्त कर सकते हैं, और अपने स्टाइलशीट में डिफ़ॉल्ट मान सेट करके एक और संगत रूप प्राप्त कर सकते हैं, रीसेट स्टाइलशीट के लिए here देखें जिसमें आप शामिल कर सकते हैं।

Answer 2

अपने सीएसएस में #subscribe input[type="button"], #subscribe input[type="submit"] कोशिश के लिए vertical-align: top;

Answer 3

जोड़ने के लिए इस सीएसएस नियम

#subscribe input[type="button"], #subscribe input[type="submit"]

बदलें

position:relative में (आप इस में शामिल हैं, तो अब यह कुछ चीजें बाहर फेंक सकता है)

से

position:absolute

चाल चलाना चाहिए। आईई 8 और काम करता है में परीक्षण किया।

Answer 4

सबमिट बटन में विभिन्न ब्राउज़र में अलग-अलग डिफ़ॉल्ट मार्जिन और पैडिंग मान लगते हैं।

मुझे लगता है यह कुछ reset Stylesheet में होना चाहिए क्योंकि यह केवल कष्टप्रद पार ब्राउज़र "डिफ़ॉल्ट" नहीं है विसंगति महत्व देता है। यह मानकीकृत करने के लिए वेब कब जा रहा है यह एक और विषय है।

#searchForm { 
    position: relative; // you must keep this 
    font-weight: normal; 
    font-family: Arial, Helvetica, sans-serif; 
    margin-bottom: 30px; 
} 
input#searchBtn{ 
    padding: 0; // you must keep this 
    margin: 0;  // you must keep this 
    position: absolute; // you must keep this 
    left: 203px; // you can change this 
    top: 2px; 
    height: 24px; 
    width: 42px; // you can change this 
    font-size: 14px; 
    background: url(http://yourDomain/img/yourPrettySearchIcon.png) buttonface no-repeat 9px 1px; 
} 


<form id="searchForm" name="mySearchForm" action="myPage.html" method="post"> 
    <input name="searchBtn" value="" id="searchBtn" type="submit"/> 
</form> 

मैं IE8, फ़ायरफ़ॉक्स और GChrome के बीच बहुत छोटी विसंगतियां भी नज़र आईं लेकिन वहाँ अन्य ब्राउज़रों में हो सकता है:

यह कि हम इसे कैसे करते हैं।

प्रपत्र यहां अपनी स्थिति को सेट करने के लिए "रिश्तेदार" इसलिए जब मैं पूर्ण करने के लिए बटन की स्थिति सेट है कि, बटन स्थिति में ही अपेक्षाकृत searchForm करने के लिए।