Versatz im IE und beim zoomen in FF/Opera

[inRage]

Hallo,

ich habe ein Problem. Ich schaffe es einfach nicht unsere HP im IE so aussehen zu lassen wie in FF und Opera. Zusätzlich verschiebt sich die Seite wenn man reinzoomt. Ich habe alles versucht, was mein Wissen hergab und bin jetzt sozusagen mit meinem Latein am Ende. Vielleicht kann mir ja hier jemand helfen. Würde mich riesig freuen!

edit // achja, das Menü ist im IE auch nicht da wo es hin soll.

Webseite: http://m-kult.de/inrage/

Code der CSS:

Code: Alles auswählen

/*   
   inRage Aion0.1beta  for  e107
   http://m-kult.de/inrage
   This theme was designed and built by inRage
*/
html {
   height: 100%;
   margin-bottom: 1px;
}

body {
   font-size: 70%; /* Resets 1em to 10px */
   font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
   color: #ffeeb9;
   text-align: center;
   background:#262327 url("images/inragebgout.jpg") top center no-repeat;
}

a {
   color: #373630;
   text-decoration: none;
}

a:hover {
   color: #e0c000;
   text-decoration: none;
}

h1 {
   font-size: 4em;
}

h2 {
   font-size: 1.6em;
   color: #373630;
}

h3 {
   font-size: 1.3em;
}

h1, h2, h3 {
   font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
   font-weight: bold;
}

td {
    background: none;
   font-family: tahoma, verdana, arial, helvetica, sans-serif;
   font-size: 10px;
   font-style: normal;
   color:#23221f;
   padding: 0px;
   text-align:left;
}

acronym, abbr, span.caps {
   cursor: help;
   }

acronym, abbr {
   border-bottom: 1px dashed #999;
   }

blockquote {
   margin: 15px 30px 0 10px;
   padding-left: 20px;
   border-left: 5px solid #ddd;
   }

blockquote cite {
   margin: 5px 0 0;
   display: block;
   }

hr {
   display: none;
   }

a img {
   border: none;
   }

.linkspage_button{
   border:0px;
}

.hidden{
   display:none;
}

/* BEGIN LAYOUT */

#page {
   position:relative;
   top: 50px;
   left: 146px;
   width: 956px;
   border: 0px;
   text-align: left;
   overflow-y:visible;
   background:url("images/inragebg2.jpg") center repeat-y; border: none;
}

#page2 {
   position:relative;
   top: 309px;
   left: 154px;
   width: 956px;
   border: 0px;
   text-align: left;
   overflow-y:visible;
   background:url("images/inragebg.jpg")  repeat-y; border: none;
}

#sponsor {
   width: 218px;
   height: 21px;
   position: absolute;
   top: 6px;
   left: 526px;
}



#header2 {
   position:absolute;
   left: 1px;
   top: 0px;
   height: 338px;
   width: 100%;
   background: url("images/header.jpg") no-repeat center;
}




/* UL NAVIGATION ADDED BY QUE~ */

#navigation{
   font-size: 12px;
   width: 504px;
   height: 34px;
   position: absolute;
   top: 264px;
   left: 411px;
   list-style: none;
   align: center;
}

#navigation li{
   display: inline;
}

/* END UL NAVIGATION */

#content {
   margin-top:22px;
   font-size: 1.2em
}


#sidebar {
   float:none;
   margin: 0px 0px 0px 55px;
   padding: 0px 0px 10px 0;
   width: 165px;
   text-align:left;
   font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}

.narrowcolumn {
   float: right;
   padding: 10px 68px 0px 0px;
   margin: 0px 0 0;
   width: 600px;
   margin-left: auto;
   margin-right: auto;

}

.widecolumn {
   float:right;
   padding: 10px 51px 10px 35px;
   margin: 0px 0 0 0px;
   width: 850px;
   margin-left: auto;
   margin-right: auto;
}

.narrowcolumn .entry, .widecolumn .entry {
   line-height: 1.4em;
}

.widecolumn {
   line-height: 1.6em;
}

#chatboxx {
   padding-top: 1px;
   margin-left: 235px;
   width: 510px;
}

#footer {
   position:relative;
   left:-16px;
   top:60px;
   padding: 0;
   margin: 0;
   width: 989px;
   height: 307px;
   clear: both;
   background:#262327 url("images/inragefooter2.jpg") top left no-repeat;
}

#footer2 {
   position:relative;
   left:-16px;
   top:60px;
   padding: 0;
   margin: 0 auto;
   width: 989px;
   height: 307px;
   clear: both;
   background:#262327 url("images/inragefooter1.jpg") top left no-repeat;
}

#footer p {
   margin: 0;
   padding: 0px;
   text-align: center;
}

/* END LAYOUT  */


/* BEGIN E107 CORE CLASSES MAINTAINER QUE~ */

.button{
   font-family: tahoma, verdana, arial, helvetica, sans-serif;
   font-size: 10px;
   text-align:center;
}

.tbox.chatbox {
   width: 400px;
   height: 20px;
   margin-left: 0px;
   margin-right: 0px;
}

.spacer {
   padding: 2px 0 2px 0;
}


.indent{
   padding:4px;
   border: 1px solid #06c;
}

.smalltext {
   font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}

.mediumtext {
   font: 12px 'Lucida Grande', Verdana, Arial, Sans-Serif;
}

.tbox{
   background-color: #F4F7FA;
   border: #5e5d63 1px solid;
   color: #000000;
   font: 10px verdana, tahoma, arial, helvetica, sans-serif;
}

.helpbox {
   border: 0px;
   background-color: transparent;
   color:#000;
   font: 9px tahoma, verdana, arial, helvetica, sans-serif;
}

.fborder {
   border: #000000 0px solid;
   background-color: #e2c501;
   
}

.forumheader{
   background-color: #73704f;
   font-family: verdana, tahoma, arial, helvetica, sans-serif;
   font-size: 11px;
   color:#000;
   padding: 4px;
   border: 0px solid #ededed;
}

.forumheader2{
   background-color: #e0d6bf;
   font-family: verdana, tahoma, arial, helvetica, sans-serif;
   font-size: 10px;
   color:#000;
   padding: 4px;
   border: #ededed 0px solid;
}

.forumheader3{
   background-color: #e0d6bf;
   font: 10px verdana, tahoma, arial, helvetica, sans-serif;
   color:#000;
   padding: 4px;
   border: #ededed 0px solid;

}

.forumborder{
   border:  #000080 0px solid;
   background-color: transparent;
}

.fcaption {
   height:35px;
   border: #ededed 0px solid;
   padding: 2px 0 2px 8px;
   background-color: #68ADE5;
   font: 12px verdana, tahoma, arial, helvetica, sans-serif;
   color:#302f23;
   font-weight:bold;
   background-image: url("images/tileage.jpg");

}
.fcaption a{
   padding-right:4px;
   color:#302f23;

}


/* START NAVIGATION */

/* THIS PART IS FOR THE NAVIGATION LINKS */
.nav1 a:link, .nav1 a:visited, .nav2 a:link, .nav2 a:visited, .nav3 a:link, .nav3 a:visited, .nav4 a:link, .nav4 a:visited, .nav5 a:link,

.nav5 a:visited, .nav6 a:link, .nav6 a:visited, .nav7 a:link, .nav7 a:visited, .nav8 a:link, .nav8 a:visited{
   color: #ffffff;
   width: 70px;
   height: 25px;
   line-height: 25px;
   background: url(images/01_linkbg2.gif) no-repeat;
   text-align:center;
}

.nav1_onpage a:link, .nav1_onpage a:visited, .nav2_onpage a:link, .nav2_onpage a:visited, .nav3_onpage a:link, .nav3_onpage a:visited,

.nav4_onpage a:link, .nav4_onpage a:visited, .nav5_onpage a:link, .nav5_onpage a:visited, .nav6_onpage a:link, .nav6_onpage a:visited,

.nav7_onpage a:link, .nav7_onpage a:visited, .nav8_onpage a:link, .nav8_onpage a:visited{
   color: #ffffff;
   width: 70px;
   height: 25px;
   line-height: 25px;
   background: url(images/01_linkbg2.gif) no-repeat;
   text-align:center;
}

.nav1 a:link, .nav1 a:visited, .nav1_onpage a:link, .nav1_onpage a:visited{
   position: absolute;
   top: 2px;
   left: 14px;
}

.nav2 a:link, .nav2 a:visited, .nav2_onpage a:link, .nav2_onpage a:visited{
   position: absolute;
   top: 2px;
   left: 84px;
}
.nav3 a:link, .nav3 a:visited, .nav3_onpage a:link, .nav3_onpage a:visited{
   position: absolute;
   top: 2px;
   left: 154px;
}

.nav4 a:link, .nav4 a:visited, .nav4_onpage a:link, .nav4_onpage a:visited{
   position: absolute;
   top: 2px;
   left: 224px;
}

.nav5 a:link, .nav5 a:visited, .nav5_onpage a:link, .nav5_onpage a:visited{
   position: absolute;
   top: 2px;
   left: 294px;
}

.nav6 a:link, .nav6 a:visited, .nav6_onpage a:link, .nav6_onpage a:visited{
   position: absolute;
   top: 2px;
   left: 364px;
}

.nav7 a:link, .nav7 a:visited, .nav7_onpage a:link, .nav7_onpage a:visited{
   position: absolute;
   top: 2px;
   left: 434px;
}

.nav8 a:link, .nav8 a:visited, .nav8_onpage a:link, .nav8_onpage a:visited{
   position: absolute;
   top: 2px;
   left: 504px;
}

/* HOVER EFFECTS */

.nav1 a:hover, .nav1 a:active,
.nav2 a:hover, .nav2 a:active,
.nav3 a:hover, .nav3 a:active,
.nav4 a:hover, .nav4 a:active,
.nav5 a:hover, .nav5 a:active,
.nav6 a:hover, .nav6 a:active,
.nav7 a:hover, .nav7 a:active,
.nav8 a:hover, .nav8 a:active{
   background: url(images/01_linkbg1.gif) bottom no-repeat;
   margin: 0px 0 0 0;
}

/* USE A DIFFERENT COLOR WHEN USER IS ON THAT PAGE */

.nav1_onpage a:link, .nav1_onpage a:visited,
.nav2_onpage a:link, .nav2_onpage a:visited,
.nav3_onpage a:link, .nav3_onpage a:visited,
.nav4_onpage a:link, .nav4_onpage a:visited,
.nav5_onpage a:link, .nav5_onpage a:visited,
.nav6_onpage a:link, .nav6_onpage a:visited,
.nav7_onpage a:link, .nav7_onpage a:visited,
.nav8_onpage a:link, .nav8_onpage a:visited{
   background: url(images/01_linkbg1.gif) bottom no-repeat;
}

/* END NAVIGATION */

/* NICETITLE ADDED BY QUE~*/

.nicetitle {
   font-weight: bold;
   color: #3C3C3C;
   text-align: left;
   position: absolute;
   left: 0;
   top: 0;
   width: 35em;
   z-index: 20;
   max-width: 60%;
}
.nicetitle-content{
   overflow: hidden;
   background: white;
   border: 1px solid #333;
   padding: 7px;
   opacity: 0.9;
}
.nicetitle p{
   margin: 0;
   line-height: 120%;
}
.nicetitle p.destination {
   font-weight: normal;
   font-size: 10px;
   color: #5E7743;
}
div.nicetitle p span.accesskey {
   color: #FF7200;
}




Schonmal Danke im Vorraus!
inRage

[Laus]

Hallo

ich habe ein Problem. Ich schaffe es einfach nicht unsere HP im IE so aussehen zu lassen wie in FF und Opera. Zusätzlich verschiebt sich die Seite wenn man reinzoomt.

Das liegt alles daran weil Du teile deiner Seite im Body definierst und andere Teile wiederum dazu absolut positionierst. Die Verschiebung ist im FF genauso, schalte mal deinen Browser von Maximiert in den Fenstermodus.
Versuche folgendes: Nimm das HG Bild aus dem body, dieser bekommt nur die Grundfarbe der Seite. Lege ein Div um die ganze Seite in dem du das HG Bild stellst. Positioniere dann die anderen Inhalte wie Header, Navi und content relativ zu dem äußeren div dann müsste es klappen. Ich würde dir raten die Breite deiner Seite nicht größer als 1130 px zu machen, kleinere Auflösungen bekommen dann eine Scrollbar und Auflösungen ab 1200px sehen die Seite so wie Du es willst.
1130px deshalb weil zur eigentlichen Seite ja die Ränder des Browsers und eine eventuelle vertikale Scrollbar dazu kommen.

Gruß Xaver

[inRage]

Danke für die Antwort, ich werde es mal versuchen!

Grüße
inRage