|
|||
Anfänger: Opera <9.50 ignoriert Style für Formular
Hallo,
ich versuche mich seit kurzem an CSS und möglichst tabellenfreiem Design. Ich habe nun auf einer Seite ein Login-Formular, welches in Opera 9.24 und 9.25 (andere ältere konnte ich leider nicht testen) nicht so dargestellt wird wie es soll. Es scheint so zu sein, dass diese Browser die Styles für das Formular völlig ignorieren. Was allerdings merkwürdig ist : Ich hab' das Formular einmal ohne den Rest der Seite und auch ohne die Styles der übrigen Bestandteile (also einfach 'ne weiße Seite und da drauf das Formular und mehr nicht) gestestet und da ignoriert Opera die CSS-Styles nicht. Wie es scheint beharkt sich da wohl etwas, ich komme bloß leider nicht dahinter was. Der angehängte firefox-2.0.0.9-windows-2000.jpg-Screenshot zeigt wie es aussehen soll und der opera-9.24-windows-2000.jpg-Screenshot zeigt was der Opera macht. Vielleicht kann mir ja jemand weiterhelfen. Danke! So und das ist der Code : Code:
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test-Seite</title> <style type="text/css" media="screen"> body { margin:0; padding:0; font:85% arial, hevetica, sans-serif; text-align:center; color:#333; background-color:#D6D6D6; } a:link { color:#B52C07; } a:visited { color:#600; } a:hover, a:active { color:#fff; background-color:#B52C07; } h2 { color:#B52C07; font:120% arial, hevetica, sans-serif; font-weight:bold; margin:0 0 2px 0; } h2 a { text-decoration: none; } h3 { color:#5B5E0E; font:106% arial, hevetica, sans-serif; font-weight:bold; margin-top:0; } #container { margin: 1em auto; width: 850px; text-align: left; background-color: #fff; border: 1px solid #676767; } #header { height:137px; width:100%; background-image: url(images/header2.jpg); background-repeat: no-repeat; background-position: 0 0; border-bottom:1px solid #fff; position:relative; border:1px none #fff; border-bottom:1px solid #fff; } #header h1 { font-size:1px; text-align:right; color:#fff; margin:0; padding:0; } #mainnav { background-color: #CC9900; color: #272900; padding: 2px 0; margin-bottom: 22px; } #mainnav ul { margin: 0 0 0 20px; padding: 0; list-style-type: none; border-left: 1px solid #C4C769; } #mainnav li { display: inline; padding: 0 10px; border-right: 1px solid #C4C769; } #mainnav li a { text-decoration: none; color: #272900; } #mainnav li a:hover { text-decoration: none; color: #fff; background-color: #CC9900; } #menu { float:left; width:165px; text-align:left; font:95%, Arial, Helvetica, sans-serif; border-right: 1px solid #C5C877; padding-right: 15px; } #menu ul { list-style-image: url(images/button-over.gif); margin-right: 0; padding-right: 0; list-style-type: none; line-height: 165%; } #menu li a { text-decoration: none; color: #CC9900; } #menu li a:hover { text-decoration: none; color: #B52C07; background-color: #fff; } #contents { margin:0 20px 40px 180px; border-left:1px solid #C5C877; padding-left:15px; } #contents p { line-height:165%; text-align:justify; font:95%, Arial, Helvetica, sans-serif; } #contents p span { color:#000; font-weight:bold; margin-top:0; } .linkcontent { border-bottom:1px solid #C5C877; } .linkcontent h5 { color:#000; text-align:right; font:75%, Arial, Helvetica, sans-serif; } input { float:left; display:block; width:150px; border: 1px solid #333; background:#F4F4F4; font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin-bottom:10px; padding:1px; } /*clearing all floats and fix Firefox and IE backgroundcolor-bug */ div.clearer { clear:both; font-size:1px; line-height:1px; display:block; height:1px; } form { background:#FFF; width:300px; max-height:130px; margin-bottom:10px; } form h1 { font-size:14px; font-weight:bold; display:block; padding:5px; margin-bottom:10px; } form label { float:left; display:block; width:100px; margin-bottom:10px; padding-left:10px; } .form-button { margin-left:110px !important; margin-left:55px; /*to fix IE6 position*/ width:100px; } #footer { clear:both; color:#272900; background-color: #CC9900; text-align:right; padding: 5px; font-size:90%; } </style> </head> <body> <div id="container"> <div id="header"></div> <div id="mainnav"> <ul> <li><a href="#">Startseite</a></li> <li><a href="#">Mitarbeiterbereich</a></li> <li><a href="#">Impressum</a></li> <li><a href="#">Disclaimer</a></li> </ul> </div> <div id="menu"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> </ul> </div> <div id="contents"> <div class="linkcontent"> <h2>Mitarbeiterbereich</h2> <p>Sie haben keinen Zutritt zu dieser Seite, da Sie nicht eingeloggt sind !<br/> Wenn Sie Mitarbeiter sind, loggen Sie sich bitte erst ein ... <form action="#" method="post" enctype="application/x-www-form-urlencoded" id="logform"> <h1>Mitarbeiter Login</h1> <div class="form"> <label for="username">Benutzername:</label> <input type="text" name="username" id="username" /> <label for="userpass">Passwort:</label> <input type="password" name="userpass" id="userpass" /> <input name="login" type="submit" value="Einloggen" class="form-button" /> <div class="clearer"> </div> </div> </form> </div> </div> <div id="footer"> © 2007 Design by ant-design </div> </div> </body> </html> |
Sponsored Links |
|
|||
Zitat:
Opera < 9.5 bemängelt das fehlende </p> nach "bitte erst ein ..." |
Sponsored Links |
|
||||
Validieren hilft: The W3C Markup Validation Service
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
|
|||
Jo, danke ist inzwischen auch schon geschehen. Und nach einigen wenigen Änderungen sagen mir jetzt sowohl The W3C Markup Validation Service als auch The W3C CSS Validation Service das die Seite valide ist.
Eine Frage hätte ich noch : Ich hab' die Seite gestern im Lynx (Lynx Viewer) getestet und festgestellt, dass das Formular dort nicht benutzbar ist. Ist das jetzt generell in Textbrowsern so, oder liegt das an mir? |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Opera ignoriert Style... | kiew | CSS | 8 | 01.03.2009 00:58 |
Warum ignoriert Opera negativen top-Wert? | ribery | CSS | 6 | 26.11.2007 23:55 |
Opera ignoriert Schriftgrössenangaben von unter 8 (?) Pixeln | SilentWarrior | CSS | 5 | 11.08.2006 15:06 |
Formular Style | aspn | CSS | 18 | 08.08.2006 14:04 |
Im Opera tuts und im IE nicht <- CSS Anfänger | theSaintHell | CSS | 13 | 13.07.2004 16:23 |