The links on my project working on is not clickable on Internet Explorer but Ok on firefox and chrome. It is essential to support this on IE. I have been researching this for days. I first I put on position:fixed on the body background, but when I removed the position: fixed, my background will not be responsive. Here is the some css
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body >
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<div id="container">
<div id="main_corporate">
<img id="logo" src="img/logo.png">
<div id="content_corporate1">
<p >Whether you are hosting a small lunch meeting or a grand banquet, preparing for an event can be a daunting task. The venue set up, the dishes and beverages must all be carefully planned and executed to be able to provide your guests an outstanding dining experience.</p>
<p >Save yourself from all these work and engage a seasoned caterer to do everything for you! Occasions Catering is a full-service caterer that has been delivering unique and exceptional culinary experiences since 2006.</p>
<p >Occasions Catering represents the best culinary experience in Singapore. We are with our clients from the conceptualization of the ideas to the smooth delivery of the event.From high end corporate functions to intimate gatherings, our skilled kitchen and operation teams continuously astonish clients with detailed setups, appetizing meals and first class service.</p>
<p style="margin-right:90px" >Don't just take our word for it. Request for a food tasting session today! </p>
</div>
<div id="socialmed">
<img src="img/facebook.png" >
<img src="img/twitter.png">
<img src="img/instagram.png">
<img src="img/youtube.png">
</div>
<ul id="MenuBar1" class="MenuBarHorizontal2">
<li style="width:70px;"><a href="home.html" >HOME</a></li>
<li><a href="aboutus.html" >ABOUT US</a></li>
</ul>
</div>
<div id="footer" class="clearfix">
<div class="about1">
</div>
<div class="about2">
</div>
<div class="about3">
</div>
</div>
</div>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Here is the jsfiddle of the complete code: http://jsfiddle.net/jethph/TKM9Y/. Sorry for untidy code.
Thanks for your help.
Related
First off all total n00b here.
Is it possible to skip clicking on HTML button with simple URL string?
example:
Im visiting page www.somesite.com/page1
on page1 there is a html button (type=submit, value=ADD)
when I press that button it sending me to www.somesite.com/page2
question:
Is there a way to put pressing button command in URL that gonna bring me directly to page 2 (something like www.somesite.com/page1&press button value=ADD) ???
Thanks
Try with jquery
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<form>
<input id="data" value="132">
<button class="goToPage">Save</button>
</form>
<script>
$(document).ready(function () {
$('.goToPage').click(function () {
var data = $('#data').val();
window.location = "yourUrl?data=" + data;
});
});
</script>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<script src="" async defer></script>
</body>
</html>
I saw there is a method to load the HTML sample in VS Code.
But I don't know what is the shortcut of it.
! + Enter would do the work for you.
type ! at the beginning and hit enter it will generate the basic HTML Structure i do it all the time
press CTRL+! and then press Tab or press ctrl + space
Another approach is to install extension
https://github.com/sidthesloth92/vsc_html5_boilerplate
it will generate this code:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<script src="" async defer></script>
</body>
</html>
If you are using windows
simply check the language if it is HTML or not and afterward the same step shift+!..
I have problem with my student buttons inside this html file..can anyone help me? i take this code from the internet. when i click the button, it doesnt redirect me to the login.php..
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Supervision System</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Fullscreen Background Image Slideshow with CSS3 - A Css-only fullscreen background image slideshow" />
<meta name="keywords" content="css3, css-only, fullscreen, background, slideshow, image, content" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
</head>
<body id="page">
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>SUPERVISION SYSTEM</h3></div></li>
<li><span>Image 02</span><div><h3>SUPERVISION SYSTEM</h3></div></li>
<li><span>Image 03</span><div><h3>SUPERVISION SYSTEM</h3></div></li>
<li><span>Image 04</span><div><h3>SUPERVISION SYSTEM</h3></div></li>
<li><span>Image 05</span><div><h3>SUPERVISION SYSTEM</h3></div></li>
<li><span>Image 06</span><div><h3>SUPERVISION SYSTEM</h3></div></li>
</ul>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<p class="codrops-demos">
Coordinator
Supervisor
Student//-----right here the problem
</p>
</header>
</div>
</body>
</html>
That's a link, not a button. It should just fine, so long as you intended to write a relative URL.
It looks like you intended to write an absolute URL though and you forgot to include http:// or https:// at the front of it (or possibly // if you wanted a scheme relative URL, which is unlikely since you included a port number).
Student//-----right here the problem
Should work. You forgot the http://
Hoping someone can help me with this. The following menu items below (Get on Amazon etc) change the information on the page within the browser, but the first menu should change the actual page to my index page. For some reason I cannot get it to work
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-- >
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<title>Painful Words Dot Com</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!--
Painful Words
-->
<!-- Google Web Font Embed -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,600,500,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/painful_main.css">
</head>
<body>
<div id="main-wrapper">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a rel="nofollow" href="http://browsehappy.com">upgrade your raasclaat browser</a> or <a rel="nofollow" href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 affix text-center" style="z-index: 1;">
<h1 class="painful-site-title">
Painful Words
<img src="images/btn-menu.png" alt="main menu" id="m-btn" class="pull-right visible-xs visible-sm" >
</h1>
<ul id="responsive" style="display:none" class="hidden-lg hidden-md"></ul><!-- /.responsive -->
</div>
<div class="menu visible-md visible-lg">
<ul id="menu-list">
<li class="active back-menu">Go Back</li>
<li class="inactive purchase-menu">Purchase</li>
<li class="amazon-menu">Get on Amazon</li>
<li class="google-menu">Get on Google Play</li>
<li class="noble-menu">Get on Barnes & Noble</li>
</ul>
</div><!-- /.menu -->
<div class="image-section">
<div class="image-container">
<img src="images/gone.jpg" id="purchase-img" class="main-img inactive" alt="purchase">
<img src="images/love.jpe" id="amazon-img" class="inactive" alt="amazon">
<img src="images/fam.jpe" id="google-img" class="inactive" alt="google">
<img src="images/fam2.jpe" id="noble-img" class="inactive" alt="noble">
The following code in your http://www.painfulwords.com/js/templatemo_script.js JavaScript file is preventing the link from working.
$("#menu-list a, #responsive a").on('click',function(e){
if(this.className == "external") {
return;
}
// THIS BIT HERE cancels the link's default action
e.preventDefault();
Try giving the link the additional class of external.
The webpage I made will not allow me to scroll. How can I fix this?
Other than viewing the code you can view the live website at this address
Also, the tabs only view on certain web browsers. How do I make it on all browsers?
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js b1" lang="en"> <!--<![endif]--> <!--[TO PUT THE BACKGROUND BACK, CHANGE "b1" to "bg1"-->
<head>
<meta charset="utf-8">
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/i/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/jquery.jqzoom.css">
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
<!-- All JavaScript at the bottom, except this Modernizr build.
Modernizr enables HTML5 elements & feature detects for optimal performance.
Create your own custom Modernizr build: www.modernizr.com/download/ -->
<script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> Upgrade to a different browser or install Google Chrome Frame to experience this site.</p><![endif]-->
<header>
<h1>The Down Syndrome Awareness Foundation (DASF)</h1>
</header>
<div id="image">
<img src="img/zoom.png">
<a href="img/big.JPG" class="MYCLASS" title="DSAF Logo">
<img src="img/small.JPG" title="Our Logo">
</a>
</div>
<div id="back" >
<img src="img/back.png" alt-text="Back" title="Back">
</div>
<div role="main" id="container">
<div id="primary">
<h2>TITLE ONE</h2>
</pre>
<p>TEXT</p>
<p>MORE TEXT, ANOTHTER PARAGRAPH</p>
</div>
<div id="content" class="one-edge-shadow">
<!-- <h2>Main content</h2> -->
<div id="tabContainer">
<div class="tabs">
<ul>
<li id="tabHeader_1">About the Disorder</li>
<li id="tabHeader_2">TAB 2</li>
<li id="tabHeader_3">Commercial</li>
</ul>
</div>
<div class="tabscontent">
<div class="tabpage" id="tabpage_1">
<h2>HEADER ONE</h2>
<p><strong>What is Down Syndrome?:</strong></p>
<p></p>
<p><strong>Quality of Life:</strong></p>
<ul>
<li>A person with Down Syndrome in 1900 could expect to live to about 9-11 years. Now, patients with Down Syndrome live to 50 years old, with a ratio of 1:10 living to 70
<li>About 92% of pregnant women with babies with Down Syndrome elect to terminate the pregnancy
<li>Rate of bullying to children is increased to children with disorders is much higher
<li>Increase risk for Alzheimer’s Disease, Cancers, Celiac Disease, and Vision and Hearing Impairment
</ul>
<p><strong>Severity:</strong></p>
<p></p>
<p><strong>Famous Cases:</strong></p>
<p></p>
<p><strong>Special Olympics:</strong></p>
<p></p>
</div>
<div class="tabpage" id="tabpage_2">
<h2>HEADER 2</h2>
<hr>
<p><strong>Clinical Science</strong></p>
<p></p>
<p><strong>Causes:</strong></p>
<ul>
<li>Having a third copy, or part of a third copy of chromosome 21
<li>1% of cases are hereditary, the other 99% of cases are random or based on the mother’s age being over thirty-five (35) years
</ul>
<p><strong>Symptoms:</strong></p>
<ul>
<li>Delayed physical, social, and intellectual development</li>
<li>Decreased muscle tone</li>
<li>Short neck, excess skin on the back of the neck</li>
<li>Flattened facial profile</li>
<li>Upward slanting eyes</li>
<li>Skin fold that comes out from the upper eyelid and covers the corner of the eye</li>
<li>Wide, short hands and short fingers</li>
<li>A single deep crease in the palm of the hand</li>
<li>White spots on the coloured part of the eye</li>
<li>Deep groove between the first and second toes</li>
</ul>
<p><strong>Treatment</strong></p>
<p>There is no cure for Down Syndrome, however there are treatments to minimalise the symptoms and the conditions associated with them. Speech and coordination can be improved by occupational therapy and special education.</p>
<p><strong>Heart Defects Related to Down Syndome</strong></p>
<p></p>
</div>
<div class="tabpage" id="tabpage_3">
<h2>As Seen on "The Today Show"</h2>
<p>PARAGRAPH ONE BECAUSE I'M SO LAZY AND CAN'T ADD MORE, SORRY</p>
</div>
</div>
<!-- <p>Inner containers can be set using % measurements which are relative to the parent container.</p>
<p>If the outermost container is set in 'em' and the inner containers are set in % everything will ultimately be relative to the font-size.</p>
<p>To create elastic grids you can do the initial math using absolute px measurements and then use the following formula to convert to relative measurements.</p>
<p><strong>target ÷ context = result</strong></p> -->
<div id="button-box">
<a class="button">About Us</a>
</div>
</div>
<div id="secondary" class='visuallyhidden'>
<h2>Seconday Sidebar</h2>
<pre>
#secondary {
float:left;
width:25%;
}
</pre>
<p>One potential gotcha is if you change font-sizes on internal containers. That can change the context of measurements inside the container.</p>
<p>You can mitigate this problem by changing font sizes on elements other than the containers themselves.</p>
</div>
</div>
<div id="remedy" class="one-edge-shadow">
<h2>Meet the Team</h2>
<p>I CAN PUT BULLETS IN LATER</p>
<p>BUT IM JUST SO TIRED</p>
<p>DURRRRR</p>
<p><strong>I CAN EVEN MAKE IT BOLD!</strong></p>
</div>
<footer>
</footer>
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> -->
<script src="js/jquery-1.7.2.min.js"></script>
<script type='text/javascript' src='js/jquery.jqzoom-core.js'></script>
<script src="js/acidTabs.js"></script>
<!-- scripts concatenated and minified via build script -->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<!-- end scripts -->
<!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
mathiasbynens.be/notes/async-analytics-snippet -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
Change:
html {
overflow: hidden;
}
to:
html {
overflow: auto;
}