Site working in Safari but not Firefox or Chrome
Question
I have a made a website, and it was all going swimmingly until I tried to open it in chrome and then firefox. Nothing..
I would really appreciate if anyone could help me as to why it is only working on Safari?
Thank you.
below is my code-
<!doctype html>
<html>
<head>
<style type="text/css">
a:hover {
cursor:default;
}
</style>
<style type="text/css">
a { text-decoration:none }
</style>
<meta charset="UTF-8">
<style type="text/css">
body {
margin: 0;
font-size: 20px;
font-family: Avenir;
font-style: normal;
font-size:26px;
font-weight: 500;
}
section {
display: block;
height: auto;
width: auto;
min-width: auto;
min-height: 700px;
padding: 151px;
}
#RIP{
background: #000000;
color: #FFFFFF;
font-family: Avenir;
color: #ffffff;
font-size: 26px;
font-weight: 500;
transform: scale(7.193,7.193);
}
#Concept{
background:#FFFFFF;
color:#000000;
}
#Clients{
background:#000000;
color:#FFFFFF;
}
#Contact{
background:#FFFFFF;
color:#000000;
}
nav {
font-style: normal;
font-size:12px
color: #FFFFFF;
background color:#FFFFFF
text-decoration: none;
position: fixed;
text-align: center;
list-style-position: centre;
padding: 18px;
text-align:center
}
.nav {
position: fixed;
color: #FFFFFF;
background-color: #000000;
list-style-position: centre;
nav-index: centre;
text-decoration: none;
text-align: centre;
}
</style>
<script src="javascripts/jquery-1.11.1.min.js"></script>
<script src="javascripts/smoothscroll.js"></script>
<style type="text/css">
a:link {
COLOR: #FFFFFF;
}
a:visited {
COLOR: #FFFFFF;
}
a:hover {
COLOR: #000000;
}
a:active {
COLOR: #000000;
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
body {
margin: 0;
font-size: 20px;
font-family: Avenir;
font-style: normal;
font-size:26px;
font-weight: 500;
}
section {
display: block;
height: auto;
width: auto;
min-width: auto;
min-height: 700px;
padding: 151px;
}
#RIP{
background: #000000;
color: #FFFFFF;
font-family: Avenir;
color: #ffffff;
font-size: 26px;
font-weight: 500;
transform: scale(7.193,7.193);
}
#Concept{
background:#FFFFFF;
color:#000000;
}
#Clients{
background:#000000;
color:#FFFFFF;
}
#Contact{
background:#FFFFFF;
color:#000000;
}
nav {
font-style: normal;
font-size:12px
color: #FFFFFF;
background color:#FFFFFF
text-decoration: none;
position: fixed;
text-align: center;
list-style-position: centre;
padding: 18px;
text-align:center
}
.nav {
position: fixed;
color: #FFFFFF;
background-color: #000000;
list-style-position: centre;
nav-index: centre;
text-decoration: none;
text-align: centre;
}
</style>
<script src="javascripts/jquery-1.11.1.min.js"></script>
<script src="javascripts/smoothscroll.js"></script>
<style type="text/css">
a:link {
COLOR: #FFFFFF;
}
a:visited {
COLOR: #FFFFFF;
}
a:hover {
COLOR: #000000;
}
a:active {
COLOR: #000000;
}
</style>
<script type="text/javascript">
</script>
</head>
<nav></nav>
<nav class="nav"><a href="#RIP">RIP</a> <a href="#Scope">Scope</a> <a href="#Clients">Clients</a> <a href="#Contact">Contact</a></nav>
<section id="RIP"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('logo','','/images/blank.png',1)"><img src="/images/RIP.png" alt="" width="492" height="106" id="logo"></a><br>
<p> RestInProjects is a strategic consultancy and collaborative studio based<br>
in London and Berlin.</p>
<p>
We focus on but are not limited to; advising, public relations, web, media<br>
and design in the fashion industy.
</section>
<section id="Scope">Scope<p>
Social Media Management, Strategic consultancy, Sourcing, Production,<br>
Content creation, E-commerce, Networking, Web Design, App Design,<br>
Casting, Design, Press, PR
</section>
<section id="Clients">Clients<p>
Adidas, American Express, Barbour, Bread & Butter Asia, Capsule,<br>
Coffin on Cake, Drapers, Fred Perry, GQ, Harvey Nichols, i-D<br>
Jacket Required, Lacoste, Malmo London, Mini, Mo Studior, Niice<br>
London, SEEK, U-homme, Umbro, Van Liebling, WeShallRun<br>
</section>
<section id="Contact">Contact<p>
Portfolio On Request<br>
info@restinprojects.com
</section>
<p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<span style="text-align: right">RIP.</span>
</body>
</html>
3 answers
solution1
0 2014-11-18 22:27:02
You have a lot of misspelled words like in your CSS code you wrote "centre" instead of "center".
Also, you're missing semicolons in line 55 and 57.
I recommend you open your code in some IDE like Aptana Studio or Netbeans and it will automatically mark the errors for you.
Edit: just noticed you're also missing the opening body tag.
solution2
0 2014-11-18 22:43:33
You're missing a <BODY> tag.
Run your website through the W3C syntax validator to find more issues. http://validator.w3.org/
solution3
0 ACCPTED 2014-11-18 22:49:46
Have a look on Ameer Elsherif 's answer pointing out some ofe your issues. Another problem is this:
In two <style> -tags you set styles for #RIP .
Remove in both the line transform: scale(7.193,7.193); then the page looks same in all browsers.
With scale(7.193,7.193) you blow up the size of the page. Only Safari doesn't understand transform and displays it in normal size.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why is this working on Safari and Firefox but not on Chrome?
jQuery working in Firefox, Safari but not in Chrome
ajax post working on chrome but not working on firefox and safari
Jquery not working in Chrome, and not as expected in Safari and Firefox
jQuery working in Chrome and Safari, but not Firefox or IE?
jQuery resize not working at FireFox, Chrome and Safari
Json request working on safari but not chrome/firefox
Element is not displaying on FireFox & Opera, but on Chrome & Safari is working
jQuery Click function working in Firefox but not Chrome/Safari
jQuery code working in Safari and Chrome but not Firefox
Related Tags