Hallo zusammen,
habe ein kleines Problem.
Und zwar habe ich eine Seite erstellt bei der das Menü links immer fest an seiner Position bleibt (also auch beim Scrollen immer sichtbar bleibt).
Im Firefox klappt das ganze super.
Im IE (IE 9) funktionert es aber nicht. Und ich weiß nicht woran es liegt.
Das ganze ist eines meiner ersten CSS-Tests und deshalb sicherlich ausbaubar
Trotzdem möchte ich es auch im IE zum laufen bringen.
Ich hänge mal die beiden Screenshots (Firefox und IE) an.
Der grobe Aufbau der Seite ist wie folgt:
CSS-Stylesheet ist folgendes:
Wo liegt der Fehler, dass der IE das nicht blickt?
Wie man auf dem angehängten Bild sehen kann, schneidet er das linke Menü einfach ab und rückt den Text rechts zu weit ein.
Außerdem bleibt das Menü beim Scrollen nicht da stehen wo es ist...
Wie oben beschrieben funktioniert das alles im Firefox
Und noch ne kleine Zwischenfrage:
Welches Tool nimmt man am besten wenn man solche Sachen entwickelt zum Debuggen?
Für den Firefox hab ich "Firebug", aber was soll ich für den IE nehmen? Vielleicht könnte ich dann das Problem selbst lösen
habe ein kleines Problem.
Und zwar habe ich eine Seite erstellt bei der das Menü links immer fest an seiner Position bleibt (also auch beim Scrollen immer sichtbar bleibt).
Im Firefox klappt das ganze super.
Im IE (IE 9) funktionert es aber nicht. Und ich weiß nicht woran es liegt.
Das ganze ist eines meiner ersten CSS-Tests und deshalb sicherlich ausbaubar
Trotzdem möchte ich es auch im IE zum laufen bringen.
Ich hänge mal die beiden Screenshots (Firefox und IE) an.
Der grobe Aufbau der Seite ist wie folgt:
HTML:
<div id="wrapper">
<div id="left">
<div id="login"></div>
<div id="menu"></div>
<div id="footer"></div>
</div>
<div id="main">
<div id="content">
<div id="debug"></div>
</div>
</div>
</div>CSS-Stylesheet ist folgendes:
Code:
@charset "utf-8";
/**
* Homepage xyz
*
* @link ...
* @version 1.0
*/
/**
* Globale Einstellungen und Bugfixes
*
* @section Browser-Reset
*/
/* Zurücksetzen der Innen- und Außenabstände */
* {
margin: 0;
padding: 0;
}
/**
* Schriftgröe kontrollieren
*/
body, td, th { font: normal 75%/167% Georgia, Palatino, "Times New Roman", serif; }
td, th { f\ont-size: 100.01%; }
/* Farben und Hintergründe setzen */
html, body {
color: #3b2b20;
background-color: white;
}
body {
width: 100%;
}
div#wrapper {
width: 100%;
float: left;
}
div#left {
background: url(images/menu.png) top center no-repeat;
position: fixed;
height: 100%;
width: 250px;
float: left;
z-index:100;
}
div#main {
/*width: 100%;*/
z-index:0;
float: right;
padding-left: 250px;
}
div#content {
background: white;
width: 90%;
padding-top: 20px;
z-index:0;
}
p#content {
text-align:left;
clear:both;
}
/* Farben: #263147 und #1F273C */
#left ul{
left: 10px;
position: absolute;
margin: 0;
}
#left ul li {
list-style: none;
margin: 0 0 0 0;
}
#left ul a,
#left ul strong {
/* background: url(images/button1.png) bottom left repeat-x; */
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
color: white;
padding: .8em;
display: block;
font-size: 16;
}
#left ul a:hover,
#left ul a:focus,
#left ul a:active,
#left ul strong {
/* background: url(images/button2.png) bottom left repeat-x; */
text-decoration: underline;
}
#debug {
color: red;
}
#login table {
text-align: center;
}
#footer ul {
bottom: 20px;
}Wo liegt der Fehler, dass der IE das nicht blickt?
Wie man auf dem angehängten Bild sehen kann, schneidet er das linke Menü einfach ab und rückt den Text rechts zu weit ein.
Außerdem bleibt das Menü beim Scrollen nicht da stehen wo es ist...
Wie oben beschrieben funktioniert das alles im Firefox
Und noch ne kleine Zwischenfrage:
Welches Tool nimmt man am besten wenn man solche Sachen entwickelt zum Debuggen?
Für den Firefox hab ich "Firebug", aber was soll ich für den IE nehmen? Vielleicht könnte ich dann das Problem selbst lösen
