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>
08.01.2008, 18:41
Anfänger: Opera <9.50 ignoriert Style für Formular
Ähnliche Themen
Linear-Darstellung
