Navi im IE anders als im FF oder Safari?

**glowi** · 18.09.2008 08:42

hallo,

bin gerade dabei unsere vereinsseite mit typo3 neu aufzusetzen und habe dabei ein problem mit der css-formatierung.

ich habe links ein navimenü in einer liste bei der einzelne seiten unterseiten haben. das menüe ist im endeffekt so aufgebaut:

Code:

<ul id="main">
   <li>Link1</li>
   <li>Link2</li>
       <ul id="sub">
           <li>unterlink1</li>
            <li>unterlink2</li>
       </ul>
   <li>Link3</li>
   <li>Link4</li>
   <li>Link5</li>
</ul>

per css hab ich das so formatiert:

Code:

    list-style: none;
    margin: 0px;
    padding: 0px;
}

#main a:link, #main a:visited {
    display: block;
    width: 125px;
    height: 28px;
    text-align: left;
    text-decoration: none;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    color: black;
    background-color: #F2f2f2;
    padding-left: 5px;
    line-height: 28px;
    border-top: 1px solid #dfdfdf;
    margin: 0px;
}

#main a:hover {
    display: block;
    width: 125px;
    height: 28px;
    text-align: left;
    text-decoration: none;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    color: black;
    background-color: #f9f9f9;
    line-height: 28px;
    border-top: 1px solid #dfdfdf;
    
}

#main .act {
    display: block;
    width: 125px;
    height: 28px;
    text-align: left;
    text-decoration: none;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    color: #ad2828;
    font-weight: bold;
    padding-left: 5px;
    line-height: 28px;
    background-color: #F2f2f2;
    border-top: 1px solid #dfdfdf;
}

#sub{
    list-style: none;
}

#sub a:link, #sub a:visited {
    display: block;
    width: 115px;
    height: 28px;
    text-align: left;
    text-decoration: none;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    color: black;
    background-color: #F2f2f2;
    padding-left: 14px;
    line-height: 28px;
    border-top: 1px solid #dfdfdf;
}

#sub a:hover {
    text-align: left;
    text-decoration: none;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    color: black;
    background-color: #f9f9f9;
    line-height: 28px;
    border-top: 1px solid #dfdfdf;
    padding-left: 14px;    
}

#sub .subact {
    display: block;
    height: 28px;
    text-align: left;
    text-decoration: none;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    color: #ad2828;
    font-weight: bold;
    Margin-left: 13px;
    line-height: 28px;
    background-color: #F2f2f2;
    border-top: 1px solid #dfdfdf;
}

im firefox und im safari wird das ganze auch so angezeigt wie ich es gerne hätte,
aber im IE7 zeigt es mir die navi so an (siehe bild)

hab die seite noch im bau aber ihr könnt euch das ganze gerne mal live ansehen zb unter http://narhalla-rot-weiss.de/typo/index.php?id=10
bin jetz echt net DER css-gott aber warum schaut das im FF gut aus und im IE gehts (wieder mal ) net??

wäre supi wenn ihr nen tipp hättet

so long
glowi

**theo** · 18.09.2008 09:59

nur so geraten, weil das css nicht vollstaendig zu sehen ist: wurden alle abstaende im browser zu beginn zurueckgesetzt?

**Boris** · 18.09.2008 10:26

Das HTML ist falsch aufgebaut. Eine zweite Ebene mit <ul> muss innerhalb von <li> beginnen.

**theo** · 18.09.2008 10:31

Zitat von Boris

Das HTML ist falsch aufgebaut. Eine zweite Ebene mit <ul> muss innerhalb von <li> beginnen.

kommt davon, wenn man sich in einem css-thread zu sehr auf css konzentriert.

und wenn ich in den code der seite geschaut haette, dann haette ich auch sehen koennen, dass hier wirklich mal alles zurueckgesetzt wurde. ist man in diesem board einfach nicht mehr gewoehnt.

**glowi** · 18.09.2008 10:36

Zitat von Boris

Das HTML ist falsch aufgebaut. Eine zweite Ebene mit <ul> muss innerhalb von <li> beginnen.

jaja, klar

hab ich wohl in der schnelle falsch reingetippt hier.
ich generiere das menü ja über Typoscript und nicht händisch.
richtig muss es also in etwa so heißen:

Code:

<ul id="main">
   <li>Link1</li>
   <li>Link2
       <ul id="sub">
           <li>unterlink1</li>
           <li>unterlink2</li>
       </ul>   
   </li>
   <li>Link3</li>
   <li>Link4</li>
   <li>Link5</li>
</ul>

an was könnte das liegen?

hier mal die gesamte CSS

Code:

* { 
    margin: 0; 
    padding: 0;
}

body {
    background-color: White;
    font: normal 0.8em/1.4em Georgia, Tahoma, Verdana;
    color: black;
    text-align: center;
    height: 100%;
}

#allheader {
    width: 100%;
    height: 176px;
    background-image:  url(../images/grafiken/allheader.gif);
    background-position: top;
    background-repeat: repeat;
}

#headlogo {    
    width: 273px;
    height: 176px;
    background-image: url(../images/grafiken/headlogo_neu.gif);
    margin-left: 0px;
    float: left;
}

#headbanner {
    width: 433px;
    height: 176px;
    background-image: url(../images/grafiken/headbanner.gif);
    float: right;
}

#topmenue{
    width: 410px;
    height: 28px;
    float: left;
    margin-top: 138px;    
    text-align: right;
    text-decoration: none;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    color: #838383;
    font-weight: bold;
    padding-right: 15px;
}

#topmenue a:link, #topmenue a:visited {
    text-decoration: none;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #ad2828;
    font-weight: bold;
    padding-left: 15px;
}

#topmenue a:hover {
    text-decoration: none;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: black;
    padding-left: 15px;
}

.topact{
    padding-left: 15px;
}

#nav-box {
    width: 130px;
    text-align: left;
    float: left;
    border-right: 1px solid #dfdfdf;    
    border-bottom: 1px solid #dfdfdf;
    padding: 0px;
    background-color: #F2f2f2;
    margin-top: 0px;
}

#main{
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#main a:link, #main a:visited {
    display: block;
    width: 125px;
    height: 28px;
    text-align: left;
    text-decoration: none;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    color: black;
    background-color: #F2f2f2;
    padding-left: 5px;
    line-height: 28px;
    border-top: 1px solid #dfdfdf;
    margin: 0px;
}

#main a:hover {
    display: block;
    width: 125px;
    height: 28px;
    text-align: left;
    text-decoration: none;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    color: black;
    background-color: #f9f9f9;
    line-height: 28px;
    border-top: 1px solid #dfdfdf;
    
}

#main .act {
    display: block;
    width: 125px;
    height: 28px;
    text-align: left;
    text-decoration: none;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    color: #ad2828;
    font-weight: bold;
    padding-left: 5px;
    line-height: 28px;
    background-color: #F2f2f2;
    border-top: 1px solid #dfdfdf;
}

#sub{
    list-style: none;
}

#sub a:link, #sub a:visited {
    display: block;
    width: 115px;
    height: 28px;
    text-align: left;
    text-decoration: none;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    color: black;
    background-color: #F2f2f2;
    padding-left: 14px;
    line-height: 28px;
    border-top: 1px solid #dfdfdf;
}

#sub a:hover {
    text-align: left;
    text-decoration: none;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    color: black;
    background-color: #f9f9f9;
    line-height: 28px;
    border-top: 1px solid #dfdfdf;
    padding-left: 14px;
    
}

#sub .subact {
    display: block;
    height: 28px;
    text-align: left;
    text-decoration: none;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    color: #ad2828;
    font-weight: bold;
    Margin-left: 13px;
    line-height: 28px;
    background-color: #F2f2f2;
    border-top: 1px solid #dfdfdf;
}

#newscal {
    float: right;
    width: 200px;
    border-left :1px dashed grey;
    margin-top:0px;
    padding: 5px;
}

/* Formattierung des Contentbereichs */
#content {
    height: auto;
    text-align: left;
    padding:0px 250px 10px 160px;
    margin-top: 0px;
}

#content ul{
    margin-top:4px;
    margin-left:50px;
    list-style: circle;
}

a:link, a:visited{
    text-decoration: none;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #ad2828;
}

a:hover{
    text-decoration: underline;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: black;
}

/* Formattierung der Überschriften */
h1 {
    font: /*small-caps*/ normal 1.6em "Trebuchet MS" Verdana, Arial;
    text-align: left;
    border-bottom:  2px solid #ad2828;
    color: #ad2828;
    margin-bottom:10px;
    margin-top:10px;
}

h2 {
    font: /*small-caps*/ normal 1.2em "Trebuchet MS" Verdana, Arial;
    font-weight: bold;
    text-align: left;
    color: #ad2828;
    margin-bottom:5px;
    margin-top:8px;
    border-bottom:  2px solid #ad2828;
}

h3{
    font: /*small-caps*/ normal bold 1.0em "Trebuchet MS" Verdana, Arial;
    border-bottom:  2px solid #ad2828;
    color: #ad2828;
    margin-bottom:4px;
    margin-top:3px;
    text-align: right;
    width: 100%;
}

p{
    font: normal 0.9em/1.4em Georgia, Tahoma, Verdana;
    color: black;    
    padding-bottom: 4pX;
}

p.csc-linkToTop{
    margin-top: 20px;
}

#bc{
    color: #838383;
    font: /*small-caps*/ normal 11px Tahoma, Verdana;
    padding-bottom: 4pX;
    text-decoration: none;
    
}

#footer{
    width: 100%;
    height: 25px;
    line-height: 25px;
    border: 1px dashed green;
}

span.breadcrumb a:link, span.breadcrumb a:visited{
    color: #838383;
    font: /*small-caps*/ normal 11px Tahoma, Verdana;
    padding-bottom: 4pX;
    text-decoration: none;
    }
    
span.breadcrumb a:hover{    
    color: #838383;
    font: /*small-caps*/ normal 11px Tahoma, Verdana;
    padding-bottom: 4pX;
    text-decoration: underline;
    }

#clearer {
    clear: both;
    border:1px dashed grey;
}

**glowi** · 20.09.2008 09:42

hat niemand ne ahnung warum das IE so komisch anzeigt?

**theo** · 20.09.2008 10:03

also von den schnipseln kann man nix sehen.

es gibt einiges, was ich an dem css an kritik haette. aber ob das auch die ursache fuer dein problem loesen wuerde ...

**glowi** · 24.09.2008 19:17

dann sag doch mal, bin ja froh wenn ich was lerne ...
evtl behebt es ja sogar das eigentliche problem.

was meinst du mit "schnippsel" ?
denke das ich alles was mit der navi zu tun hat oben dortstehen hab, oder fehlt was??

**theo** · 24.09.2008 19:35

du schreibst im body eine schriftgroesse in em fest. diese einheit bezieht sich relativ auf die schriftgroesse des mutterobjekts ... welches es hier nicht gibt.
es gibt eine reihe von margin:0; - eintraegen, die ueberfluessig sind, weil es zu beginn alles zurueckgesetzt wird.
ein paar angaben stehen in px drin, wobei das "x" grossgeschrieben ist (duerfte jetzt nicht wirklich probleme machen ... sieht aber komisch aus).
auch die auskommentierungen wuerde ich nicht mittendrin stehenlassen, sondern hinter das semikolon ruecken.

**Sascha79** · 25.09.2008 02:20

Hallo glowi,

der IE hat ein Problem mit em. Versuch doch mal html {font-size:100%;}.
Vielleicht hilf´s ja weiter.

**Boris** · 25.09.2008 03:02

der IE hat ein Problem mit em. Versuch doch mal html {font-size:100%;}

Eben - und um das Problem zu beheben, setzt man 100.01%

**hotdog** · 25.09.2008 17:28

ich glaub das problem mit der verschobenen navi liegt am display:block bzw dem box modell , gib mal "display:block firefox" in google ein da kommt eine Menge an Meldungen.
Ich hab nämlich gerade das gleiche Problem, und bin auf deine Meldung hier gestoßen...
melde mich wieder wenn ich was habe..
hotdog

zur Startseite vom TP

Thema: Navi im IE anders als im FF oder Safari?

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Navi im IE anders als im FF oder Safari?

Ähnliche Themen

mit pop up oder anders lösen?

Safari machts (wie immer bei Apple) ganz anders!

frames oder anders?

scrollen via PHP oder anders

Scrollen mit PHP oder anders

Aktive Benutzer

Aktive Benutzer