Hallo zusammen,
ich bin aktuell auf ein Problem gestoßen, was ich mir absolut nicht erklären kann.
Ich habe ein Formular und dieses mit CSS "formatiert". Im Internet-Explorer 6.x lassen sich keine Input-Felder mehr anwählen und befüllen. Der Cursor/Fokus ist schlichtweg nicht möglich.
Hier mal das Dokument...
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>ORCA² - on demand reporting callcenter analysis</title>
<link rel="SHORTCUT ICON" href=".././images/favicon.ico" />
<link type="text/css" rel="stylesheet" media="screen" href="includes/style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="includes/ie.css" />
<![endif]-->
<script src=".././helperscripts/frameworks/prototype/prototype.js" type="text/javascript"></script>
<script src=".././helperscripts/frameworks/prototype/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<div id="content">
<div id="login"><form action="/orca2/index.php?login=true" method="post" style="background:#fff url('./images/lock.gif') 70px left no-repeat; text-align:right;">
<fieldset style="padding:50px 20px 43px 140px;">
<legend style="margin:0 auto 40px;">Verifizierung erforderlich:</legend>
<label>User-ID:</label><input type="text" name="user" value="" class="small" /><br />
<label>Passwort:</label><input type="password" name="pass" value="" class="small" /><br />
<label> </label><input type="image" src="images/btn_login.gif" name="login" alt="Prüfen" style="margin:0px; margin-bottom:2px;" /> </fieldset>
</form></div>
</div>
</body>
</html>
und das dazugehörige CSS...
Code:
* {
margin: 0px;
padding: 0px;
border: 0;
}
a {
color: #3C6491;
background-color: inherit;
}
a:hover {
color: #ff9933;
background-color: inherit;
}
body {
font-family: Verdana;
font-size: .7em;
background: #fff url(.././images/bg.gif) repeat-x top;
}
blockquote {
margin: 15px 25px;
}
ul {
margin: 5px 40px 5px 16px;
list-style-image: url(../images/list.gif);
line-height: 1.4em;
}
ul.blz li {
padding:2px 5px;
}
ul.blz li:hover {
background-color:#f93;
cursor:pointer;
}
ul.blz {
background:#8daac7;
list-style:none;
list-style-image:none;
margin:-3px 0 0 0;
width:300px;
}
table {
font-size: 11px;
}
.tborder {
border-collapse: collapse;
background: #8daac7;
}
.tborder1 {
border-collapse: collapse;
background: #8daac7;
font-family: Arial;
font-size: 11px;
}
th, td {
padding: 2px;
white-space: nowrap;
}
th {
background: #8daac7;
color: #fff;
text-align: center;
}
td {
text-align: right;
}
td.summary {
border-top:1px solid #000;
border-bottom:3px double #000;}
h2 {
color: #8daac7;
font-size: 14px;
}
h3 {
color: #8daac7;
font-size: 12px;
margin:0 0 10px 0;
}
hr {
height:1px;
border:0;
border-top:1px solid #8daac7;
margin:0 0 10px 0;
}
.dashed {
border-bottom: 1px dashed #8daac7;
margin: 0 0 10px 0;
}
.peq {
background-color: #ffff99;
}
/* zweite Navigation */
#hmenu {
padding: 3px 0 5px 20px;
float: left;
border-right: 1px solid #8daac7;
}
#hmenu a {
padding: 5px 13px 3px 11px;
text-decoration: none;
color: #414141;
background: #ccc url(../images/hmenuarrow.gif) no-repeat top center;
margin: 0 0 3px 1px;
border-bottom: 2px solid #8daac7;
border-left: 1px solid #8daac7;
}
#hmenu a:hover {
background: #ff9933 url(../images/hmenuarrowhover.gif) no-repeat top center;
color: #FFFFFF;
border-bottom: 2px solid #8daac7;
}
/************************************************************
* DIV-Container
***********************************************************/
#base {
margin: 0 0px;
text-align: right;
}
#footer {
clear: both;
text-align: center;
font-size: 10px;
border-top: 2px solid #8daac7;
padding: 5px 20px 25px 20px;
margin: 26px auto;
}
#login {
width: 360px;
margin: 60px auto 150px auto;
}
#content {
margin: 15px 20px;
text-align: left;
}
#err, #success, #info {
padding: 5px;
text-align: left;
}
#err {
border: 1px solid red;
color: red;
}
#success {
border: 1px solid green;
color: green;
}
#info {
border: 1px solid #8daac7;
color: black;
}
/************************************************************
* Formulare
***********************************************************/
fieldset {
border:1px solid #8daac7;
padding: 10px;
}
legend {
padding: 5px;
font-weight: bold;
color: #8daac7;
font-size: 12px;
}
label {
float: left;
clear: left;
display: block;
line-height: 2em;
padding:0 5px 0 0;
margin:-2px 0 3px 0;
}
.erfassen label {
width:170px;
}
input {
font-size:13px;
height: 18px;
}
input.med, input.red, .kredit, .kreditred {
width: 132px;
height: 17px;
padding: 1px 5px 1px 5px;
background: #fff url(.././images/input_med.gif) repeat-x top left;
text-align: left;
}
input.red, .kreditred {
background: #fff url(.././images/input_med.gif) repeat-x -19px left;
}
input.small, input.smallred {
width: 90px;
height: 17px;
padding: 1px 5px 1px 5px;
background: #fff url(.././images/input_small.gif) repeat-x top left;
text-align: left;
}
input.smallred {
background: #fff url(.././images/input_small.gif) repeat-x -19px left;
}
input.file {
padding: 1px 5px 1px 5px;
background: #fff url(.././images/input_file.gif) repeat-x top left;
}
input.submit {
background-color: #8daac7;
color: white;
margin: 3px 0 -1px 0;
height: 18px;
}
input.check {
margin:2px 0 0 -4px;
}
textarea {
border: 1px solid #8daac7;
padding: 5px;
}
.login {
text-align: right;
background:#fff url('images/lock.gif') top left;
z-index:0;}
Vieles davon ist noch in der Entwicklung. Deshalb entschuldigt bitte den Spagetti-Code und eventuell unsinnige DIV-Layer.
Es ist mir unverständlich, warum man die Input-Felder nicht anwählen kann.
Wohlgemerkt, wenn ich die CSS-Dateien im Header nicht einbinde und alle style-Elemente im HTML-Code entferne, funktioniert es immer noch nicht. Habt ihr einen Tipp für mich?