[CSS] Button höher darstellen

bodo2005 · 4. April 2006

Ich möchte gerne, dass der Formular Button genau auf der Leiste, siehe Anhang dargestellt wird, leider brauche ich dafür bei Opera "-7px", bei Firefox "-8px" und im IE 6 "-10px"... wie kann ich dies ändern und vereinheitlichen? Worum wird dies so unterschiedlich dargestellt?

HTML:

<div id='login'>
           <form method='post' action=''>
                 <input type='text' name='username' value='Username' class='input' />
                 <input type='password' name='password' value='Passwort' class='input' />
                 <input type='submit' name='senden' value='' id='submit_login'>
           </form>
      </div>

Code:

#login
        {
         margin: 0px;
         padding: 0px;
         background: white url(nav_line.jpg) top left repeat-x;
         position: absolute;
         top: 100px;
         left: 15px;
         width: 690px;
        }

        #login form
        {
         margin-left: 8px;
        }

        .input
        {
         margin: 0px;
         margin-top: 10px;
         padding: 1 0 1 0px;
         border: 1px;
         border-style: solid;
         border-color: black;
         width: 100px;
         font-size: 90%;
        }

        #submit_login
        {
         position: relative;
         top: -8px;
         background: url(login.jpg);
         width: 44px;
         height: 19px;
         border: 0px;
         margin: 0px;
         padding: 0px;
        }

        #submit_login:hover
        {
         background: url(login_hover.jpg);
        }

PuppetMaster · 4. April 2006

Benutzt du einen DOCTYPE, und wenn ja, welchen bzw. mit oder ohne XML-Prolog?

bodo2005 · 4. April 2006

Ja nutze ich:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Nase · 4. April 2006

Mal mit display: inline; versucht?

bodo2005 · 4. April 2006

Danke, bringt leider nichts...

KonKorT · 4. April 2006

Versuch das mal:

PHP:

#login
        {
         margin: 0px;
         padding: 0px;
         background: white url(nav_line.jpg) top left repeat-x;
         position: absolute;
         top: 100px;
         left: 15px;
         width: 690px;
        }

        #login form
        {
         margin-left: 8px;
        }

        .input
        {
         margin: 0px;
         margin-top: 10px;
         padding: 1 0 1 0px;
         border: 1px;
         border-style: solid;
         border-color: black;
         width: 100px;
         font-size: 90%;
        }

        #submit_login
        {
         position: relative;
         top: -8px;
         background: url(login.jpg);
         width: 44px;
         height: 19px;
         border: 0px;
         margin: 0px;
         padding: 0px;
        }
        * html #submit_login
        {
  	   top: -10px;
        }

        #submit_login:hover
        {
         background: url(login_hover.jpg);
        }

Nase · 4. April 2006

bodo2005 schrieb:
Danke, bringt leider nichts...

Ups, vergessen zu sagen, dass du das auch auf das <form> anwenden musst (falls nicht eh schon gemacht).

bodo2005 · 5. April 2006

@KonKorT + @Nase

Leider bringen beide Methoden nichts...

Woran könnte es liegen, dass die Browser dies so unterschiedlich darstellen?

pcw · 5. April 2006

Ähm wenn du nur den Button und nicht die 2 Textfelder auf die Linie bekommen willst, kannst du dem entsprechenden Element doch einfach ein "vertical-align:top;" geben, oder?

Suche

[CSS] Button höher darstellen

bodo2005

Lt. Junior Grade

Anhänge

PuppetMaster

Admiral Pro

bodo2005

Lt. Junior Grade

Nase

Gast

bodo2005

Lt. Junior Grade

KonKorT

Lt. Commander

Nase

Gast

bodo2005

Lt. Junior Grade

pcw

Lt. Commander

Ähnliche Themen