I have this html line
<body style ="background-color : pink;background-image : url('.\img\summer.jpg') ;" >
it works on IE8 but not firefox ,opera, google chrome or apple safari (only color shows)
I read many post with about this and tried all the solution still not working
on the other hand , if I stick to IE8
<table style="position:fixed;
left:25px;
top:250px;" border=1>
doesn't work , though it works on all the other browsers , see my problem .. I need to use bg image and fixed position together
any ideas ??
Try replacing the \ with /.
Forward slashes are the standard directory separator in HTML pages, and servers won't recognize backslashes. I guess IE converts them into forward slashes automatically.
<body style="background:pink url(img/summer.jpg);">
Concerning your background image, first use forward slashes in the URL that you are using, e.g. ./img/summer.jpg.
Second, remember that the URL of the image is relative to the file where the CSS is located (in this case, the HTML file).
<body background ="someimg.jpg" bgcolor="#33333" >
this should work. i have tested in chrome and it is working fine for me.
hope this helps
the IE 6 and below doesn't know position:fixed, but there are a lot of workaround (als google fore "IE position fixed") - this is just one of them i used some time ago.
to the background-image: i think the main problem here is using backslashes ( \ ) instead of "normal" slashes ( / ) - change that and i will work in other browsers, too.
Related
I have tried everything to get a background image to work but have had no luck.
I'm using most current versions of Windows and IE.
Works fine server side.
Does anyone have an example?
Note: The img tag in the body renders the image just fine.
also tried background:url...
<!DOCTYPE html>
<html>
<head>
<style>
html { height:100%; width:100%;
background-image:url("file://C:\Users\Public\Pictures\Sample Pictures\florida-orlando-resort.jpg");
}
</style>
</head>
<body>
123...<img src="C:\Users\Public\Pictures\Sample Pictures\florida-orlando-resort.jpg"
style="width:100px; height:100px; display:cover;">...456
</body>
</html>
1. Use a single Forward-slash / like C:/Folder/Images/image.jpg (preferred)
2. Escape your backslashes \\ like C:\\Folder\\Images\\image.jpg
Theoretically you should escape also the backslashes that you use in image's src:
<img src="file://C:\\Folder\\Images\\image.jpg">
(or again use simply a single /).
Due to some accidents in programming history Windows paths uses \. You would normally access your image using: C:\Folder\Images\image.jpg.
Browser gateways tries to normalize that issue for you and looks like it works in HTML syntax. CSS style instead (I believe the way it's parsed) needs to follow the escaping directive for unwise characters (\) translating it to a Windows understandable path.
I encourage you to simply forget about \ and use it the way you'd do on a live server:
background-image: url("C:/Folder/Images/image.jpg");
and respectively in HTML
src="C:/Folder/Images/image.jpg"
An additional note is that you should preferably use lowercase folder names.
P.S: from file: environment on Windows (NTFS filesystem) an all-lowercase path might match the desired file, but the same might not work on a live server. Such mistake might lead to small headaches, so try always to use lowercase
See the <swiper-slider> element I'm trying to create here:
https://github.com/leoj3n/swiper-slider
Specifically this file:
https://github.com/leoj3n/swiper-slider/blob/master/swiper-slider.html#L19
Install it and inspect <div class="swiper-button-next"></div> to see how the background-image CSS links to data:image/svg+xml;charset=utf-8,<svg... that, when opened in new tab, reports: error on line 1 at column 11: AttValue: " or ' expected.
If I add the following declaration:
.swiper-button-next {
background-image: url('http://lorempixel.com/output/abstract-q-c-185-114-8.jpg');
}
To the <style> tag after the include, a background image appears so I'm not sure why it's having issues with the data:image/svg+xml.
Any insights as to why data:image/svg+xml for CSS background is failing?
Decoding and re-encoding your data URL, I ended up with this:
url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2027%2044%27%3E%3Cpath%20d%3D%27M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z%27%20fill%3D%27%23007aff%27%2F%3E%3C%2Fsvg%3E");
With the URL-escaped single quotes, this appears to work fine for me in shadow DOM:
http://jsbin.com/qorawe/1/edit?html,css,console,output
I'm not sure why this is working differently inside and outside of a custom element, though.
Remove the encoding "charset=utf-8" and it should do the job.
This worked for me from this Github issue:
One workaround is to replace any quotes inside the url function with url encoded characters:
Double quotes (") replaced with '%22':
my-css-selector {
background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22><path d=%22M5.7 2L4.3 3.4 8.88 8l-4.6 4.6L5.7 14l6-6z%22/></svg>');
}
Tested to work with Polymer 1.4.0, Chrome (Desktop), Safari (Desktop and Mobile), Firefox and Edge. IE11 fails to render the SVG.
I'm trying to make use of execCommand as I thought it is enough for my purpose, but when testing it under IE 8, there is strange thing: only 'italic' options fails to revert (I can set italic but it wont go off for the next execCommand call), or rather the browser cannot recognise that italic was already applied, because when run queryCommandState('italic', false, null)) I receive false. Thing is, that there is problem only with italic other looks ok(actually check couple;-)).
There is another point that I use contentEditable on html element, when I moved it to iframe it worked but I really do not want to use iframes. Furthermore there is styleWithCSS command to force styling html by style attribute rather than by tags like b -> `style="font-weight: bold" But this of course doesn't work in IE too.
Could you please advise or maybe suggest some other tool to handle some basic text editing in html
update: I just run command in js:
document.execCommand(actionToCall,false, args);
it correctly format selected text in my contentEditable:
<div contenteditable="true" type="text" class="myeditor-editable" style="white-space:pre-wrap">
<i>test</i>
</div>
but seccond call do nothing -> it actually tries to append <i></i> again. ( when look at HTML bar in FF console, then I see that there is some manipulation with html but like I said it stays italic)
Edit2: It looks that there must be a conflict in my code as in fiddle it's working(http://jsfiddle.net/kpskxfbo/1/ ), I thought that can be because the result in jsfiddle is returned in iframe but I have try it on my local computer and it looks fine too... I will post update once I found the problem.
I'm using the IE 11 (version 11.0.9431.0), to test our current website and see how it would work when IE 11 will be released with Windows 8.1 mid-October.
What I see on almost all pages is the following message:
HTML1514: Extra "<body>" tag found. Only one "<body>" tag should exist per document.
When I look through the source code, there is no second <body> anywhere. Is this a IE 11 bug? Is this something I should take seriously? The pages work fine btw...
Thanks.
EDIT:
I don't have access to that website anymore, therefore I can't try any new solutions you guys are posting.
If you placed some element (that should appear only inside body) before the <body> tag, the <body> is inserted automatically by the parser (the "Anything else" paragraph) - and this is still valid HTML because body has optional both opening and closing tags. That would mean that the actual <body> is the second one the parser sees. Couldn't this be your case?
My guess is you probably have if IE statements, something like:
<!--[if IE 9]> <body class="ie ie9 lte9"> <![endif]-->
They don't actually work in IE10, let alone IE11 so that's why you'd be getting the extra tag found.
The problem (which is present in IE 10, too) is caused by the element
<script type="text/javascript" src="/_clients/binck_nl/data/js/analytics.js?nl_1377516473" ></script>
It probably modifies the DOM so that IE gets confused.
it's probably your body tag in the css. Replace the body-tag in the css with a class for example .bodystyle {} and refere in your html to it with the tag. That should do the trick.
Hi this may be a very late for suggesting. But, just to help others the probable cause may be any iframe coming in the page which has body tag
I had this same effect showing up in IE10 and IE11 saying there was an extra body tag in the console. What fixed it for me was that I found an element outside of the body that was a div for a spinner while the page loads that should have been within the body.
My guess is that it may be content in the header part which Edge wants in the body part. (If you have a header part).
This works in any other browser but Edge.
I solved this by removing: <header><title>something</title></header> from the tag body. Now edge no longer complains.
Does HTML support a behavior of text rendering where multiple lines will be avoided with an automatic placement of "..." ? Sorry, I just cannot find the style/tag associated with this behavior, if it exists!
No, there is nothing built in.
You need to either do it yourself serverside, or write some JavaScript that will count lines and replace the rest of the line with an ellipsis (...).
There is a text-overflow-mode defined in the CSS3 spec that will do this, but as a working draft it is not final and will not necessarily work on current browsers.
The property you're looking for is the CSS text-overflow: ellipses. Unfortunately it does not work in Firefox. Here is a resource on it:
http://www.css3.info/preview/text-overflow/
You can kind of hack it in Firefox, with e.g.
http://www.jide.fr/english/emulate-text-overflowellipsis-in-firefox-with-css
But the only real cross-browser solution would be a JavaScript one, like this maybe, or perhaps one of the ones in the comments on this page:
http://ajaxian.com/archives/ellipsis-or-%E2%80%9Ctruncate-with-dots%E2%80%9D-via-javascript
Short answer: No.
Longer answer: This is possible if you're using a programming backend (e.g. PHP) that outputs HTML to the front end. You could do something like
<?php
if(str_len($yourText) > 100) {
echo substr($yourText, 0, 100) . "...";
}
?>