Problem mit IE - Menu verschoben

mrruin

So ich hab jetzt einige Tage lang versucht dieses Problem selbst zu lösen, komm allerdings nicht drauf was der Fehler sein könnte.

Im Firefox ist das Menu unter dem header schön zentriert, im IE ist es linksbündig. Es sieht so aus als würde im Firefox irgendwas verhindern dass das menu ganz nach links rutscht.

Danke schon mal im Voraus für jede Hilfe.

meine Seite: EC Phantoms Graz

hier ist mein css part 1

Code

/*  
Theme Name: phantoms v2.0
Theme URI: http://www.phantoms.at
Description: phantoms v2.0
Version: 2.0
Author: mrruin
Author URI: http://www.phantoms.at
*/
body {
    font: 75%/150% "Helvetica", Tahoma, Arial;
    color: #2c2c2c;
    background: #000000 url(img/main-bg.gif) repeat center top;
    margin: 0px;
    padding: 30px 0px 10px 0px;
}
a {
     color: #2f750d;
    text-decoration: none;
 }
a:visited {
    color: #2f750d;
    text-decoration: none;
}
a:hover {
    color: #908912;
    text-decoration: none;
}
img {
    border: none;
}
p {
    padding: 0px 0px 15px;
    margin: 0px;
}
h1 {
    margin:0px;
    padding-left: 0px;
    height: 60px;
    font: bold 36px/100% "Helvetica", Tahoma, Arial;
    color: #ffffff;
}
h1 a, h1 a:visited{
    color: #ffffff;
    text-decoration: none;
}
h1 a:hover{
    color: #ffffff;
    text-decoration: none;
}
h2 {
    color: #3F5123;
    margin: 0px 0px 2px;
    letter-spacing: -1px;
    font: normal 190%/100% "Helvetica", Tahoma, Arial;
    padding-bottom: 3px;
}
h2 a, h2 a:visited {
    color: #3F5123;
    text-decoration: none;
}
h2 a:hover {
    color: #5c7638;
    text-decoration: none;
}
h3 {
    font: normal 140%/100% "Helvetica", Tahoma, Arial;
    color: #758d38;
    margin: 10px 0px 5px;
}
h4 {
    font: normal 130%/100% "Helvetica", Tahoma, Arial;
    color: #758d38;
    margin: 10px 0px 5px;
}
h5 {
    font: normal 110%/100% "Helvetica", Tahoma, Arial;
    color: #758d38;
    margin: 10px 0px 5px;
}
form {
    margin:0px;
    padding:0px;
}


#page {
    margin: 0px auto;
    width: 800px;
    border-bottom: 5px solid #ccdfe4;
        border-top: 5px solid #ccdfe4;
    border-left: 5px solid #ccdfe4;
    border-right: 5px solid #ccdfe4;
    background: #FFFFFF ;
}
/* header area */
#header {
    background: #000000 url(img/header-bg3.gif) no-repeat;
    height: 225px;
    /*border-bottom: 1px solid #59780a;*/
    position: relative;
}
#headerlogo {
    position: relative;
    padding: 20px 0px 0px 35px;
    height: 60px;
}
#headerlogo .description{
    position: absolute;
    left: 45px;
    bottom: 3px;
    color: #ffffff;
    font-size: 16px;
}


#headerimg {
        cursor:pointer;
}


#nav {
    list-style: none;
    margin: 0px;
    position: absolute;
    left: 0px;
    bottom: -22px; 
    text-align: center;
}


#nav li {
    float: left;
}
#nav .current_page_item a, #nav .current_page_item a:visited{
    color: #758d38;
    text-decoration: none;
}
#nav .page_item a{
    color: #3F5123;
    text-decoration: none;
    background-color: transparent;
        float: left;
    /* background-color: #3F5123; */
    padding: 5px 15px;
    font: bold 14px/100% Helvetica, Arial, sans-serif;
}
#nav .page_item a:hover {
    color: #758d38;
        text-decoration: none;
}
#navbottom {
       background: #ffffff url(img/bottom-nav.gif) repeat-x;
        height: 20px; 
        margin-bottom: 1.5em;
}

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

mrruin

css part 2

CSS

/* content  */
#content {
    padding: 10px 56px 25px 5px;
        text-align: justify;
    float: left;
    width: 520px;
    overflow: hidden;
}
.post {
    clear:both;
    padding-top: 15px;
        padding-left: 33px;
}
.post-date {
    width: 45px;
    height: 49px;
    float:left;
    background: url(img/date-big.gif) no-repeat;
}
.post-month {
    font-size: 11px; 
    text-transform: uppercase;
    color: #475404;
    text-align: center;
    display:block;
    line-height: 11px;
    padding-top: 2px;
    margin-left: -3px;
}
.post-day {
    font-size: 18px;
    text-transform: uppercase;
    color: #475404;
    text-align: center;
    display:block;
    line-height: 18px;
    padding-top: 7px;
    margin-left: -3px;
}
.entry {
    float:right;
    width: 488px;
        border-bottom: 2px dotted #cce1a2;
}
.post-cat {
    background: url(img/category.gif) no-repeat left center;
    padding-left: 20px;
    float: right;
    font-size: 95%;
    color: #999999;
}
.post-comments {
    background: url(img/comments.gif) no-repeat left center;
    padding-left: 20px;
    float: right;
    font-size: 95%;
}
.post-calendar {
    background: url(img/date.gif) no-repeat left center;
    padding-left: 20px;
    float: left;
    font-size: 95%;
    color: #999999;
}
.post-content {
    clear: both;
    padding-top: 10px;
}
.navigation {
    clear: both;
    padding: 10px 0px 10px 30px;
}
.navigation a, .navigation a:visited {
    color: #59770e;
}
.previous-entries a {
    float: left;
    padding-left: 18px;
    background: url(img/page-left.gif) no-repeat left center;
}
.next-entries a {
    float: right;
    padding-right: 18px;
    background: url(img/page-right.gif) no-repeat right center;
}


/* comments  */
#comments, #respond {
    border-bottom: 1px dotted #cccccc;
    padding: 10px 0 5px 0;
    clear: both;
}
.commentlist {
    margin: 10px 0px;
    padding-left: 20px;
    line-height: 130%;
}
.commentlist li{
    padding: 5px 10px;
}
.commentlist .alt {
    background: #ebecdd;
}
.commentlist cite, .commentlist cite a, .commentlist cite a:visited {
    font-weight: bold;
    font-style: normal;
    font-size: 120%;
    color: #4f5c08;
}
.commentlist small {
    margin-bottom: 5px;
    display: block;
    font-size: 87%;
}
#commentform {
    margin-top: 10px;
    font: 110% Helvetica, Arial, sans-serif;
}
#commentform p {
    padding: 6px 0px;
    margin: 0px;
}
#commentform label{
    color: #242121;
    font-size: 87%;
}
#commentform input{
    width: 200px;
    background:#eef0e3;
    border: 1px solid #908f2d;
    padding: 3px;
    margin-top: 3px;
}
#commentform textarea{
    width: 490px;
    height: 115px;
    background:#eef0e3;
    border: 1px solid #908f2d;
    padding: 2px;
    margin-top: 3px;
}
#commentform textarea:focus, #commentform input[type="text"]:focus {
    background: #ffffff;
}
#commentform #submit{
    background: #3f6429 url(img/button.gif) repeat-x;
    font: bold 12px Helvetica, Arial, sans-serif;
    color: #365c04;
    border:1px solid #908f2d;    
                float:right;
    width: 154px;
    height: 28px;
    cursor: pointer;
}


/*sidebar */
#sidebar {
        text-align: center;
    float: right;
    padding: 0px 20px 20px 15px;
    width: 180px;
    color: #5b5b5b;
    overflow: hidden;
    border-left: 2px dotted #cce1a2;
        margin-top: 22px;
}
/*sidebar title  */
#sidebar h2 #sidebar .sidebartitle{
    color: #708737;
    margin: 20px 0px 2px 0px;
    border-bottom: 1px solid #cce1a2;
}
/*sidebar text styles */
#sidebar a, #sidebar a:visited{
    color: #464f2f;
    text-decoration: none;
}
#sidebar a:hover{
    color: #516f04;
    text-decoration: none;
}
/*sidebar list level1 */
#sidebar ul {
    padding: 2px 15px 2px 0px;
        text-align: right;
    margin: 0;
        /* padding: 2px 0px 2px 0px; */
}
#sidebar ul li {
    list-style: none;
    margin: 0;
    /* padding: 0; */
    border: none;
}
/*sidebar list level2 */
#sidebar ul li ul {
        padding: 0;
    margin: 0;
}
#sidebar ul li ul li{
    padding: 2px 0px 2px 0px;
        text-align: right;
    /* border-bottom: 1px solid #d5e6b1; */
}
/*sidebar list level3 */
#sidebar ul li ul li ul li{
    padding: 1px 0 1px 10px;
    border: none;
}
/*blogroll */
ul.list-blogroll li{
    background: url(img/blogroll.gif) no-repeat !important;
    padding-left: 16px !important;
}
/*meta */
ul.list-meta li{
    background: url(img/meta.gif) no-repeat !important;
    padding-left: 16px !important;
}
/*category bar */
ul.list-cat li, li.bar_categories li{
    background: url(img/category.gif) no-repeat !important;
    padding-left: 20px !important;
}
/*recent bar  */
ul.list-rec li, li.bar_comments ul li {
    background: url(img/recent.gif) no-repeat !important;
    padding-left: 20px !important;
}
/*archives bar */
ul.list-archives li, li.bar_archives li{
    background: url(img/archive.gif) no-repeat !important;
    padding-left: 20px !important;
}
/*pages bar */
ul.list-page li, li.bar_pages li, li.bar_recent_entries li{
    background: url(img/page.gif) no-repeat !important;
    padding-left: 20px !important;
}
/*sub-pages bar */
ul.list-page li ul li, li.bar_pages li ul li{
    background: url(img/page-arrow.gif) no-repeat !important;
    padding-left: 10px !important;
}
/*calendar bar  */
li.bar_calendar td {
    padding: 1px 7px;
}
/*text bar */
.textbar {
    padding-top: 5px;
}


/*search form */
#searchform {
    margin: 15px 0 0;
}
#searchform br {
    display: none;
}
#searchform #s {
    border:1px solid #908f2d;
    width: 135px;
    height: 22px;
    padding: 4px 5px 0px 5px;
    border: 1px solid #908f2d;
    background: #ffffff;
    margin-right: 2px;
    color: #000000;
    font-weight: normal;
}
/* search form button - to specify button only use input[type="submit"] */
#searchform input {
    background: url(img/button.gif) repeat-x;
    border: 1px solid #908f2d;
    width: 67px;
    height: 28px;
                font: bold 12px Helvetica, Arial, sans-serif;
    color: #365c04;
    vertical-align: middle;
}


/* page close */
#close {
    clear: both;
    background: #ffffff;
    color: #ffffff;
    font-size: 95%;
    line-height: 130%;
    padding-bottom: 10px;
}


/* fbar */
#fbar {
    margin: 0px auto;
                width: 800px;
                background: #3E4A0C url(img/foot-bg.gif) no-repeat;
                height: 30px;
                border-bottom: 5px solid #ccdfe4;
                border-top: 5px solid #ccdfe4;
    border-left: 5px solid #ccdfe4;
    border-right: 5px solid #ccdfe4;
    font-size: 14;
    line-height: 100%;             
            
}
#fbar a, #credit a:visited {
                margin-top: 8px;
    color: #ffffff;
}
.rss {
    padding-left: 18px;
    padding-bottom: 2px;
    margin-left: 8px;


}




/* alignments */
.center {
    text-align: center;
}
img.center, img[align="center"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.alignleft {
    float: left;
}
img.alignleft, img[align="left"] {
    float:left;
    margin: 2px 10px 5px 0px;
}
.alignright {
    float: right;
}
img.alignright, img[align="right"] {
    float:right;
    margin: 2px 0px 5px 10px;
}
.clear {
    clear:both;
}
hr.clear {
    clear:both;
    visibility: hidden;
    margin: 0px;
    padding: 0px;
}

Alles anzeigen

leviathan

Ohne jetzt zutief einzusteigen in deinen Quelltext und das CSS...du könntest alternativ die Navigationsleiste für den IE einfach mit margin-left etwas nach links schieben und das als conditional comment im Quelltext einfügen, mehr dazu hier: CSS - Conditional comments .

Oder - einfach mal geraten - wenn #nav deine Navigationsleiste festlegt, statt margin: 0 einfach margin: auto eingeben. Das führt bei mir sonst eigentlich meist im FF (und nicht im IE) zu Irritationen, wenn da 0 statt auto steht, wenn die Seite zentriert ist.

Zum Verständnis, wie die Divs im IE dargestellt werden, ist die Internet Explorer Developer Toolbar recht praktisch. Die gibt's hier:
Download details: Internet Explorer Developer Toolbar

Das ist so ähnlich wie die Web Developer Toolbar im FF.

PS: Du hast als erste Schriftart Helvetica angegeben. Das sieht auf Windowsrechnern, auf denen Helvetica installiert ist, immer schrecklich aus (zumindest, wenn man die Schrift nicht stark vergrößert)...ich würde doch zu Arial an erster Stelle raten oder einfach die Standard-SansSerif des Besuchers.

Olafb

Versuch mal:

PHP

#nav {
	list-style: none;
	margin: 0px;
width:760px;     /* HIER */
	position: absolute;
	left: 0px;
	bottom: -22px; 
	text-align: center;
}

mrruin

Zitat von leviathan

Ohne jetzt zutief einzusteigen in deinen Quelltext und das CSS...du könntest alternativ die Navigationsleiste für den IE einfach mit margin-left etwas nach links schieben und das als conditional comment im Quelltext einfügen, mehr dazu hier: CSS - Conditional comments .
Oder - einfach mal geraten - wenn #nav deine Navigationsleiste festlegt, statt margin: 0 einfach margin: auto eingeben. Das führt bei mir sonst eigentlich meist im FF (und nicht im IE) zu Irritationen, wenn da 0 statt auto steht, wenn die Seite zentriert ist.
Zum Verständnis, wie die Divs im IE dargestellt werden, ist die Internet Explorer Developer Toolbar recht praktisch. Die gibt's hier:
Download details: Internet Explorer Developer Toolbar
Das ist so ähnlich wie die Web Developer Toolbar im FF.
PS: Du hast als erste Schriftart Helvetica angegeben. Das sieht auf Windowsrechnern, auf denen Helvetica installiert ist, immer schrecklich aus (zumindest, wenn man die Schrift nicht stark vergrößert)...ich würde doch zu Arial an erster Stelle raten oder einfach die Standard-SansSerif des Besuchers.

Danke vielmals, das mit den conditionals hat geholfen und funktioniert. Ich lese jetzt einfach noch ein css file ein falls es sich um den IE handelt wo die margin links richtig gesetzt wird.

leviathan

Wenn du dem IE nur ein paar Änderungen unterschieben willst, dann brauchst du nicht mal ein extra Stylesheet erstellen.

Code

<!--[if IE]>
<style type="text/css">


#nav {margin: 0 20px 0 0;}


</style>
<![endif]-->

oder so ähnlich unterhalb des normalen Stylesheet-Links im Head-Bereich reicht dann völlig aus...

mrruin

Zitat von leviathan
Wenn du dem IE nur ein paar Änderungen unterschieben willst, dann brauchst du nicht mal ein extra Stylesheet erstellen.
Code

oder so ähnlich unterhalb des normalen Stylesheet-Links im Head-Bereich reicht dann völlig aus...

im Prinzip enthält mein css file nicht mehr als diese Zeile.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Problem mit IE - Menu verschoben

Jetzt mitmachen!

Benutzer online in diesem Thema