✔ IE Stylefehler?

[tommy_jussy]

Hallo,

ich hab folgendes Problem und zwar sieht es beim IE folgendermaßen aus (siehe Bild). Die Grafiken sind irgendwie versetzt als normal. Beim Firefox sieht alles normal aus.

Hat jemand ne idee wie ich es beheben kann?

Meine CSS:

#content {
height:100%;
margin:0 auto;
padding:10px 0 0;
width:900px
}

#counter {
color:#FFF;
font-family:verdana,helvetica,arial,sans-serif;
font-size:12px;
padding:10px 15px 50px 5px
}

#newsletter {
color:#FFF;
font-family:verdana,helvetica,arial,sans-serif;
font-size:12px;
padding:10px 0 10px 2px
}

#wrapper {
background-image:url(../images/background.jpg);
background-repeat:no-repeat;
display:block;
height:100%;
margin:0 auto;
overflow:visible;
padding:0;
visibility:visible;
width:100%
}

#version {
    background: url("../images/version.png") no-repeat scroll right top transparent;
    height: 122px;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-indent: -99999px;
    top: 0;
    width: 119px;
    z-index: 50;
}

* {
margin:0;
padding:0
}

* html .clearfix {
height:1%
}

.box {
font:normal 12px/12px arial, helvetica, sans-serif;
margin:5px 10px;
min-width:100px;
padding:20px 50px
}

.clearfix {
display:block
}

.clearfix:after {
clear:both;
content:".";
display:block;
font-size:0;
height:0;
visibility:hidden
}

.construction {
background-image:url(../images/construction.png);
background-color:#ffeac8;
background-position:10px center;
background-repeat:no-repeat;
border:1px solid #d38e4a
}

.glossymenu {
border-bottom-width:0;
margin:0;
padding:0;
width:152px
}

.glossymenu a.menuitem {
background-image:url(../images/button_bg.png);
background-repeat:repeat-y;
color:#fff;
display:block;
font-family:verdana,helvetica,arial,sans-serif;
font-size:12px;
font-weight:700;
height:100%;
padding:4px 0 4px 30px;
position:relative;
text-decoration:none;
width:auto
}

.glossymenu a.menuitem .statusicon {
border:none;
position:absolute;
right:4px;
top:5px
}

.glossymenu a.menuitem:hover {
background-image:url(../images/button.png)
}

.glossymenu a.menuitem:focus,.glossymenu a.menuitem:active,.glossymenu div.submenu a:focus,.glossymenu div.submenu a:active {
background-image:url(../images/button.png);
background-repeat:repeat-x;
color:#FFF
}

.glossymenu div.submenu {
background-image:url(../images/button_bg.png);
background-repeat:repeat-y
}

.glossymenu div.submenu ul {
list-style-type:none;
margin:0;
padding:0
}

.glossymenu div.submenu ul li a {
color:#fff;
display:block;
font-family:verdana,helvetica,arial,sans-serif;
font-size:10px;
padding:5px 0 5px 35px;
text-decoration:none
}

.glossymenu div.submenu ul li a:hover {
background-image:url(../images/button.png)
}

.hidden_element {
display:none
}

.information {
background-image:url(../images/info.png);
background-color:#d0e4f4;
background-position:10px center;
background-repeat:no-repeat;
border:1px solid #4d8fcb
}

.inhalt {
background-image:url(../images/estudios_del_sol_hp_23.png);
background-repeat:repeat-y;
font-family:verdana,helvetica,arial,sans-serif;
font-size:12px;
height:100%;
padding:10px 15px 50px 5px;
width:701px
}

.red {
color:red
}

.werbung_unten {
background-image:url(../images/estudios_del_sol_hp_33.png);
background-repeat:repeat-y;
font-family:verdana,helvetica,arial,sans-serif;
font-size:10px;
height:100%;
padding:0 0 0 40px;
text-align:center;
width:701px
}

a:active {
color:#34940c;
font-weight:700;
text-decoration:none
}

a:focus,a:hover {
color:#55c327;
font-weight:700;
text-decoration:none
}

a:link,a:visited {
color:#34940c;
font-weight:700;
text-decoration:underline
}

html,body {
background-image:url(../images/background2.jpg);
background-repeat:repeat-y;
font-family:verdana,helvetica,arial,sans-serif;
font-size:10px;
height:100%;
margin:0;
width:100%
}

strong {
margin-right:10px
}

Bin Leihe

Mfg
Tommy

 

[CPoly]

Ohne das entsprechende HTML hilft dein CSS leider überhaupt nicht.

Aber mir Fallen zwei Sachen ein, die das bewirken könnten:

1. Sind es tatsächlich Bilder (img Elemente)? Dann könnte es daran liegen, dass diese sich als inline Elemente am Textfluss orientieren. Verpass den Bildern mal display:block

2. Wenn es keine Bilder sind, fällt mir dazu ein IE Bug ein (ich weiß nicht bis zu welcher Version). Wenn du ein Element ohne Inhalt hast und du gibst ihm eine Höhe die kleiner ist als 1em, dann wird das Element trotzdem 1em groß. Das kannst du verhindern, in dem du dem Element einen Inhalt gibst, es reicht schon ein leerer Kommentar "<!---->"

 

[tommy_jussy]

Vielen Dank hab folgendes gemacht .img {display:block} und es dann in der <img class="img" ... gemacht und funktioniert