was soll ich mit css top-Wert Unterschiede in chrome und firefox?
Css-top oder margin-top-Werte in Chrom ist so anders mit firefox und opera,was soll ich tun? Zum Beispiel in chrome, wenn ich (top:0px;) für (.slide_content) mein Menü ist an seinem richtigen Platz,aber im firefox habe ich zu setzen (top:-80px;).
Was soll ich tun?bitte um Hilfe;vielen Dank im Voraus.
und auch firebug keine Fehler. Leider konnte ich nicht posten, ein jsfiddle link, da die Website enthält viele Bilder und eigentlich wollte ich Bilder posten, so dass Sie verstehen, was ich meine besser,ich habe versucht, aber ich brauchte 10 Ruf, aber ich habe nur 8,aber das ist mein code:
css:
.tabbed_content {
background-image:url('images/ct.png');
width: 620px;
height:62px;
}
.tabs {
height: 62px;
position: relative;
/* top: 0px;
left: 0px;
width: 313px;*/
}
.tabs .moving_bg {
background-color:#7F822A;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
position: absolute;
width: 125px;
z-index: 190;
left: 0;
padding-bottom: 29px;
background-position: left bottom;
background-repeat: no-repeat;
top: 3px;
height: 15px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
}
.tabs .tab_item {
display: block;
float: left;
padding: 15px;
width: 125px;
color: #ffffff;
text-align: center;
z-index: 200;
position: relative;
cursor: pointer;top:-130px;
}
.tabbed_content .slide_content {
overflow: hidden;
background-image: url('images/bkg.png');
padding: 20px 0 20px 20px;
position: relative;
top:0px; /*THE PROBLEM IS HERE*/
}
.tabbed_content
{
width:310px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 15px;
border-top-right-radius: 20px;
margin-left:15px;
}
.slide_content {width:940px;height:380px;}
.tabslider {
width: 5000px;
}
.tabslider div {
float: left;
width: 560px;
margin: 0px;
padding: 0px;
margin-right: 40px;width:900px;
}
a.ma:hover {text-decoration: underline;}
a.ma{text-decoration:none; color:White;margin-left:650px;}
#menu
{
position:relative;
z-index:1;
bottom: -50px;
left:-175px;
width: 1016px;
}
#menu ul {
z-index:9999;
width: 866px;
margin-left: 150px;
}
#menu ul li{height:400px;float:left;list-style:none;z-index:9999;
}
#menu li a{display:block;height:63px;z-index:9999;
font-size:20px;padding-top:90px;text-align:center;text-decoration:none;text-transform:uppercase;color:white;
margin-left: 0px;
}
#menu li a:hover, #menu #menu_active a{}
.nav1 {background:url('images/menu1.gif') center 35px no-repeat }
.nav2 {background:url('images/menu4.gif') center 35px no-repeat}
.nav3 {background:url('images/menu5.gif') center 35px no-repeat}
.nav4 {background:url('images/abus.gif') center 0px no-repeat}
.nav1:hover, .nav1#active {background:url('images/menu1_active.gif') center 31px no-repeat #001527}
.nav2:hover, .nav2#active {background:url('images/menu4_active.gif') center 31px no-repeat #001527}
.nav3:hover, .nav3#active {background:url('images/menu5_active.gif') center 31px no-repeat #001527}
.wrapper {overflow:hidden;float:right; height: 450px; margin-left: 63px;margin-right:0px; width: 941px;
position: relative;
z-index: 2;
top: 0px;
left: -32px;
}
HTML:
<div style="background:url('images/toolbar2.png') no-repeat center top; height: 265px; width: 1013px;position:relative;">
<div class="wrapper">
<br />
<asp:Label ID="Label3" runat="server" Font-Bold="True" Font-Names="Andalus"
Font-Size="XX-Large" ForeColor="White" Text="Welcome To Saray Ceram"></asp:Label>
<br />
<div style="height: 26px;margin-top:-70px; ">
<a class="ma" href="#">Site Map</a>
<asp:TextBox ID="TextBox1" runat="server"
style="Width:149px;margin-right:2px; margin-left: 650px;"></asp:TextBox>
<div style="width: 27px; height: 27px; background-image:url('images/s.png') ;position:relative; bottom:29px; left: 810px;" onclick="" ></div>
</div>
<div id="menu" >
<ul>
<li class="nav1" style="margin-left:50px;height: 154px"><a href="#" style="width:201px"> Home</a></li>
<li class="nav4" style="width:201px; height: 154px; margin-left: 0px;"><a href="#" style="width:200px"></a></li>
<li class="nav3" style="width:200px; height: 154px;margin-left: 0px;"><a href="#" style="width:200px">Contact Us</a></li>
<li class="nav2" style="width:201px; height: 154px;margin-left: 0px;"><a href="#" style="width:200px">Products</a></li>
</ul>
</div>
</div>
</div>
<div style=" background-image:url('images/bg_top2.jpg'); height: 600px; width: 990px; margin-left:0px;margin-right:0px">
<br />
<br />
<div class='tabbed_content'>
<div class='tabs'>
<div class='moving_bg'>
</div>
<span class='tab_item'>
Wall Tale
</span>
<span class='tab_item'>
Floor Tale
</span>
</div>
<div class='slide_content'>
<div class='tabslider'>
<div>
sth comes here
</div>
<div >
and here
</div>
</div>
</div>
</div>
<br />
<br />
<div style=" background-image:url('images/bg_bot.jpg');width:988px;height:105px;margin-top:400px;" >
<br />
<asp:Label ID="Label2" runat="server" Font-Bold="True" Font-Names="Andalus"
Font-Size="Large" ForeColor="White" Text="Copy Right © 2013 For Saray Ceram"></asp:Label>
</div>
Er besteht auch aus einigen javascript-Funktionen, aber ich denke, Sie haben nichts mit meinem problem zu tun.Ich bin wirklich sehr dankbar für deine Hilfe,dies hat sich zu einem großen problem für mich.
auch einige man schlug mir vor, zu verwenden, zu normalisieren.css ich kopieren und klebte es auf ma-stylesheet und enthalten es in meiner website,aber nichts änderte sich.
- jetzt haben Sie mehr als 10 Ruf. 🙂
- ich danke Ihnen so sehr mein Freund.
Du musst angemeldet sein, um einen Kommentar abzugeben.
In der Regel Firefox und Chrome/Rendern sollten die gleichen, es sei denn, etwas ist furchtbar falsch.
Ersten ausführen der gerenderten HTML durch die html validator und stellen Sie sicher keine Fehler vorhanden sind.
Dann versuchen, loszuwerden, alle diejenigen, die
, und auch versuchen, eine CSS-resetFolgenden Dinge müssen im Auge behalten, während der Arbeit auf browser-Kompatibilität:
1) Mit reset-styles für alle HTML-Elemente. Standard-Stile für html-Elemente sind nicht gleich in allen Browsern.So erste Sache, die getan werden sollte, ist darunter reset-styles. rest.css wäre die Stile, wie unten gezeigt:
2) das Verständnis der CSS-Box-Modell richtig. browser behandelt jedes element als eine Kiste und wendet Stile auf es.
3) Wie float ordnen Sie die einzelnen Abschnitte in einer html-Seite.
4) Wie der Positionierung von Elementen?