Hallo,
Ich programmiere gerade an der neuen Kundenverwaltung für meinen Vater, doch hier habe ich ein Problem und zwar, verrutscht die Navigation und der Content Bereich im IE, in FF is es aber richtig.
Ich hab mal 2 Screenshots angehängt um das Problem darzustellen.
Anbei auch der Code und der CSS Code.
Danke
Code:
Style.css
Layout.css
Ich programmiere gerade an der neuen Kundenverwaltung für meinen Vater, doch hier habe ich ein Problem und zwar, verrutscht die Navigation und der Content Bereich im IE, in FF is es aber richtig.
Ich hab mal 2 Screenshots angehängt um das Problem darzustellen.
Anbei auch der Code und der CSS Code.
Danke
Code:
HTML:
<!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>DVM Kundenverwaltung</title>
<link rel="stylesheet" type="text/css" href="includes/css/layout.css" />
<link rel="stylesheet" type="text/css" href="includes/css/style.css" />
<script type="text/javascript" src="includes/js/kv.js"></script>
<script type="text/javascript" src="includes/js/prototype.js"></script>
<script type="text/javascript" src="includes/js/mootools.js"></script>
<script type="text/javascript" src="includes/js/imask.js"></script>
<script type="text/javascript">
iMask({
onFocus: function(obj) {
obj.setStyles({"background-color":"#ff8", border:"1px solid #880"});
},
onBlur: function(obj) {
obj.setStyles({"background-color":"#fff", border:"1px solid #ccc"});
},
onValid: function(event, obj) {
obj.setStyles({"background-color":"#8f8", border:"1px solid #080"});
},
onInvalid: function(event, obj) {
if(!event.shift) {
obj.setStyles({"background-color":"#f88", border:"1px solid #800"});
}
}
});
</script>
</head>
<body>
<div id="status"></div>
<div id="container" class="clearfix">
<div id="header">
<center>
<table width="660" border="0" align="center">
<tr>
<td><a href="home.html"><img src="includes/images/logo.png" /></a></td>
<td><div align="right">Herzlich Willkommen, <b>gh0$t</b><br />
Letzter Login: <b>18.09. 2008 - 08:42</b><br />
Gruppe: <b>Versicherungsbüro Bischof</b><br />
(<a href="profil.html">Mein Profil</a> | <a href="login.html?action=logout">Ausloggen</a></div></td>
</tr>
</table>
</center>
</div>
<div id="topnavi">
<div style="width:800px; margin:0 auto;"><form action="schnellsuche.html" method="post">
<input type="text" name="query" class="formular_schnellsuche" autocomplete="off" />
<select name="type" class="auswahl_schnellsuche">
<option value="p">Privatkunde</option>
<option value="f">Firmenkunde</option>
</select>
<input type="submit" name="search" value="Suchen" class="button_schnellsuche" />
</form></div>
</div>
<div id="innerwrap">
<div class="leftCol">
<div id="left">
<script type="text/javascript">
function ShowHide(id) {
obj = document.getElementsByTagName("div");
if (obj[id].style.display == ''){
obj[id].style.display = 'none';
}
else {
obj[id].style.display = '';
}
}
</script>
<div id="menu">
<ul>
<li class="main" onclick="javascript:ShowHide('allgemein')">Allgemein</li>
<div id="allgemein" style="display:none;">
<li><a href="home.html">Startseite</a></li>
<li><a href="profil.html">Mein Profil</a></li>
<li><a href="gebliste.html">Geburtstagsliste</a></li>
<li><a href="login.html?action=logout" title="Logout">Ausloggen</a></li>
</div>
<li class="main" onclick="javascript:ShowHide('privatkunden')">Privatkunden</li>
<div id="privatkunden" style="display:none;">
<li><a href="privatkunden_eintragen.html" title="Privatkunden eintragen" >Eintragen</a></li>
<li><a href="privatkunden_suchen.html" title="Privatkunden suchen" >Suchen</a></li>
<li><a href="privatkunden_upload.html" title="Privatkunden Datei hochladen">Datei upload</a></li>
<li><a href="privatkunden_ohne_vertrag.html" title="Kunden ohne Vertrag">Kunden ohne Vertrag</a></li>
</div>
<li class="main" onclick="javascript:ShowHide('firmenkunden')">Firmenkunden</li>
<div id="firmenkunden" style="display:none;">
<li><a href="firmenkunden_eintragen.html" title="Firmenkunden eintragen" >Eintragen</a></li>
<li><a href="firmenkunden_suchen.html" title="Firmenkunden suchen" >Suchen</a></li>
<li><a href="firmenkunden_ohne_vertrag.html" title="Kunden ohne Vertrag">Kunden ohne Vertrag</a></li>
</div>
<li class="main" onclick="javascript:ShowHide('vertraege')">Verträge</li>
<div id="vertraege" style="display:none;">
<li><a href="vertraege_eintragen.html&kunde=p" title="Vertrag eingeben">Eintragen</a></li>
<li><a href="vertraege_suchen.html&kunde=p" title="Vertrag suchen">Suchen</a></li>
</div>
<li class="main">Administration</li>
<li><a href="einstellungen.html" title="Einstellungen" >Einstellungen</a></li>
<li><a href="gruppen.html" title="Gruppen" >Gruppen</a></li>
<li><a href="user.html" title="User" >User</a></li>
</ul>
</div> </div>
</div>
<div class="rightCol">
<div id="content">
</div>
</div>
</div>
<div id="footer">Deep-Coding [Kundenverwaltung] </div>
</div>
</body>
</html>Style.css
Code:
td {
font-size: 11px;
line-height: 19px;
font-family: "Verdana";
}
ul {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
form {
margin: 0px;
padding: 0px;
}
img {
border: none;
}
.clean {
clear: both;
height: 0px;
font-size: 0px;
display: block;
width: 100%;
}
#menu {
width: 190px;
margin: 0px 20px 0px 0px;
float: left;
}
#menu ul {
margin: 0px 0px 20px 0px;
}
#menu ul li.main {
width: 180px;
height: 28px;
padding: 0px 0px 0px 10px;
line-height: 27px;
margin: 20px 0px 0px 0px;
color: #fff;
font-weight: bold;
background: #262626 url(../images/menu_main.gif) no-repeat;
border-bottom: 1px solid #d7e5ee;
overflow: hidden;
}
#menu ul li {
width: 190px;
height: 27px;
margin: 0px;
overflow: hidden;
}
#menu ul li a {
width: 183px;
height: 26px;
padding: 0px 0px 0px 10px;
line-height: 25px;
display: block;
margin: 0px;
overflow: hidden;
color: #353d3f;
text-decoration: none;
background: #fff;
border-bottom: 1px solid #d7e5ee;
}
#menu ul li a:hover, #menu ul li a.aktiv {
width: 183px;
height: 26px;
padding: 0px 0px 0px 10px;
line-height: 25px;
display: block;
margin: 0px;
overflow: hidden;
color: #353d3f;
text-decoration: none;
background: #cabb98 url(../images/menu_hover.gif) no-repeat;
border-bottom: 1px solid #d7e5ee;
}
#content {
width: 537px;
margin: 20px 0px 0px 0px;
float: left;
}
#content fieldset {
background: #fff;
color: #353d3f;
border: 1px solid #c2cfd7;
padding: 20px 20px 10px 20px;
margin-bottom: 20px;
}
#content fieldset legend {
background: #262626;
color: #fff;
font-weight: bold;
border: 1px solid #fff;
padding: 0px 20px;
}
#content fieldset h1 {
font-size: 16px;
font-weight: bold;
margin: 10px 0px 10px 0px;
color: #002b44;
font-family: "Arial";
}
#content fieldset p {
margin: 0px 0px 10px 0px;
}
#content fieldset h2 {
font-size: 11px;
font-weight: bold;
margin: 10px 0px 10px 0px;
color: #353d3f;
font-family: "Verdana";
}
#content div.fieldset hr {
margin: 10px 0px 10px 0px;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #c2cfd7;
width: 500px;
margin:0 auto;
}
#content a {
color: #353d3f;
text-decoration: none;
}
#content a:hover {
color: #353d3f;
text-decoration: none;
}
#content .button {
width: 205px;
height: 24px;
display: block;
border: 1px solid #a5acb2;
background: #cec2a4 url(../images/button.gif) left no-repeat;
font-size: 11px;
color: #343c40;
font-family: "Verdana";
text-transform: lowercase;
cursor: pointer;
}
#content .formular {
width: 488px;
height: 18px;
padding: 4px 0px 0px 5px;
margin: 2px 0px 8px 0px;
background: #fff;
border: 1px solid #a5acb2;
font-size: 11px;
color: #343c40;
font-family: "Verdana";
}
#content .formular:disabled
{
background: #CCCCCC;
}
#content input.files {
width: 488px;
height: 18px;
padding: 4px 0px 0px 5px;
margin: 2px 0px 8px 0px;
background: #fff;
border: 1px solid #a5acb2;
font-size: 11px;
color: #343c40;
font-family: "Verdana";
}
#content .textarea {
width: 488px;
height: 80px;
padding: 4px 0px 0px 5px;
margin: 2px 0px 8px 0px;
background: #fff;
border: 1px solid #a5acb2;
font-size: 11px;
color: #343c40;
font-family: "Verdana";
}
#content .auswahl {
width: 495px;
height: 24px;
padding: 4px 0px 0px 5px;
margin: 2px 0px 8px 0px;
background: #fff;
border: 1px solid #a5acb2;
font-size: 11px;
color: #343c40;
font-family: "Verdana";
}
#content .auswahl option {
width: 495px;
height: 24px;
padding: 4px 0px 0px 5px;
background: #fff;
font-size: 11px;
color: #343c40;
font-family: "Verdana";
}
#content input:focus, #content textarea:focus, #content select:focus {
background: #f7f7f7;
border: 1px solid #f9be49;
}
#content fieldset a img.hover {
border: 1px solid #fff;
}
#content fieldset a img.hover:hover {
border: 1px solid #c2cfd7;
}
.message {
color: #009933;
}
.error {
color: #FF0000;
}
/* FIELDSET */
div.fieldset {
position:relative;
margin:2em 0;
width:537px;
padding:0.8em 0 0 0;
border:1px solid #c2cfd7;
color:#000;
background:#fff;
}
div.fieldset h1 {
position:absolute;
top:-0.5em;
left:1em;
margin:0;
padding:0;
font-size:1.2em;
font-weight:normal;
}
div.fieldset h1 span {
margin:0;
padding:;0 3em;
padding: 1px 25px 1px 25px;
color:#fff;
background:#262626;
font-weight:bold;
}
div.fieldset p {
margin:0;
padding:1em 1em 1em 1.5em;
color:#000;
font-size:1.2em;
background:#fff;
}
/* FIELDSET ENDE */
.error
{
font-weight: bold;
background: #FF0000;
color: red;
}
.formular_schnellsuche {
width: 188px;
height: 18px;
padding: 4px 0px 0px 5px;
margin: 2px 0px 8px 0px;
background: #fff;
border: 1px solid #a5acb2;
font-size: 11px;
color: #343c40;
font-family: "Verdana";
}
.auswahl_schnellsuche {
width: 110px;
height: 24px;
padding: 4px 0px 0px 5px;
margin: 2px 0px 8px 0px;
background: #fff;
border: 1px solid #a5acb2;
font-size: 11px;
color: #343c40;
font-family: "Verdana";
}
.auswahl_schnellsuche option {
width: 110px;
height: 24px;
padding: 4px 0px 0px 5px;
background: #fff;
font-size: 11px;
color: #343c40;
font-family: "Verdana";
}
.button_schnellsuche {
width: 105px;
height: 24px;
display: ;block;
border: 1px solid #a5acb2;
background: #cec2a4 url(../images/button.gif) left no-repeat;
font-size: 11px;
color: #343c40;
font-family: "Verdana";
text-transform: lowercase;
cursor: pointer;
margin-bottom: 6px;
}Layout.css
Code:
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
font-size: 11px;
line-height: 19px;
color: #353d3f;
font-family: "Verdana";
background: #f0ebe1;
}
#header {
width: 100%;
height:142px;
background:#cabb98;
text-align: center;
}
#topnavi {
width:100%;
height:35px;
padding-top:5px;
background: #262626 url(../images/topnavi_bg.jpg);
margin-bottom: 5px;
text-align: center;
}
#container {
position:relative;
width: 100%;
min-height: 100%; /* Mindesthöhe in modernen Browsern */
height: auto !important; /* !important-Regel für moderne Browser */
height: 100%; /* Mindesthöhe in IE */
}
#innerwrap {
width:800px;
margin:0 auto;
}
.rightCol {
width: 585px;
float: right;
padding-bottom:35px;
}
.leftCol {
float: left;
width:190px;
padding-bottom:35px;
margin-right: 25px;
}
#content {
width: 515px;
}
#left {
width: 190px;
}
/* clearfix zum Aufheben der Floatumgebung */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
#footer {
position:absolute;
left:0;
bottom:0;
width:100%;
height:40px;
background: #262626 url(../images/topnavi_bg.jpg);
border-top: 3px solid #e3e3e3;
color: #FFF;
text-align: center;
font-weight: bold;
}
