Verschobenes Layout

[Daman]

Hallo zusammen,

ich brauche eure Hilfe. Es geht um folgendes:

Ich habe eine ASP.NET MVC3 Intranet-Seite erstellt. Mein Problem ist, dass die Navigationsleite darin lokal super schön aussieht, aber wenn ich es im IIS einrichte und ich dann von meinem PC auf den Server darauf zugreife, dann ist diese Navigationsbar total verschoben. Komischer noch, über Firefox schaut es aus wie lokal, nur dass über Firefox die Buttons nicht gehen.

Folgender Code für die Navigationsleiste:

<div id="navbar">
   <ul>                                                           
      <li id="liHome" @if(ctrName == "Home" & actName == "Index"){<text>  class="selected" </text>} >@Html.ActionLink("Home",  "Index", "Home")</li>
      <li id="liSpracLabel" @if(ctrName == "SpracLabel" & actName == "Index"){<text>  class="selected" </text>}>@Html.ActionLink("SpracLabel",  "Index", "SprachLabel")</li>     
      ...            
   </ul>
</div>

Folgende CSS Einstellungen:

#navbar {
    border: 1px solid #FFFFFF;
    margin: 0px 0px 0px 0px;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #D8D8D8;
    height: 31px;
}

#navbar ul {
    list-style: none;
    margin: 0px 0px 10px 0px;
    padding-bottom: 10px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    height: 20px;
    background-color: #D8D8D8;
}

#navbar ul li#liHome a {
    text-decoration: none;
    float: left;
    margin: 0;
    padding: 0;
    margin-right: 5px;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-bottom: none;
    padding: 10px;
    width: 75px;
    text-align: center;
    display: block;
    background-color: #B40404;
    -moz-border-top-left: 10px;
    -moz-border-top-right: 10px;
}

#navbar ul li#liSpracLabel a {
    text-decoration: none;
    float: left;
    margin: 0;
    padding: 0;
    margin-right: 5px;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-bottom: none;
    padding: 10px;
    width: 75px;
    text-align: center;
    display: block; 
    background-color: #5882FA;
    -moz-border-top-left: 10px;
    -moz-border-top-right: 10px;
}

#navbar ul li#liHome a:hover {
    background: #FFFFFF;
    color: #5882FA;    
}

#navbar ul li#liSpracLabel a:hover {
    background: #FFFFFF;
    color: #5882FA;    
}

#navbar ul li#liHome.selected a {
    background: #FFFFFF;
    color: #5882FA;  
}

#navbar ul li#liSpracLabel.selected a {
    background: #FFFFFF;
    color: #5882FA;  
}

So sieht es lokal und im Firefox aus:
lokalUndFirefox.jpg


So sieht es leider im Internet Explorer aus:
ie.jpg


Ich weiß leider nicht weiter und bräuchte eure Hilfe. Hatte eine/r schon mal das selbe Problem? Oder kennt evtl. wer eine Lösung
VG

[Christian Marquardt]

Du musst dir den erzeugten HTML-Quelltext ansehen. Dazu im Firefox die AddOns Webdeveloper und Firebug installieren. Dann die CSS-Elemente identifizieren, die die fehlerhaften Styles haben und korrigieren

[Daman]

Danke Christian. Ich werde mal deine Tipps verfolgen und versuchen den Fehler zu finden.

[Daman]

Hi Christian,

leider sind die Quellcodes für Internet Explorer und für Firefox identisch. Nur die Anzeige leider nicht

Ich sehe da auch keine syntaktischen Fehler.

Gibt es evtl noch irgendwelche Tipps?

VG

[Christian Marquardt]

Solange du im Server den User-Agent nicht auswertetst, sollten die Quellcodes identisch sein.Du sollst mithilfe der Tools dir das CSS ansehen, bsp.

- mit Firebug das verschobene Element selektieren,
- den CSS-Code ansehen, der das Element darstellt und so verändern, dass es sowohl im IE als auchim Firefox funktioniert

Vieleicht mal die firefoxspezifischen CSS Styles ausblenden...

[Daman]

Danke für den Tipp. Ich versuche weiter

[tömmel]

Auweia - wo fängt man da an...

Das IE und Firefox etc. mit dem selben HTML und CSS oft etwas unterschiedliches darstellen, das ist (leider) ja keine Seltenheit (wird sogar schon lange immer besser - man möge mal den IE6 verwenden ) Hier gibt es ausserdem ja schon browserspezifische Anweisungen..
Aber auch das padding wird gerne unterschiedlich interpretiert (da erwartet man schon garnicht, das da das gleiche bei rumkommt...)

Also: CSS überarbeiten bis passt - das wird hier wohl kaum jemand für dich übernehmen..

[fanderlf]

Oder sich ein CSS Framework und sich darum viel weniger Gedanken machen müssen (z.B. Bootstrap )

[Daman]

Danke für die Antworten Leute. Ich habe einfach ein von CSS Framework generierten Balken verwendet.