I write this sample code on notepad for an html site with css but this won't work on Mozilla(version49.0.etc) while it does on IE, Chrome and Opera. If i start it on FF, debugger says "CSS has no errors" but it only display html code.
Someone know how to fix it?
Here there are the codes(html and CSS) of my site on local path:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd>
<html lang="it">
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge" charset="iso-8859-1">
<title>Site</title>
<style type="text/css">
</style>
<link href="C:/Users/Dean/Desktop/Site/File/file1.css" rel="stylesheet" media="all">
</head>
<body class="sub">
<div class="alt">
<h1>Text here</h1>
</div>
</body>
</html>
And here there is the CSS file properties:
.sub{background-image:url("../image/bg.jpg");
background-repeat:no-repeat;
background-size:100% 100%;
background-attachment:fixed;
}
.alt {background-color:hotpink;
box-align:right;
border-radius:10px;
}
.set {font-size:12px;
color:white;
}
I'm assuming it is because your stylesheet is linked via the non standard file protocol (href="C:/Users/Dean/Desktop/Site/File/file1.css"). From my experience, Firefox usually complies to standards more than other browsers.
I'm assuming this is why your example works in other browsers, but not in FF. Try serving your stylesheet using an HTTP server.
Related
I am moving a navigable site into an iframe that now has other frames surrounding it.
Everything works normally however now in Safari when a link is clicked in the main iframe the iframe goes blank momentarily then the pages loads. Usually the user would only notice changes in elements that have changed. So the main site template would appear to have not been reloaded.
This is how the site used to behave outside the iframe and in Firefox it behaves that way despite now being in an iframe.
Is there any way to stop Safari re-loading the entire page from scratch each time a link is clicked in the iframe?
The answer has been tested and is completely serious, be warned!
So the Safari white flicker only occurs when a Javascript file is called in the head or the body, and from the same domain.
So you can include Javascript files in the head as normal from an external domain and no flicker, change it to your own domain and it flickers.
To get even more weird if you include the local javascript files in the body there is a lesser flicker, after the body it completely goes away.
This must be a bug!
Below is a basic example, clicking the link causes the flicker.
Test page HTML:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="inzu.ico" >
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<iframe id="iframe" src="testframe.html" style="height:600px"/>
</body>
</html>
Frame with flicker:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="/something.js" type="text/javascript"></script>
<style>
body{
background:red;
}
</style>
</head>
<body>
TEST
</body>
</html>
Frame with no flicker:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<style>
body{
background:red;
}
</style>
</head>
<body>
TEST
</body>
<script src="/something.js" type="text/javascript"></script>
</html>
I want to update an existing/simple holding page on my domain in html.
Unfortunately, I've noticed that this page doesn't seem to appear on newer browsers such as Chrome and Firefox and only seems to load up properly on Internet Explorer.
Is there any advice you could give me to help overcome this issue please?
Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>"TITLE HERE"</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="background:ffffff url('LOGO.jpg') no-repeat center center">
</a>
</body>
</html>
<!--#easybanner4-->
To make a simple HTML page visible by most modern browsers it's better to use HTML5 so first, instead of using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> just use <!DOCTYPE html>...
About your code, you can fix it by using something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- or <meta charset="iso-8859-1"> -->
<meta name="viewport" content="width=device-width">
<title>"TITLE HERE"</title>
<style>
body {
background:#ffffff url('LOGO.jpg') no-repeat center fixed;
}
</style>
</head>
<body>
link
</body>
</html>
I'm having a problem with linking html to CSS. It doesn't work on Google Chrome, but it does on IE. Is there anything wrong with it. By the way, I downloaded the newest version of Google Chrome moments ago.
This is my html:
body{
background:black;
color:white;
font-family:arial,helvetica,sans-serif;
float:left;
}
h1{
font:"courier new"
size:14px;
color:yellow;
font-weight:bold;
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8"/>
<meta name="author" content="Alvex"/>
<link rel="stylesheet" href="../CSS/test.css"/>
</head>
<body>
<h1>Hello World</h1>
<p>Nothing here</p>
</body>
</html>
Thank You!
If it is working in IE then path must not be an issue.
Did you check network tab in chrome developer tools? See if the .css file loads.
<link rel="stylesheet" href="CSS/test.css"/>
use like above
I have seen a tutorial on youtube which centers a site by giving margin: 0px auto; and by saying the actual width of the site:
body
{
align:center;
margin: 0px auto;
width: 1000px;
}
But this does not work for ie8. IS this a good idea to use in order to align to center the layout?
It works in IE6 and newer providing the browser is in standards mode. Trigger it with a Doctype such as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Since the alternative is quirks mode, and that creates many inconsistances with other browsers, standards mode is highly desirable.
So, yes that is a good method to centre things.
align:center;
That, on the other hand, is nonsense. There is no align property in CSS.
I have found the problem why this style and many other styles was not working for for ie8 (only for this browser). The problem is that I wrote
<html>
<head>
<title>About us</title>
<link href="css/about.css" rel="stylesheet" type="text/css" />
</head>
<body>
.......
Now I have changed it to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>About us</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/about.css" rel="stylesheet" type="text/css" />
</head>
<body>
Im trying to put a rounded rectangle using Nifty technique. But not working help me. My Code is Below
st.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="nifty.js"></script>
<link href="niftyCorners.css" rel="stylesheet" type="text/css" />
<link href="niftyPrint.css" rel="stylesheet" type="text/css" />
<link href="stm.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
return;
Rounded("div.indian","#377CB1","#9BD1FA");
}
</script>
</head>
<body>
<div class="indian">
<p>I am an Indian</p>
</body>
</html>
stm.css
#charset "utf-8";
/* CSS Document */
.indian
{
height:300px;
width:300px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
}
Help me
Your <div class="indian"> is not closed. This is probably keeping the Javascript from finding the <div> in the DOM.
You need to set the "media" for your print stylesheet. The print stylesheet hides all of the work that the Nifty JS does.
You are not setting background colors for the page or the "indian" <div>. Without doing this, the effect will not work correctly.
I don't think that setting the height of the "indian" <div> is supported when using the Nifty technique.
Correcting these errors, your code works as seen here: http://demo.raleighbuckner.com/so/1277789/
Also, you should probably use the newer version of the Nifty technique found here: http://www.html.it/articoli/niftycube/index.html
Your HTML is incorrect. You are missing a closing DIV:
<body>
<div class="indian">
<p>I am an Indian</p>
</div> <!-- This was missing -->
</body>
Also, you're using the old version of Nifty. Try the newer version: http://www.html.it/articoli/niftycube/index.html