I'm trying to display an image with clickable areas, which shows a different text description at the bottom of the image for each clickable area. This is the code I have:
Edit: I can't figure out how to get this code to display properly either, sorry :(
<DOCTYPE! html>
<head>
<style>
a .img {
border:none;
}
.caption {
display: none;
}
.caption:target {
display: block;
position: absolute;
top: 510;
text-align: centre;
}
body {
background-color: #1e1e1e;
color: #ffffff;
font-family: Trebuchet MS;
font-size: 16pt;
}
</style>
</head>
<body>
<img src="blahblah.png" usemap="#blahblah">
<map name="blahblah">
<area shape="rect" coords="XX,XX,XXX,XXX" href="#text1">
<div class=caption id=text1>
<u>display some text</u>
</div>
<area shape="rect" coords="XX,XX,XXX,XX" href="#text2">
<div class=caption id=text2>
<u>display some other text</u>
</div>
</body>
</html>
It works perfectly in Chrome, but my text will not appear in IE8. Can anybody tell me why, and maybe suggest a fix? Trying to avoid javascript because I know pretty much nothing about it.
The reason why this does not work in IE8 is because you are using within your CSS the :target selector. This is a CSS3 selector which is not supported in IE8. See documentation: http://www.w3schools.com/cssref/sel_target.asp
An easy fix would be to use the external Javascript library: selectivizr.
This make it possible to use any CSS3 properties. Please keep in mind if you use this you also need to include jQuery.
Your HTML would look something like this:
<DOCTYPE! html>
<head>
<!-- CDN VERSION OF jQUERY, You can also download it -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
</head>
<!-- The rest of your HTML -->
If you just include those two scripts within your HTML, without any further modifications, your website will work.
Related
I have the following CSS and HTML code that I am using to develop a web project:
style.css:
body {
background-color: red;
font-size: 14px;
font-family: Roboto,arial,sans-serif
color: gray;
}
img {
height: 92px;
width: 272px;
}
a {
color: gray;
}
a:visited {
text-decoration: none;
}
.navbutton,
.footbutton {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.nav-img {
border-radius: 50%;
height: 32px;
width: 32px;
}
index.html:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Google</title>
<link rel="stylesheet" type="text/css" href="style.css?version=8">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar container">
<a class="navbutton" href="https://about.google/?fg=1&utm_source=google-US&utm_medium=referral&utm_campaign=hp-header">About</a>
<a class="navbutton" href="https://store.google.com/US?utm_source=hp_header&utm_medium=google_ooo&utm_campaign=GS100042&hl=en-US">Store</a>
<a class="navbutton" href="https://mail.google.com/mail/?authuser=0&ogbl">Gmail</a>
<a class="navbutton" href="https://www.google.com/imghp?hl=en&authuser=0&ogbl">Images</a>
<a class="navbutton nav-img" href="https://www.google.com">
<img src="https://i.stack.imgur.com/34AD2.jpg">
</a>
</div>
<div class="bod">
<div class="main-img">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google">
</div>
<input type="text">
</div>
<div class="srch-button">
<button type="button">Google Search</button>
<button type="button">I'm Feeling Lucky</button>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
<footer>
<div class="footbutton">
<a href="https://ads.google.com/intl/en_us/home/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2m--ahpm-0000000078-0000000001&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1#!/">
Advertising
</a>
<a href="https://smallbusiness.withgoogle.com/?subid=us-en-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google&utm_medium=ep&utm_campaign=google_hpbfooter&utm_content=google_hpbfooter&gmbsrc=us-en_US-et-gs-z-gmb-s-z-u~sb-g4sb_srvcs-u">
Business
</a>
<a href="https://www.google.com/search/howsearchworks/?fg=1">
How Search Works
</a>
<a href="https://sustainability.google/commitments/?utm_source=googlehpfooter&utm_medium=housepromos&utm_campaign=bottom-footer&utm_content=">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAYCAMAAAAiV0Z6AAAAPFBMVEVLoEN0wU6CzFKCzFKCzFKCzFKCzFJSo0MSczNDmkCCzFJPoUMTczNdr0gmgziCzFITczMTczMTczMTczPh00jOAAAAFHRSTlPF/+bIsms8Ad///hX+//5/tXw7aMEAx10AAACaSURBVHgBbc4HDoRQCATQ33tbvf9dF9QxaCT9UQaltLHOh/golXKhMs5Xqa0xU1lyoa2fXFyQOsDG38qsLy4TaV+sFislovyhPzLJJrBu6eQOtpW0LjbJkzTuTDLRVNKa3uxJI+VdiRqXSeu6GW+Qxi29eLIi8H7EsYrT42BD+mQtNO5JMjRuC4lSY8V4hsLX0egGijvUSEP9AbylEsOkeCgWAAAAAElFTkSuQmCC">
Carbon Neutral Since 2007
</a>
<a href="https://policies.google.com/privacy?hl=en&fg=1">
Privacy
</a>
<a href="https://policies.google.com/terms?hl=en&fg=1">
Terms
</a>
<a href="https://www.google.com/">
Settings
</a>
</footer>
</html>
For some reason, whenever I make a change to the css file, the only changes that I can see reflected in the browser (Chrome) are any changes I make to the img dimensions in the img selector (ex: I will see a change in browser if I change the height of img to 100px). No other changes are seen in browser. I have already tried adding a query string to the link href in the HTML file, as well as disabling caching in Chrome's developer tools menu. I assume it is a caching issue, however, the fact that I can still see only image dimension changes makes it a bit more complex. Anyone know any solutions?
Example of issue:
changing width in img selector from 272px to 372px is reflected in browser consistently. Changing background color from white to red (as shown in code above) is not shown in browser (rendered as white background).
It's likely your CSS styles are being superseded by another class, e.g. if you're importing a library that's applying it's own CSS.
You can either increase the specificity of your targeting by adding class names (see order of precedence).
.redContainer {
background-color: red;
}
or use !important to override other styles.
body {
background-color: red !important;
}
to me it worked. I saved your code here
and it works when I change some of the properties like background color or font color and etc. I ran the code on chrome
for example I changed background color:
body{
background-color: blue;
}
and it worked
so I guess the problem lies within your head element. maybe one of the stylesheet link addresses is wrong or maybe one of the stylesheets is getting more priority in running the css rules
I'm trying to learn to use jquery mobile with Google Apps Script, and my hosted page isn't loading the CSS for it, it seems like. This code should have a gray header and footer bar, and if I copy and paste the dev data-page section, it should still only show up once. Neither of those things happen.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Testing</h1>
</div>
<div data-role="main" class="ui-content">
<h1>Hello, World!</h1>
<p>Welcome to my page</p>
</div>
<div data-role="footer">
<h2>Testing More</h2>
</div>
</div>
</body>
</html>
What am I missing to make this work?
Note: I also tried with jquery 2.2.4 instead of 3.4.1.. no difference...
Figured it out... it's two part:
First, the hosted version of jquery mobile is 1.4.5, which is still incompatible with jquery 3.
Second, jquery has to be loaded BEFORE jquery mobile, so it had to go above it on the page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
I think you should be using .ui-header or .ui-footer there are only two instances in the css that use data-role and they are here .ui-mobile [data-role=page],.ui-mobile [data-role=dialog],.ui-page {
top: 0;
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
display: none;
border: 0
}
if you add .ui-header {background-color:gray } to the css then the background of the header is gray.
You can see all of this very clear if you view sources and prettify the code in Chrome Developer Tools
I'm trying to implement the data feed that Box Office Mojo offers from their website, and they say that adding this line of code should display the feed:
<script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php">
Which works, but I have the issue of it positioned on the far left side of the page by default, which looks weird (warning, large image).
I wrapped said script in a p tag, like so:
<p id="boxOffice"><script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php"></script></p>
and styling tag with position, but none of the options that I have tried have moved it. Have any of you guys had any idea of moving it? I'm stuck here.
Do you want it in the center? There are multiple ways to do that.
Method 1. Using <center> tag
<center><script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php"></script></center>
Your table should be centered like this:
Method 2. Add below code after the <head> tag:
<style type="text/css">
table {
margin: 0px auto;
}
</style>
It will do the same.
Method 3. Using <div> tag:
<div class="mytable"><script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php"></script></div>
And you can play with css to put the table anywhere you want:
.mytable {
text-align: center;
}
Here is my full code for method 1:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<center><script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php"></script></center>
</body>
</html>
Firstly i would suggest that try using <DIV>tag instead of <p>tag.
it should Work.
<!DOCTYPE html>
<html>
<head>
<style>
#boxOffice{
float:right;
}
</style>
</head>
<body>
<div id="boxOffice"><script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php"></script></div>
</body></html>
You can also use other css properties with <DIV>.
or
You can use <center>tag with <p> tag to align it to center.
<center><p id="boxOffice"><script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php"></script></p></center>
I'm trying to make a fairly simple site which there's a div with some text inside, centered both horizontally and vertically on the page.
I wouldn't have thought this would be that difficult to do, but something quite weird's happening. Here's the source that does work. Let's call this source A.
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jacob Garby</title>
</head>
<body>
<div class="wrap">
<div class="content">Test</div>
</div>
</body>
</html>
and here's the source that doesn't work. Let's call this source B.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jacob Garby</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
</head>
<body>
<div class="wrap">
<div class="content">Test</div>
</div>
</body>
</html>
They both use the same stylesheet, which is here:
* {
font-family: 'Josefin Sans';
margin: 0;
padding: 0;
}
div.wrap {
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
}
div.content {
border: 1px solid red;
text-align: center;
width: 100%;
}
And the problem is that the div.wrap is only vertically aligned when I link to the stylesheets outside of the html head tags. This is the only difference between the source that works and the source that doesn't.
I know that you're meant to include source inside the head tags and that's why I think it's so strange that it only works when I do the opposite of this.
I would include a link to some exampls on jsfiddle or something, but the problem is how I'm including the stylesheets, which jsfiddle doesn't let me change.
I've tried this on all of the browsers I have (Opera, Firefox, and Chrome,) and the problem persists between them.
Is this some sort of HTML bug? Or am I making some obvious mistake?
Here are some screenshots.
Source A:
Source B:
I viewed the source in a web browser, and even when I link to the stylesheet outside the head, it seems to put it in there. So, in both examples, when actually viewed, the stylesheet is automatically being put in the head tags.
If my question isn't clear, it's basically this:
Why is this strange behavior happening, and how can I fix it?
It's not strange but your HTML is invalid by doing it that way in A.
Browsers are required to do the best they can with invalid markup. The problem with that, of course, is that you are relying on the browser to guess correctly at your intentions so don't write invalid markup.
<!DOCTYPE html>
<html>
<head>
<title>Earth Game</title>
This is the code below that is not showing up in Notepad++, any ideas why?
<style>
canvas {
position: absolute;
top: 0px;
left: 0px;
background: transparent;
}
</style>
Everything else is showing up as code, just the code above in the Style tags.
</head>
<body onload="init()">
<!-- The canvas for the panning background -->
<canvas id="background" width="600" height="360">
Your browser does not support canvas. Please try again with a different browser.
</canvas>
<script src="EarthGamejs"></script>
</body>
</html>
What it looks like :
Make sure the code isn't collapsed, to do so check on the left of your code in np++, you should see a small square with a plus sign inside it, try clicking on it.
Edit: Notepad++ doesn't support CSS highlighting in an HTML file. One option you have is to create a new css file, do what you have to do with the css and then paste it back in the html file.
Duplicate