CSS not loading in FF and IE - html

I have designed a site and my CSS is not loading in FF and IE. It works perfectly in Chrome and Safari. Can anyone help me Debug?
I am loading the CSS in the following way.
<!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>site title::</title>
<!--CSS Files-->
<link rel="stylesheet" href="stylesheets/style.css" type="txt/css" />
<link rel="stylesheet" href="stylesheets/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="stylesheets/dark.css" type="text/css" media="screen" />
`

style.css is missing an e in its type attribute value (txt should be text).

Related

DOCTYPE and Character Encoding not recognized by w3.org validator

I've spend several hours trying to figure out what's wrong with the following html.
<!DOCTYPE=html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Location Status</title>
<link rel="stylesheet" type="text/css" href="location_status.css">
<meta http-equiv="refresh" content="900">
</head>
validator w3.org tells me:
The character encoding was not declared.
End of file seen without seeing a doctype first. Expected <!DOCTYPE html>
Element head is missing a required instance of child element title
Your <!DOCTYPE html> wasn't right and you forgot to close the <html> tag.
Here's the code in the right format:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Location Status</title>
<link rel="stylesheet" type="text/css" href="location_status.css">
<meta http-equiv="refresh" content="900">
</head>
<body>
// Your page code here
</body>
</html>
You have forgotten to close your <html> tag. You should always remember to close the html tags otherwise it can create unecessary problems.
You have not used <!DOCTYPE html> correctly.
<head> requires a <title> tag which specifies the title of your page and it will appear whenever you will open your html page in the browser.
Generally <head> contains all the metadata.
You can do like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title of your page</title>
<link rel="stylesheet" type="text/css" href="yourCSSFile.css">
<meta http-equiv="refresh" content="900">
</head>
<body>
// Your Code
</body>
</html>

Using Google Fonts in FireFox

I am having some trouble getting a google font to work on my webpages when viewing them with Firefox. Here is the html:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="https://www.google.com/fonts#UsePlace:use/Collection:Lobster">
<title>Page Title</title>
</head>
<body>
<p style="font-family:Lobster">Hi, this is some test text! </p>
</body>
I have also installed the font on my pc. The font displays perfectly in Chrome, Safari and IE but not in Firefox. Does Firefox require some additional code to get custom fonts to work ??
I changed the line
<link rel="stylesheet" type="text/css" href="https://www.google.com/fonts#UsePlace:use/Collection:Lobster">
to
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
Now it works for me

Watin to download webpage loaded by javascript

I am trying to download a webpage (printer web portal) with Watin but all I get is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML lang="en">
<HEAD>
<TITLE></TITLE>
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta content="text/javascript" http-equiv="Content-Script-Type">
<link rel="stylesheet" type="text/css" href="default.css">
<script type="text/javascript" src="init.js"></script>
<noscript>
<meta http-equiv="refresh" content="0; URL=js_error.xml">
</noscript>
</HEAD>
<BODY BGCOLOR="#ffffff" LINK="#000000" ALINK="#ff0000" VLINK="#000000" onload="init();location.replace('./system.xml');">
</BODY>
</HTML>
Even when I go to "View Page Source" in Firefox or IE, I don't get the "full" HTML. However, Firebug shows the full HTML.
Seems that the HTML is loaded by javascript afterwards, but how do I obtain this data?

Change style for HTML and embedded XML in the same time

I have some HTML5 files in which I embedded XML through object element. Now, for the HTML files I have alternate stylesheets. What I want to do is to change the style for the embedded XML (because the XML file has its own stylesheet) in the same time with the HTML. So, when I choose a style for the HTML page with the help of the browser, I want the style of the XML to be also changed. Is there any way to do this?
HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>LondonDiamond Restaurant Menu</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="../css/style.css" media="screen" title="Standard red black white"/>
<link rel="stylesheet" type="text/css" href="../css/style_print.css" media="print" title="Print"/>
<link rel="alternate stylesheet" type="text/css" href="../css/alt_style.css" media="screen" title="Monochrome"/>
</head>
<body>
<object data="../xml/menu.xml"><span></span></object>
</body>
</html>
XML:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="../css/style4xml.css"?>
<!DOCTYPE menu SYSTEM "../dtd/menu.dtd">
<menu>
irrelevant
</menu>
What happens is that when I chose the alternate stylesheet for the HTML, the colors change, but the embedded XML keeps the same color (and it is normal) BUT I also want to change it in the same time with the HTML.
What I did was to apply the same default and alternative stylesheets both for the HTML files and the XML ones. And in the CSS files I have the style for the HTML and XML elements.
HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>LondonDiamond Restaurant Menu</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="../css/style.css" media="screen" title="Red Black White"/>
<link rel="stylesheet" type="text/css" href="../css/style_print.css" media="print"/>
<link rel="alternate stylesheet" type="text/css" href="../css/altstyle.css" media="screen" title="Monochrome"/>
</head>
.......
</html>
XML:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="../css/style.css" title="Red Black White"?>
<?xml-stylesheet type="text/css" href="../css/altstyle.css" alternate="yes" title="Monochrome"?>
<!DOCTYPE menu SYSTEM "../dtd/menu.dtd">
<menu>
.....
</menu>
CSS:
body {...}
header {...}
...
menu {...}

Hebrew on mobile web site

I am trying to build a basic web page for mobile devices, on my pc Chrome browser I see "???? ???? ???" every where Hebrew written. Here is my code:
<?php
?>
<!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" lang="he">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="he" />
<meta name="GENERATOR" content="PHPEclipse 1.2.0" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="css/themes/light_blue.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<title>מניין</title>
</head>
<body>
<div id="wraper" data-role="header">בדיקה בדיקה הדיקה</div>
</body>
</html>
I am using eclipse IDE for developing. Any suggestions for how to solve this one?
Remove ; charset=UTF-8 and add <meta charset="iso-8859-8"> inside the document <head>.
what browser do you use?
on Chrome it works good