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
Related
I'm displaying an HTML overlay on a 1920x1080 stream.
Im trying to create a simple HTML page that has a centered image that shows on top but whenever i display it it's somewhere on the bottom right side.
This is my code, I rather not use CSS if that's an option
What am i missing?
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<center>
<img src="https://s10.gifyu.com/images/once-30-sec-5-min-99.gif" alt="Computer man" style="width:400px;height:100px;padding-bottom: 350;padding-right: 200px">
</center>
<script>
</script>
</body>
</html>
I don't think you can create a fixed resolution only using HTML
but you can put styles in the HTML image tag with maximum height and with instead of linking it to a CSS page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Document</title>
</head>
<body>
<img href="address of image" style="width=100%; height:100%">
</body>
</html>
I try to make a page after tutorial and I have a question why my page jums or moves during refreshing when I clik for example on the bar? On the tutorial the page isn't jump and my jumps??? Click on the blue bar and the page jums or moves what is wrong with it?
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="description" content="Blog na temat ciekawych publikacji z dziedziny filozofii. Omówienie wybranych tekstów najsłynniejszych autorów!">
<meta name="keywords" content="filozofia, książki, blog, przemyślenia">
<meta name="author" content="Wojciech Bukowski">
<meta http-equiv="X-Ua-Compatible" content="IE-edge,chrome=1">
<title>Philosophia Blog</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div id="logo">
<h1>Philosophia Blog</h1>
</div>
<nav>
<div id="topbar">
<ul>
<li>Strona Główna</li>
<li>Pierwszy raz tutaj?</li>
<li>Dlaczego filozofia?</li>
<li>O autorze</li>
<li>Kontakt</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
After seeing your code, if you don't want this to happen remove the href in your anchor tag. However, by the looks of your code, you're trying to make a navbar. So for now, don't worry about what's happening and keep going with the tutorial!
I am using the play framework and have a main.scala.html file which currently holds all the header and footer information for each of my web pages. I then just reference the main.scala.html page for every other html page that I create. For example:
#main("enterprise") {
<!--=== Slider ===-->
<div class="layer_slider">
<div id="layerslider-container-fw">
<div id="layerslider" style="width: 100%; height: 500px; margin: 0px auto; ">
As you can see the #main("enterprise") {} reference the main file while everything with the {} is the body portion of the enterprise page. I am however wanting to add meta tags to each of my pages individually and am wondering how should I do this? Would I have to enter a tag to each of the html pages I wish to add meta to?
main.scala header:
#(activeMenu: String, headParts: Html = Html(""))(content: Html)
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title>SpryPoint | Smart Solutions for Smart Utilities</title>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
Thanks for any advice.
This topic is addressed in moreScripts and moreStyles equivalents section of the template doc it can be for an instance:
#headParts = {
<meta name="description" content="Some description for this page only...">
}
#main("enetrprise", headParts){
Html content here ...
}
Edit: So your main.scala.html would look (according to your additional comment) like:
#(activeMenu: String, headParts: Html = Html(""))(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>#activeMenu</title>
#headParts
</head>
<body>
<section class="content">#content</section>
</body>
</html>
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>
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