zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Anfänger: Opera <9.50 ignoriert Style für Formular

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.01.2008, 18:41
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 08.01.2008
Beiträge: 143
shredder01 befindet sich auf einem aufstrebenden Ast
Standard 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">&nbsp;</div>
          </div>
        </form>
	   </div>		 	  
	</div>
	<div id="footer">
	   &copy; 2007 Design by ant-design
    </div>
</div>
</body>
</html>
Angehängte Grafiken
Dateityp: jpg firefox-2.0.0.9-windows-2000.jpg (82,8 KB, 7x aufgerufen)
Dateityp: jpg opera-9.24-windows-2000.jpg (84,3 KB, 8x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.01.2008, 20:35
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Zitat:
<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">

Opera < 9.5 bemängelt das fehlende </p> nach "bitte erst ein ..."
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.01.2008, 18:20
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 08.01.2008
Beiträge: 143
shredder01 befindet sich auf einem aufstrebenden Ast
Standard

Oh je, meine erste Frage in diesem Forum und dann stellt sich raus ich hätte bloß die Augen aufmachen müssen. Vielen Dank!
Mit Zitat antworten
  #4 (permalink)  
Alt 09.01.2008, 18:21
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Validieren hilft: The W3C Markup Validation Service
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #5 (permalink)  
Alt 10.01.2008, 13:13
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 08.01.2008
Beiträge: 143
shredder01 befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #6 (permalink)  
Alt 10.01.2008, 13:34
Benutzerbild von Geronimo
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.06.2004
Beiträge: 2.641
Geronimo sorgt für eine eindrucksvolle AtmosphäreGeronimo sorgt für eine eindrucksvolle Atmosphäre
Standard

Der Lynx Viewer simuliert lediglich wie eine Website von Lynx dargestellt würde. Um auch die Bedienbarkeit zu überprüfen solltest du mit Lynx selbst testen.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:26 Uhr.