So given this HTML, the background image loads just fine in Firefox, IE and Chrome. But in Safari, it just ignores it.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 141.72999572753906 255.1199951171875">
<image xlink:href="http://labels.labellogiclive.com/alfresco_10_p1_alf001_uk__v0.svg" preserveAspectRatio="none" x="0" y="0" width="141.73" height="255.12"></image>
</svg>
</body>
</html>
Now I thought it might be a server issue, not giving the correct headers, but I've checked and it looks good (image/svg+xml). So I'm at a bit of a loss... Any ideas?
Safari struggles with deeply-nested SVG <image> elements.
See, for instance, the comments here: Embed SVG in SVG?
Your first <image> loads another SVG, which itself includes an <image> that loads the background photo. If you merge the innermost <image> element (the photo) into the outermost SVG, it works fine.
I've submitted a bug report with Apple via the Apple Bug Reporter with a Bug ID of 21959574. Hopefully someone at Apple will take note and fix the underlying issue.
Related
Note: This is a pretty unique problem, and I am not sure if this is even possible to solve.
Problem is, I need to embed a video file in a web page. I have the limitation that I can only set the src of an <img> tag, and need to embed a video that way.
Playing a video in an SVG itself is possible like this:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="300">
<foreignObject width="400" height="300">
<video xmlns="http://www.w3.org/1999/xhtml" width="400" autoplay="" loop="" muted="" crossorigin="anonymous">
<source src="data:video/mp4;base64,${content}"></source>
</video>
</foreignObject>
</svg>
That itself works (see the demo), but if I include it in an <img> tag, this happens:
(Screenshot in case it doesn't work on your browser: )
Is there a way to fix that, or is that just impossible? If it is limited by something, where can I read up on that limitation?
When I try to write a £ sign on to canvas
context.fillText("£ ",600,165);
The output will write  £ to the canvas object, anyone got ideas on what to do... I tried
context.fillText("£ ",600,165);
but that only writes £ to the output object.
it's likely not to work if encoding of the page isn't defined. try this in the html page at the very top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> <!-- THIS ONE !! -->
blabla...
example below show it works when it is a html5 page with utf-8
document.getElementById("myCanvas").getContext("2d").fillText("£ ",10,10);
<canvas id="myCanvas" width="300px" height="50px">no html5 support</canvas>
I am trying to put processing sketches with multiple .pde files(tabs or classes) on my website, but it does not seem to be working. You should be able to click and make balls appear that bounce around the screen. However, it does not seem to be registering that there is a second .pde file, and therefore, the sketch does not work fully.
<!DOCTYPE html>
<html>
<head>
<script src="processing.min.js"></script>
<title>Projects</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="../css/projects.css"/>
</head>
<body>
<canvas data-processing-sources="ball/Ballbounces.pde" ></canvas>
<canvas data-processing-sources="ball/Ball.pde" ></canvas>
</body>
</html>
http://willhay.io/processing/
A regular one file sketch works fine, I think it has something to do with the fact that this sketch has a ball.pde class for the balls that are supposed to appear.
Figured it out, it was as simple as typing the other .pde file you wanted to load after the one you chose like so (with a space):
<canvas class="project" data-processing-sources="ball/Ballbounces.pde ball/Ball.pde" ></canvas>
I'm building a webpage in Notepad. I'm using html5 for the first time. I believe I did the correct coding to insert these images but they don't show up on the page. Here is the code: I could use some help, please. Thank you.
<html>
<head>
<title>My practice website</title>
<meta charset="utf-8">
<html lang="en">
<meta name="keywords" content="html, css, javascript, history, poems, poetry"/>
<meta name="description" content="This site is about my personal life, poems, poetry, images of family, myself"/>
<meta name="author" content="schweidel tyson">
<meta http-equiv="refresh" content="30" />
<link rel="stylesheet" type="text/css" href="mainstyesheet.css"/>
<body style="background-color: #ccffff;">
</head>
<body/>
<h1>Welcome to my website</h1>
<img src="http://www.html.net/logo.png"/>
<p>This is basically a personal website build to showcase my fledging talent in webdesign to put up pictures of my family and friends. I also like poetry, so there will be some poems.</p><b/>
This is a link to a good html tutorial<br/><br/>
This is another great tutorial link<br/><br/>
A tutorial for styles link
<img src=My practice website/My Website/images/high yellow.jpg" width="192 height="256"/><alt="African Amereican light-skined woman"><br/><br/>
<img src="http://www.zimbio.com/My website/images/trendy.jpg" width="352" width="400"/><alt="African American Woman">
<img src="My practice website/My website/my new pic.jpg" width="104" height="104"/> <alt="me at the domiciliary">
</body>
</html>
Your HTML is a bit off:
<img src="..." width="104" height="104"/> <alt="me at the domiciliary">
alt is just the alternate text for the image. It's an attribute just like width, src and height:
<img src="..." width="104" height="104" alt="me at the domiciliary" />
Also, make sure your URLs are correct.
Also, without a DOCTYPE, your markup is invalid. Include a DOCTYPE (here's a HTML5 one):
<!DOCTYPE html>
<html>
...
I have started HTML. I am making tables in it. I just tried breaking the webpage into two by adding a sidebar at the left but I am confused with its size. What is the standard size of a webpage? Here is my code,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Inter Notes Homepage</title>
</head>
<body>
<table>
<tr height="50">
<td width="200" height="610"></td>
<td width="800" ></td>
</tr>
</table>
</body>
</html>
There is no standard size to a webiste as such as it will vary according to the screen size of the user. You can generally do one of two things. You can work in % based measurements, where the tables sizes can be set to stretch the full browser size for example as 100%, or any other size for that matter.
The alternative is to use fixed widths such as pixels. Generally, we design sites to fit a 1024x768 screen resolution as a minimum. This roughly translates into 950px or 960px wide.
All depends on the design of the site as to which is a better option for you. I am more a fan of fixed width designs.