I want to put an icon image before a text. Any HTML tag such as <img> should be avoided because any changes of HTML structure may affect our javascript code.
I write the following code and it works on screen with IE8/Firefox.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv='X-UA-Compatible' content='IE=8' />
<style type="text/css">
div.before-test:before {
content: url("sample.png");
}
</style>
</head>
<body>
<div>aaaa</div>
<div>bbbb</div>
<div class="before-test">cccc</div>
<div>dddd</div>
</body>
</html>
But, when visitors try to print the web page with IE8, the image disappears. How can I show the image even when printing with IE8, or must I add HTML tag for the image?
IE8 supports before but not in compatibility mode.
i think you should look at this guide as to what properties and stuff are supported on some browsers especially IE 6 and up.
http://www.quirksmode.org/css/contents.html
by the way, the url in url() - quotes are optional. better to have none to avoid unnecessary escaping issues
http://www.w3.org/TR/CSS2/syndata.html#value-def-uri
<style type="text/css">
div.before-test:before {
content: url(sample.png);
}
</style>
The only way i could find is from in stackoverflow. I know, it is not a good approach but , i guess there is no solution about this bug
HTML:
<div class="PrintOnly">
<img id="PrintLogo" src="sample.png"/>
</div>
CSS:
.PrintOnly { display:none; }
#media print {
.PrintOnly { display:block; }
}
Related
I have a .hta with some HTML code whose sole purpose is to display a 1920x1080 image on a 1920x1080 display, and I want the cursor to be hidden.
I've tried a few things already, notably
<style type="text/css">
* {
cursor: none;
}
</style>
or
<style>
body, html { margin:0; border:0 }
.no-cursor { cursor : none; }
</style>
<div class="no-cursor"><img src="D:\Logos\NewLogo.jpg" /></div>
Ultimately, I feel like everything that relates to the cursor (that works in a regular HTML instance) doesn't work when using the .hta extension.
<HTA:APPLICATION ID="hello"
APPLICATIONNAME="hello"
BORDER="none"
BORDERSTYLE="normal"
CAPTION="no"
CONTEXTMENU="no"
INNERBORDER="no"
MAXIMIZEBUTTON="no"
MINIMIZEBUTTON="no"
NAVIGABLE="no"
SCROLL="no"
SCROLLFLAT="no"
SELECTION="yes"
SHOWINTASKBAR=yes"
SINGLEINSTANCE="yes"
SYSMENU="no"
VERSION="1.0"
WINDOWSTATE="maximize" />
<html>
<head>
<style>
body, html { margin:0; border:0 }
</style>
</head>
<body>
<img src="D:\Logos\NewLogo.jpg" />
</body>
</html>
This is my full working code, with the cursor showing. I just need something in there to hide the cursor when running it from a .hta file.
Many thanks in advance!
Edit:
I found this here:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor
With a bunch of different cursor variations, and they ALL work in my HTA. They ALL DO, except for "none". It makes no sense to me!! This is driving me crazy!! :'(
The fact that they all work proves that the code itself is working correctly. But I have no idea why the "none" refuses to work properly.
Works for me:
test.hta
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>No Cursor</title>
<style>
.no-cursor { cursor: none; }
</style>
</head>
<body>
<img class="no-cursor" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/6f050e39-windows_10_logoblue.svg-copy_windows.jpg" />
</body>
</html>
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.
I'm new to asp.net MVC and I need to have a full background image on the login page. Im getting confused with all of the cshtmls and getting lost on where to set the full background image. Help please..
I think that best solutions is to do that via style sheets (css). All styles should be in a separate css file. For beautiful code don't use in-line styling:
body {
background-image: url('your_img_path');
margin: 0;
}
Firstly I would say, treat '.cshtml' just like '.html' for all designing purposes.
To add background image in a view (.cshtml page in Asp.net MVC), you simply need to add it in < body > tag as 'background' attribute.
I have provided the sample code. Have a Look.
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login Page</title>
</head>
<body background="~/Content/Images/sahb.png">
</body>
</html>
Regards!
SAHB
In case if you want change background in a particular View just add thise code
#section head{
<style type="text/css">
body {
background-image: url('/Images/paper.jpg');
margin: 0;
}
</style>
}
But dont forget in Layout of this View add following line
<head>
#RenderSection("head", required: false)
</head>
If you want it on all pages use Shared/_Layout.cshtml file
and change body tag similar to
Probably I would put only on the Home/Index.cshtml page so it appears only on the home page
To avoid that repeated across other pages I would add an ID to home page in the Shared/Index.chtml file as follows
<body id="HomepageBody" >
and change it in the Content/site.css file add
#HomepageBody { background-image: url("/images/7flowers.jpg" );
background-repeat:no-repeat; background-position:center; }
That would make it work across popular browsers like Chrome.
if you wanna use background-image: url('');
just do not use ~ symbol
use this code in cshtml page to insert background image on entire screen of your div section
<div style="background-image: url('/Areas/Admin/Content/Image/OIP7.jpg'); background-repeat:no-repeat; background-size:100% 100%">
one more thing ~ is not working in Url. start your image address with forward slash
/ link this '/Areas/Admin/Content/Image/OIP7.jpg'
In Index.cshtml:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/CSS/Main.css" />
</head>
<body
</body>
</html>
in Main.css:
body {
background-image: url(../Images/myBackgroundPictureName.png);
background-repeat:no-repeat;
background-size:cover;
}
It is very simple just use a css property background image on that div or that section you want.
<div style="background-image: url('/Content/images/image_2.jpg');"></div>
If your image is not displaying, you may have to add ~ tilde sign to the URL
Example :
<div style="background-image: url('~/Content/images/image_2.jpg');"></div>
Inside an iframe (on page-A), I have a simple page (page-B) that has a few jump links (e.g. jump link) to different sections of the page (page-B). The iframe height is preset to be longer than page-B's height; this is a requirement.
For some reasons, the jump links didn't work on FF (I am on Mac/FF 10.0.2); however, it worked properly on Safari and IE8. This is the sample page.
Code of page
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jump Link Test on an iFrame</title>
</head>
<body>
<h1>Page that has an iFrame</h1>
<iframe width="100%" height="2000" src="./iframe.html" frameborder="0" scrolling="no">
</iframe>
</body>
</html>
Code of iframe.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>iFrame Content</title>
<style type="text/css">
.box {
margin: 0 0 5px;
width: 400px;
height: 400px;
}
#box1 {
background-color: #f00;
}
#box2 {
background-color: #f0f;
}
#box3 {
background-color: #00f;
}
</style>
</head>
<body>
<ul>
<li>Box 1</li>
<li>Box 2</li>
<li>Box 3</li>
</ul>
<div>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
</div>
</body>
</html>
Note: If I set the iframe height < page-B's height, the problem will be solved. However, unfortunately this isn't an option given my situation because I have no access to page-A.
This is not possible with HTML only.
As you can read on the Firefox Bug Report Nr. 638598 this is mentioned long time ago! Also many people don't like that behavior, but Jonas Sicking says in his comment that this will never change. He sees that as a feature that firefox prevent this potential hacking functionality.
if you don't know him read here that he is the Tech Lead of the web-api project at mozilla as well as an editor for the indexeddb and file-api specifications at W3C.
Other people tried to find solutions like Matthew but this example didn't work in my short test case with your html structure. Some others say that it should work with JavaScript and the scrollTo() Function.
I'm sorry for saying that this is a limitation of FireFox only, but hope you are happy to be safe in the knowledge about that problem.
I already ran into this issue. In my case I could not use a javascript solution because my iframe was in a different domain and I had no access to the parent page.
But there is a HTML workaround.
Change your link from this:
jump link
To this:
<a target="_parent" href="http://parenturl.com/#my-id">jump link</a>
And create a invisible <div id="my-id"></div> in your parent page and position it using CSS.
Mmm, just a thought, have you reset margins for the iframe? FF tends to do weird things when you don't explicitly specify margin attributes.
Using <noscript> inside of another tag seems to cause it to take on its own style (that is, none), and forces the text inside to take its own line (even if display:inline is set with CSS). Is there any way to avoid this, or a workaround to use instead?
Here is what I mean: http://www.webdevout.net/test?01I
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
p { font-family:sans-serif; font-size:12px;}
noscript {display:inline !important;}
</style>
</head>
<body>
<p>This is some text<noscript> that should be displayed on the same line with the same style if JS if disabled.</noscript></p>
</body>
</html>
I would recommend a different approach over using script/noscript tags.
Something like this works best:
<!DOCTYPE html>
<html class="noJS">
<head>
<title>noJS Demo</title>
<style type="text/css">
html.noJS .jsRequired,
html .noJS{
display: none !important;
}
html.noJS span.noJS{
display: inline !important;
}
html.noJS div.noJS{
display: block !important;
}
</style>
<script type="text/javascript">
function onDocumentLoad(){
var html = document.getElementsByTagName("html")[0];
html.className = html.className.replace("noJS", "");
}
</script>
</head>
<body onLoad="onDocumentLoad();">
<p>This is some text<span class='noJS'> that should be displayed on the same line with the same style if JS if disabled.</span></p>
</body>
</html>
Of course, if you use a framework like jQuery the JavaScript is even easier, just remove the JS function and the function from the body, then just use the following JS:
$(document).ready(function(){
$("html").removeClass("noJS");
});
Old but still relevant question - http://www.tigerheron.com/article/2007/10/alternative-noscript-tag presents an excellent and very simple solution:
"Insert the following code into the <head> section of your Web page:
<script type="text/javascript"> document.write('<style>.noscript { display:none }</style>'); </script>
When you need to use <noscript> inline, use <span class="noscript"> instead."
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
p { font-family:sans-serif; font-size:12px;}
</style>
</head>
<body>
<script type="text/javascript">document.write('<p>This is some text</p>');</script>
<noscript><p>This is some text that should be displayed on the same line with the same style if JS if disabled.</p></noscript>
</body>
</html>
Something like this should do what you want. You should of course use unobtrusive methods instead but I guess that´s above par for now.
Have you tried putting an element like a span inside the noscript tag, and then styling the span? It's a long shot, but might work.
Alternatively, get very specific with your selector and give that a shot. Something like #content p noscript { display:inline !important; } might work. But it might also be insoluble.
As a last resort, you could ditch the noscript tag and put in a span (or your element of choice) and give it a class of noscript -- then remove that first thing in your js.