Reputation: 121
what should I do with css top value differences in chrome and firefox?
The css top or margin-top values in chrome is so different with firefox and opera,what should I do? For example in chrome when I put (top:0px;) for (.slide_content) my menu is in its right place,but in firefox I have to put (top:-80px;).
What should I do?please help;Thanks in advance.
and also firebug doesn't have any errors. Sorry I couldn't post a jsfiddle link because the site contains lots of pictures and I really wanted to post pictures so that you can understand what I mean better,I tried but I needed 10 reputation but I have only 8,but this is my 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>
It also consists of some javascript functions but I think they have nothing to do with my problem.I will be really really thankful for your help,this has become a big problem for me. also some one suggested me to use normalize.css I copy and pasted it to ma stylesheet and included it in my website,but nothing changed.
Upvotes: 2
Views: 6535
Answers (2)
Reputation: 914
Following things have to be keep in mind while working on browser compatibility:
1) Applying reset styles on all HTML elements. default styles for html elements are not same in all browsers.So first thing should be done is including reset styles. rest.css would have the styles as shown below:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
2) Understanding the CSS Box model properly. browser treats each element as a box and applies styles on top of it.
3) How to use float to arrange the individual sections in a html page.
4) How to use positioning elements?
Upvotes: 0
Reputation: 988
Usually Firefox and Chrome will/should render the same unless something is terribly wrong.
First run your rendered HTML through the html validator and make sure there are no errors.
Then try getting rid of all those , and also try using a CSS reset
Upvotes: 1
Related Questions
- css Positions are not same in mozilla and chrome
- Firefox absolute position different then Chrome
- top:1px calculated differently in chrome and FF
- how to fix a display difference between chrome and firefox for css relative position?
- jQuery position() top is different in Chrome and Firefox
- Firefox displays position relative different than Chrome
- CSS positioning discrepancy between chrome/safari and firefox
- Firefox and Chrome Display "top: -5px differently"
- Why does Firefox interpret top offset differently from Chrome, Safari and IE?
- CSS Top Property different between Internet Explorer and FireFox