• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

FF stellt anders dar als Chrome, Browserweiche?

H

hansi3000

Neues Mitglied
//EDIT: Sorry, hab mich im Forum versehen, sollte eigentlich ins CSS.

Hey Forum-Leser :)

Programmiere gerade eine Art Schulplaner für Meine Klasse, jedoch habe ich ein Problem, denn FF und Chrome stellen die Seite unterschiedlich dar!

Und zwar habe ich das Problem, das sobald ich ein margin einfüge, der FF mir die Seite nciiht mehr darstellt, nicht so der Chrome:

FF:

Schulplaner 2012-05-13 11-48-09FFf.jpg

Chrome:

SchulplanerChromef.jpg

Mein aktueller CSS-Code:

Code: 
* {
    margin:0px;
    padding:0px;
}
body {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
    background: linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}
.login {
    text-align:center;
}
#container-outer {
    float:left;
    overflow: hidden;
    background: #eee;
}
#container-inner {
    float:left;
    background: #f1f1f1; /* Old browsers */
    background: -moz-linear-gradient(left,  #f1f1f1 0%, #d1d1d1 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f1f1f1), color-stop(99%,#d1d1d1)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #f1f1f1 0%,#d1d1d1 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #f1f1f1 0%,#d1d1d1 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #f1f1f1 0%,#d1d1d1 99%); /* IE10+ */
    background: linear-gradient(left,  #f1f1f1 0%,#d1d1d1 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#d1d1d1',GradientType=1 ); /* IE6-9 */
    position: relative;
    right:80%;
}
#sidebar {
    float: left;
    width: 20%;
    position: relative;
    left: 80%;
    color: #B9B9B9;
    border-right:1px solid #858585;
}
#content {
    float: left;
    width: 80%;
    position: relative;
    left: 80%;
}
#placeholder {
    margin-top:10px;
    height:10px;
}
#timetable {
    text-align:center;
}
#sidebarheader {
    text-align:center;
    font-size:25px;
    text-shadow: 1px 1px 0px #cccccc;
    filter: dropshadow(color=#cccccc, offx=1, offy=1);
}
#sidebar-inner {
    margin-top:10px;
    height:100%;
}
#title {
    text-align:center;
    margin-top:10px;
    font-size:25px;
}
#search {
    text-align:center;
    margin-top:10px;
    
}
#content-inner {
    margin-top:50px;
    margin-left:50px;
}
#menuItems {
    margin-top:10px;
}
.menuItem {
    color:black;
    text-align:center;
}

entferne ich nun das height:100%; von #container-inner, so ist der Planer zwar sichtbar, aber der Rest vollkommen zerstört.

FF:

Schulplaner 2012-05-13 11-55-29FFn.jpg

Chrome:

Schulplanerchromen.jpg

Ich denke, das das Problem am FF ist, das er den Content unter die Sidebar mogelt, aber warum macht das nicht auch Chrome? Und wie kann ich das Beheben? Brauch ich eine Browserweiche? Währe nett wenn mir einer helfen könnte!

hansi3000.
 
Zuletzt bearbeitet:
Interessant wäre auch noch der HTML-Code dazu.

Und verzichte möglichst auf die relative Positionierung. Die ist für dieses einfache Layout überhaupt nicht notwendig.

Moderation: Verschoben von HTML zu CSS.
 
Trüffelkrieger schrieb:
Interessant wäre noch der HTML Quellcode und optimalerweise ein Link.
Zum Vergrößern anklicken....



Html Code ist hier, habe ich vorhin vergessen, Link ist schlecht da localhost, lade erst hoch wenn alles fehlerfrei läuft: (Hab dann mal die ganzen PHP-Teile rausgenommen, ziehmlich leer so ;) )

HTML: 
<html>
    <head>
        <title>Schulplaner</title>
        <link rel="stylesheet" type="text/css" href="css/desktop.css"></link>
        <link href="theme/style.css" rel="stylesheet" type="text/css" media="all" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.3.1.js"></script>
        <script type="text/javascript" src="js/jquery.betterTooltip.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('.tTip').betterTooltip({speed: 150, delay: 300});
            });
        </script>
    </head>
    <body width="100%">
        <div id="container-outer">
            <div id="container-inner">
                <div id="sidebar">
                    <div id="sidebar-inner">
                        <p id="sidebarheader">Men&uuml;</p>
                        <div id="search">
                            <input type="text" name="search" id="searchfield" placeholder="Suchen ..."></input>
                        </div>
                        <div id="menuItems">
                            <a href="index.php"><p class="menuItem"><br />Home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p></a>
                        </div>
                    </div>
                </div>
                <div id="content">
            </div>
        </div>
    </div>
    </body>
</html>



CSS:

Code: 
* {
    margin:0px;
    padding:0px;
}
body {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
    background: linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}
.login {
    text-align:center;
}
#container-outer {
    float:left;
    overflow: hidden;
    background: #eee;
}
#container-inner {
    float:left;
    position: relative;
    right:80%;
}
#sidebar {
    float: left;
    width: 20%;
    position: relative;
    left: 80%;
    background-color:#D1D1D1;
    border-right:1px solid #858585;
}
#content {
    float: left;
    width: 80%;
    position: relative;
    left: 80%;
}
#placeholder {
    margin-top:10px;
    height:10px;
}
#timetable {
    text-align:center;
}
#sidebarheader {
    text-align:center;
    font-size:25px;
    color:#9D9D9D;
    text-shadow: 1px 1px 0px #cccccc;
    filter: dropshadow(color=#cccccc, offx=1, offy=1);
}
#sidebar-inner {
    margin-top:10px;
    height:100%;
}
#title {
    text-align:center;
    margin-top:10px;
    font-size:25px;
}
#search {
    text-align:center;
    margin-top:10px;
    
}
#content-inner {
    margin-top:50px;
    margin-left:50px;
}
#menuItems {
    margin-top:30px;
    float:right;
    margin-right:0px;
    font-size:20px;
}
.menuItem {
    color:black;
    text-align:right;
    width:20%;
    height:50px;
    margin-top:20px;
}
.menuItem:hover {
    background-color:#009FEC;
    opacity:0.4;
    border-top:5px solid #0080C0;
    border-bottom:1px solid #0080C0;
    #text-align:center;
}
.menuItemActive {
    background-color:#009FEC;
    opacity:0.4;
    border-top:5px solid #0080C0;
    border-bottom:1px solid #0080C0;
    #text-align:center;
}
a {
    color:black;
    text-decoration:none;
}
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben