Im developing a simple html contents page to go on a cd. Im having problems navigating to the pages through the links on the contents page. chrome navigates fine but ie 8 wont open the pages. heres my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Gunnerbury Park Mansion</title>
<!-- add meta tags -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Content page for LAM scan of Gunnersbury Mansion" />
<meta name="keywords" content="Gunnersbury mansion, LAM, Laser Aided Modelling, scan" />
<meta name="rating" content="Safe for Kids" />
<meta name="author" content="Richard Banks" />
<link rel="Stylesheet" type="text/css" href="reset.css" />
<link rel="Stylesheet" type="text/css" href="vertical-centering-page-layout.css" />
<link rel="Stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="js/jquery.ez-bg-resize.js"></script>
<script type="text/javascript" src="js/transify-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="Floater"></div>
<div id="MainWrapper">
<div id="Content">
<div id="Header">Gunnerbury Park Mansion</div>
<div id="ContentBody">
<table id="Truviews">
<thead></thead>
<tbody>
<tr><td>External View</td></tr>
<tr><td>Basement View</td></tr>
<tr><td>Ground Floor View</td></tr>
<tr><td>First Floor View</td></tr>
<tr><td>Second Floor View</td></tr>
<tr><td>Roof View</td></tr>
<tr><td></td></tr>
<tr><td>Install Truview 2.1</td></tr>
<tr><td>Upgrade to Truview 2.2</td></tr>
</tbody>
</table>
</div>
<div id="Footer">
<img src="EalingLogo.png" alt="Ealing Logo" alt="Ealing Logo" id="EalingLogo"/>
<img src="GiffordLogo.png" alt="Gifford Logo" alt="Gifford Logo" id="GiffordLogo"/>
</div>
</div>
</div>
</body>
Does anyone have any ideas why this is. Ive read about the "mark of the web" but adding the decleration doesnt seem to change anything
There is a slightly evil method which appears to work in IE. I can't take credit for this though, this was offered by the gods of the internet.
Launch the executable
<script>
function LaunchApp() {
if (!document.all) {
// -- If we're not in IE, just go ahead with the normal loading routine.
return true;
}
// -- If we're in IE, use ActiveX instead!
var ws = new ActiveXObject("WScript.Shell");
ws.Exec("C:\\Program Files\\Application\\Software.exe");
return false;
}
</script>
Related
Let me start with file management. So, there is a main.js and a main.css, both of them having the styles all the HTML Pages have. Now, there are HTML Pages inside child folders, so the directory looks like this:
/The Project
/main.js
/main.css
/Home
/index.html
/styles.css
/Study
/index.html
/styles.css
/scripts.js
When I run the HTML files as a file in the browser, it works perfectly. However, when I run it using python3 -m http.server, it does not link the CSS and JS files that are in the parent directory.
Thank you for answering in advanced!
Home/index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Plompy</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="../main.css">
<script src="../main.js"></script>
</head>
<body style="overflow-x: hidden;">
<div class="nav"><li class="options">Home</li><li class="options">Study</li><li class="options">Discussion</li><li class="options">About</li><li class="options" style="color: rgb(66, 174, 213);">Sign Up!</li></div>
<div class="content">
<h1 class="title">Pompy - The Future of Creatures</h1>
<img src="academicean.png" alt="Academicean Logo" style="float:right;width:400px;height:400px">
<h2 class="body">HAHAHA LOL</h2>
<h1 class="title">Contact Us:</h1>
</div>
<div class="footer">
<h4 class="body">Best experiences may be with a computer, or laptop. Although compatible with other devices such as the hand held phone, not that the experience won't be as smooth as with a laptop.</h4>
</div>
</body>
</html>
Study/index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Academicean</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="../main.css">
<script src="../main.js"></script>
</head>
<body style="overflow-x: hidden;">
<div class="nav"><li class="options">Home</li><li class="options">Study</li><li class="options">Discussion</li><li class="options">About</li><li class="options" style="color: rgb(66, 174, 213);">Sign Up!</li></div>
<div class="content">
<h1 class="title">Academicean - The Future of Reviewers</h1>
<img src="academicean.png" alt="Academicean Logo" style="float:right;width:400px;height:400px">
<h2 class="body">Academicean, which is the combination of Academic and Ocean, provides much resources to study or to review a topic. Whether thats Mathematics, English, Sciences or any of your academic subjects, you may review for it RIGHT HERE! There will also be a comment section, where you may gather some more opinions about a certain topic, and ask some questions if confused. So what are you waiting for? Log in or Sign up to be able to get started!</h2>
<h1 class="title">Contact Us:</h1>
</div>
<div class="footer">
<h4 class="body">Best experiences may be with a computer, or laptop. Although compatible with other devices such as the hand held phone, not that the experience won't be as smooth as with a laptop.</h4>
</div>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Study - POmpley</title>
<link rel="stylesheet" href="../main.css">
<link rel="stylesheet" href="styles.css">
<script src="../main.js"></script>
</head>
<body>
<div class="nav"><li class="options">Home</li><li class="options">Study</li><li class="options">Discussion</li><li class="options">About</li><li class="options" style="color: rgb(66, 174, 213);">Sign Up!</li></div>
<div class="container">
<h1 class="title">GOogle LOL</h1>
<div class="search">
<input type="text" id="searchbar" onfocus="change_note()">
<h2 id="note">Type something to search</h2>
</div>
</div>
</body>
<script src="scripts.js"></script>
</html>
So the title says it, ill upload screenshots of the issue:
Here are the images.
I have tried to fix this but im not the most experienced coder out there. If any one has run into this problem or knows the solution please answer :) Its proboly something simple that i cant find because im stupid, LOL. Any way thank you for looking :)
This is my index.html:
<!DOCTYPE HTML>
<!--
Aerial by HTML5 UP
html5up.net | #n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Oracle RPG</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-wide.css" />
<link rel="stylesheet" href="css/style-noscript.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="loading">
<div id="wrapper">
<div id="bg"></div>
<div id="overlay"></div>
<div id="main">
<!-- Header -->
<header id="header">
<h1>Oracle RPG</h1>
<p>A BETTER EXPERIENCE • BUILT FOR THE GAMER • BY THE GAMER</p>
<nav>
<ul>
<li><span class="label">Forums</span></li>
<li><span class="label">Donor Area</span></li>
<li><span class="label">Youtube Channel</span></li>
<li><span class="label">Ranks & Apply Area</span></li>
</ul>
</nav>
</header>
<!-- Footer -->
<footer id="footer">
<span class="copyright"><font size="1">© Untitled. Design: HTML5 UP.</span></font>
</footer>
</div>
</div>
</body>
</html>
In your all your css files you state your div with id #bg as follows:
bg {
background-size: 2250px auto; /*the first value is different in all css files*/
width: 6750px;
}
The first value is the width of you images and the second one the height. The width is different in each of the css files (wide, normal, mobile, etc) so what you have to do is just change the width of the background-size to whatever you want and your problem is gone! :)
So I have spent more than an hour trying to figure this out.
I am trying to use a ToolTip from html5-kickstart and it doesn't seem to work when I use it, but the kickstart's kitchen sink works fine. I even copied all of their code into my web server and it didn't work?
I copied their headers and it didn't work, copied their code and it didn't work.
I am using Apache 2 pretty much out of the box. everything else html5 seems to work fine, but kickstart's tool tip.
Here is my code.
<html>
<head>
<title>Please Set name in fuction!</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://xxx.xxx.xxx.xxx/xxxxdesk/css/mainpage.css" />
<link rel="stylesheet" type="text/css" href="http://xxx.xxx.xxx.xxx/xxxxdesk/css/kickstart.css" />
<link rel="stylesheet" type="text/css" href="http://xxx.xxx.xxx.xxx/xxxxdesk/css/tiptip.css" />
<script src="http://192.168.77.74/xxxxdesk/js/mainpage.js" ></script>
<script src="http://192.168.77.74/xxxxdesk/js/kickstart.js" ></script>
<script src="http://192.168.77.74/xxxxdesk/js/jquery-1.6.4.min.js" ></script>
<script src="http://192.168.77.74/xxxxdesk/js/helium.js"></script>
</head>
<body>
<nav>
<div class="grid">
<div id="title" class="col_8 left">
<span>xxxxdesk<span>
</div>
<div id="login" class="col_4 right">
<!-- Click Action -->
<button class="tooltip" data-content="#usermenu" data-action="click">
<i class="icon-user"></i> UserName <i class="icon-sort-down"></i>
</button>
<div class="tooltip-content" id="usermenu"><h5>Menu</h5>
<button class="button meduim red pill" href="index.php/auth/logout">Logout</button>
</div>
</div>
</div>
</nav>
<div class="background">
<header>
A header .........
</header>
<main>
Content ...........
</main>
</div>
<footer>
A Footer ..............
</footer>
Please note that all this code is generated by my PHP code. So it is a dynamic site, but this is all that matters concerning HTML5 Kickstart.
Ok I finally figured it out.
The kitchen sink displays an older version of the package, and it uses an older version of jQuery.
My 1st mistake was that I had the old version of jQuery.
My 2nd mistake was that I was calling jQuery after I called kickstart.js. jQuery needs to come first.
I hope this help others down the road.
I am using pre-built CSS and HTML to display a drop down menu on my site, but the menu does not work in Internet Explorer. I am not sure if it is the doctype or what, I have it linked to a csshover.htc page, as it came with, but it still won't work. I will list the code below for the first section of the menu that contains the doctype and file link, as well as the csshover.htc code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="menu.css" type="text/css" media="screen" />
<title>Mega Drop Down Menu</title>
<!--[if IE 6]>
<style>
body {behavior: url("csshover.htc");}
#menu li .drop {background:url("img/drop.gif") no-repeat right 8px;
</style>
<![endif]-->
<body>
<ul id="menu">
<li>Home<!-- Begin Home Item -->
<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_2">
<h2>Welcome !</h2>
</div>
<div class="col_2">
<p></p>
</div>
</div><!-- End 2 columns container -->
And here is the info from the csshover.htc file:
<public:attach event="ondocumentready" onevent="CSSHover()" />
<script>
window.CSSHover=(function(){var m=/(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)): (hover|active|focus))/i;var n=/(.*?)\:(hover|active|focus)/i;var o=/[^:]+:([a-z\- ]+).*/i;var p=/(\.([a-z0-9_\-]+):[a-z]+)|(:[a-z]+)/gi;var q=/\.([a-z0-9_\-]*on(hover|active|focus))/i;var s=/msie (5|6|7)/i;var t=/backcompat/i;var u={index:0,list:['text-kashida','text-kashida-space','text-justify'],get:function(){return this.list[(this.index++)%this.list.length]}};var v=function(c){return c.replace(/-(.)/mg,function(a,b){return b.toUpperCase()})};var w={elements:[],callbacks:{},init:function(){if(!s.test(navigator.userAgent)&&!t.test(window.document.compatMode)){return}var a=window.document.styleSheets,l=a.length;for(var i=0;i<l;i++){this.parseStylesheet(a[i])}},parseStylesheet:function(a){if(a.imports){try{var b=a.imports;var l=b.length;for(var i=0;i<l;i++){this.parseStylesheet(a.imports[i])}}catch(securityException){}}try{var c=a.rules;var r=c.length;for(var j=0;j<r;j++){this.parseCSSRule(c[j],a)}}catch(someException){}},parseCSSRule:function(a,b){var c=a.selectorText;if(m.test(c)){var d=a.style.cssText;var e=n.exec(c)[1];var f=c.replace(o,'on$1');var g=c.replace(p,'.$2'+f);var h=q.exec(g)[1];var i=e+h;if(!this.callbacks[i]){var j=u.get();var k=v(j);b.addRule(e,j+':expression(CSSHover(this, "'+f+'", "'+h+'", "'+k+'"))');this.callbacks[i]=true}b.addRule(g,d)}},patch:function(a,b,c,d){try{var f=a.parentNode.currentStyle[d];a.style[d]=f}catch(e){a.runtimeStyle[d]=''}if(!a.csshover){a.csshover=[]}if(!a.csshover[c]){a.csshover[c]=true;var g=new CSSHoverElement(a,b,c);this.elements.push(g)}return b},unload:function(){try{var l=this.elements.length;for(var i=0;i<l;i++){this.elements[i].unload()}this.elements=[];this.callbacks={}}catch(e){}}};var x={onhover:{activator:'onmouseenter',deactivator:'onmouseleave'},onactive:{activator:'onmousedown',deactivator:'onmouseup'},onfocus:{activator:'onfocus',deactivator:'onblur'}};function CSSHoverElement(a,b,c){this.node=a;this.type=b;var d=new RegExp('(^|\\s)'+c+'(\\s|$)','g');this.activator=function(){a.className+=' '+c};this.deactivator=function(){a.className=a.className.replace(d,' ')};a.attachEvent(x[b].activator,this.activator);a.attachEvent(x[b].deactivator,this.deactivator)}CSSHoverElement.prototype={unload:function(){this.node.detachEvent(x[this.type].activator,this.activator);this.node.detachEvent(x[this.type].deactivator,this.deactivator);this.activator=null;this.deactivator=null;this.node=null;this.type=null}};window.attachEvent('onbeforeunload',function(){w.unload()});return function(a,b,c,d){if(a){return w.patch(a,b,c,d)}else{w.init()}}})();
Change over to <!DOCTYPE HTML>
and add
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
into your head
also add a <html> tag and </head> tag
for example
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
</head>
<body>
<!-- Content -->
</body>
</html>
Your missing a lot of tags which are essential add these in and im sure your problem should be fixed
you also aren't closing your <ul> tag and <li> tag
This is some code I working on but now of JQuery Mobiles elements are working. It been a while since I have coded. Also if it important I am using Sumlime Text 2.
<!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>.......</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div date-role="page" data-theme="a">
<div date-role="header">
<!--Main Nav Bar-->
Home
<h1>HOME</h1>
</div>
<div data-role="content">
hello
</div>
</div>
</body>
</html>
From the looks of it, everything seems to be written correctly. The only thing that could be is that it does not use the correct HTML 5 doc type but html4. Jquery mobile is heavily reliant on HTML5
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
</head>
<body>
</body>
</html>