Huhu,
ich bin froh, meine Seite nun recht erfolgreich umgesetzt bekommen zu haben. Leider verweigert sich der IE 8 (ältere Versionen nicht getestet), während der Firefox und Opera alles schön und richtig darstellen. Die Navigation möchte nicht bleiben, wo sie sollte. Na, wenn das kein Fall für die Wuthöhle ist!
Wie dem auch sei: Ich habe von conditional comments gehört, leider finde ich nichts passendes zu meinem Problem. Könnt ihr mir helfen? Hier die relevanten Codeschnipsel:
Achtung: Wer sich die Seite live ansehen will, klickt bitte hier:
Unbenannte Seite 
Screenshots für die kurze Fehlerwiedergabe:
http://www.imagebanana.com/img/t6h85i2m/3browser.png
Der Aufbau der Seite im Prinzip:
HTML-Code:
<div id="wrapper">
<div id="navi">
</div>
<!-- NAVIGATION -->
<div id="navi_overlay"> // Hier stehen die Menüpunkte mit 100% Deckkraft. Das geschieht extra, da ja die Navigation eine Transparenz besitzt.
<ul>
<li><a href="index.php?link=news" style="color:white;">startseite</a></span></li>
<li><a href="index.php?link=contact">über mich</a></li>
<li><a href="index.php?link=tutorials">tutorials</a></li>
<li><a href="index.php?link=flash">flash</a></li>
<li><a href="/acp">admin</a></li>
</ul>
</div>
<div id="all">
<div id="content">
<?php
// Inhalt
?>
</div>
<div id="wrapper_foot">
<div id="shoutbox">
<div id="shoutbox_entrys">
<?php
// Shoutbox Einträge
?>
</div>
<div id="shoutbox_form">
<?php
// Shoutbox Formular
?>
</div>
</div>
<div id="poll">
// Umfrage
</div>
</div>
</div>
</div>
CSS:
HTML-Code:
* {
padding: 0;
margin: 0;
}
html {
overflow-y: scroll;
}
body {
background: #335a6b;
font-family: Arial, Helvetica, sans-serif;
color: #53524e;
background: url(images/wood.gif) #a6c4ff center scroll;
background-repeat: repeat;
background-position: 0 0;
}
#wrapper {
width: 780px;
margin: auto;
position: relative;
}
#wrapper_foot {
position: absolute;
background: white;
width: 780px;
border-bottom: 15px solid #53524e;
}
#all {
background: white;
border-top: 15px solid #53524e;
border-bottom: 15px solid #53524e;
margin-top: 60px;
display: inline-block; /* durchgehend weißer Bereich */
}
#content {
width: 510px;
margin-top: 30px;
padding-left: 240px;
padding-right: 30px;
padding-bottom: 10px;
min-height: 400px;
border-bottom: 15px solid #53524e;
}
#content img {
margin: 10px 0;
/* border: 0px solid #53524e; */
}
#content img.news {
margin-top: 10px;
border: 1px solid #ddd;
border-right-color: #aaa;
border-bottom-color: #aaa;
}
#content a:link,
#content a:visited {
color: #006699;
text-decoration: none;
font-style: italic;
}
#content a:hover,
#content a:visited:hover {
color: #006699;
text-decoration: none;
font-style: italic;
font-weight: bold;
}
#content form {
width: 200px;
}
#content input {
width: 100%;
margin-bottom: 3px;
font-size: 11px;
background: white;
color: #53524e;
border: 1px solid #53524e;
padding: 2px;
}
#content textarea {
margin-bottom: 2px;
width: 100%;
height: 100%;
font-size: 11px;
background: white;
color: #53524e;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #53524e;
padding: 2px;
}
#content form {
margin-top: 10px;
}
#contenct img#captcha {
border: 1px solid #53524e;
}
#navi {
left: 26px;
width: 190px;
height: 100%;
background: url(images/navi.gif);
opacity: 0.5;
position: absolute;
padding-left: 0;
border: 1px solid #53524e;
}
#navi_overlay {
margin-left: 1px;
left: 26px;
width: 191px;
position: absolute;
padding-left: 0;
}
#navi_overlay li {
padding-left: 10px;
list-style-type: none;
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #bebdbc;
color: #53524e;
margin-right: 1px;
}
#navi_overlay a:link,
#navi_overlay a:hover,
#navi_overlay a:visited,
#navi_overlay a:visited:hover {
color: #53524e;
text-decoration: none;
}
#shoutbox {
float: left;
min-height: 156px;
/* height: 156px;
overflow: hidden; */
width: 450px;
padding: 5px;
margin: 10px;
color: white;
background: #53524e;
}
#shoutbox_entrys {
float: left;
width: 269px;
/* border-right: 1px solid #bebdbc; */
}
.entry {
width:264px;
font-size: 12px;
padding-bottom: 3px;
margin-bottom: 3px;
border-bottom: 1px dashed #bebdbc;
}
.entry span {
color: #3d9ec8;
}
#shoutbox_form {
float: right;
width: 169px;
padding-left: 5px;
padding-right: 6px;
}
#shoutbox_form input {
width: 100%;
margin-bottom: 3px;
font-size: 11px;
background: #53524e;
color: white;
border: 1px solid #bebdbc;
padding: 2px;
}
#shoutbox_form textarea {
margin-bottom: 2px;
width: 100%;
height: 100%;
font-size: 11px;
background: #335a6b;
color: white;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #bebdbc;
padding: 2px;
}
#shoutbox_form p {
font-size: 11px;
color: #bebdbc;
text-align: center;
}
#poll {
float: right;
min-height: 166px;
width: 264px;
padding: auto 5px;
margin: 10px;
color: #53524e;
font-size: 12px;
border: 3px solid #006699;
line-height: 200%;
text-align: center;
}
#poll p {
margin-bottom: 10px;
}
#poll input {
margin-bottom: 3px;
font-size: 11px;
background: #53524e;
color: white;
border: 1px solid #bebdbc;
padding: 2px;
}
#poll li {
list-style-type: none;
}
h1 {
background: #dbdada;
color: #006699;
font-size: 24px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
display: inline;
}
h2 {
color: #bebdbc;
font-size: 10px;
font-weight: normal;
}
#content p {
font-size: 12px;
}
#content div.meldung {
position: relative;
width: 100%;
text-align: center;
margin: auto;
margin-bottom: 10px;
background: white;
color: #006699;
border: 1px dashed #006699;
font-size: 12px;
font-weight: bold;
}
#content p.comments {
margin-bottom: 10px;
text-align: right;
}
1Danke
Zitat von Maik
Hi,
Zitieren
Login
