Hallo,
ich habe ein Problem mit der Darstellung meiner Seite im Internet Explorer.
Angepasst habe ich sie auf die Version IE7
Nach dem Update auf IE8 musste ich feststellen das ein Teil des Content anders ausgegeben wird.
Firefox und Chrome haben eine eigene css und funktionieren ohne Probleme genau so wie es sein sollte.
Hier ist meine IE.CSS
CSS
#content-top {
}
#content {
position: relative;
margin-top: 20px;
}
#content .container {
background:#FFFFFF !important;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
padding-top:0px;
margin-left:216px;
}
#logo {
position:relative;
width:100%;
margin-left:-550px;
top:85px;
text-align:center;
}
#logo2 {
position:absolute;
width:500px;
height:50px;
top:650px;
text-align:center;
margin-left: 660px;
z-index:2;
}
/*------------------------------ MENU ------------------------------*/
#secondarymenu-container {
padding-top:6px;
height:110px;
position:relative;
z-index:11;
}
#menu-box {
margin-left: 95px;
magin-top:30px;
}
#secondarymenu {
float:left;
background:url(../images/topmenu-left.png) left top no-repeat;
padding-left:19px;
}
.menu-topmenu-container {
background:url(../images/topmenu-right.png) right top no-repeat;
height:40px;
padding:0px 3px;
}
#secondarymenu ul.menus {
margin-left:-19px;
padding:1px 0px;
}
#secondarymenu a {
padding:9px 15px;
border-left:1px solid #7a7a7a;
border-right:1px solid #555;
display:block;
color:#fff;
font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
margin:0px -1px;
}
#secondarymenu li:first-child a {
border-left:none;
}
#secondarymenu li:last-child a {
border-right:none;
}
#secondarymenu a:hover{
background:url(../images/top-li-active.png) left top repeat-x;
text-decoration:none;
}
#header-block {
position:relative;
}
#mainmenu-container {
height:78px;
position:relative;
z-index:18;
padding:54px 140px 48px;
background:url(../images/menu.png) 50% no-repeat;
margin-top:-80px;
}
#mainmenu li a {
display:block;
text-decoration:none;
padding:30px 20px;
color:#393939;
font-size:15px;
font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
}
#mainmenu li {
position:relative;margin-left: -10px;
}
#mainmenu li a:hover{
background:url(../images/li-active.png) right top no-repeat;
}
#header #mainmenu li ul {
top:88px;
}
#header li ul {
top:44px;
}
#header li ul .transparent {
border:3px solid #e0e0e0;
background:#fff;
-moz-opacity: 0.70;
opacity: 0.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
}
#header li ul .inner {
margin:3px;
padding:0;
width:100%;
}
#header ul.children li, #header .sub-menu li {
padding:0 !important;
margin:0 !important;
height:25px;
line-height:25px;
}
#header ul.children li a, .sub-menu li a {
color:#393939 !important;
padding:0 !important;
height:25px;
line-height:25px;
}
#header ul.children li a:hover, .sub-menu li a:hover {
color:#393939 !important;
border:none !important;
box-shadow:none !important;
background:#ececec !important;
}
#header #mainmenu li ul .inner {
}
#header #mainmenu ul.children li a, #mainmenu .sub-menu li a {
color:#393939 !important;
text-shadow:1px 1px 1px #fff;
}
#header #mainmenu ul.children li a:hover, #mainmenu .sub-menu li a:hover {
color:#393939 !important;
border:none !important;
box-shadow:none !important;
}
#header .sub-menu .sub-menu {
top:0 !important;
}
/*------------------------------ SLIDER ------------------------------*/
.slider-container {
margin-top:40px;
}
.slider {
background:#fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
padding:5px;
width:990px;
height:350px;
}
.fp-next, .fp-prev {
margin:0;
width:44px;
height:390px;
}
.fp-title{
font-size:13px;
}
.fp-prev-next-wrap {
margin:0 -5px;
}
.slider-nothumb .fp-slides, .slider-nothumb .fp-thumbnail, .slider-nothumb .fp-slides-items {
height:188px;
}
.fp-slides,.fp-thumbnail,.fp-slides-items {
height:355px;
width:990px;
}
.fp-content-fon {
border-bottom:none;
border-left:none;
border-right:none;
background:#e4e4e4;
}
.fp-content-fon, .fp-content {
left:0;
right:0;
bottom:0;
text-align:left;
font-size:13px;
}
.fp-content p, .fp-content a {
color:#555;
}
.fp-nav {
bottom:30px;
left:auto;
}
.slider-nothumb .fp-content-fon {
background:#fff;
}
.slider-nothumb .fp-content a,.slider-nothumb .fp-content p{
color:#000;
}
#footer .footer_txt .container {
}Die unterschiedliche Darstellung ist zwischen Slider und Content
ich habe dort ca 20px unterschied ! wie kann das sein? ich habe das gefühl das beim IE8 irgendwas im wege steht und deshalb verrutscht er den Content nach unten bei der position relative.
ich habe es auch mit position absolute versucht. mit absolute ging es aber den footer konnte ich nicht relative zum absoluten content stellen deshalb bleibt es bei relative.
hier noch die bilder dazu
so ist es mit ie7
so ist es mit IE8
Vielen Dank für jede Hilfe.
Grüße
