I am attempting to use a div to create a background for an SVG image, but the div is not displaying. I'm not sure if it is legal to mix SVG and XHTML with the XHTML inside the SVG?
Here is a snippet of the HTML...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:v="urn:schemas-microsoft-com:vml">
...
<body>
...
<svg:svg class="searchPoint" height="2048px" id="searchPoint" version="1.1" width="2560px">
<div lang="" id="mmh_0" dir="ltr" widgetid="mmh_0" class="mmh"
style="left: -3px; top: -3px; height: 100px; width: 100px; display: block; z-index: auto;">
</div>
<svg:image class="searchPoint" height="15" id="1079043"
title="1079043" width="15" x="1183.0"
xlink:href="http://myHost/myUri/styles/mapIcons/SearchLocation.gif"
xmlns:xlink="http://www.w3.org/1999/xlink" y="1129.0"/>
</svg:svg>
...
</body>
...
For what it is worth, you can put a div inside a VML element in IE.
Yes you can, you need to put it in a foreignObject tag
Related
I have a p:outputLabel in a p:caroussel which should display its right border to match the caroussel, i.e. at the outside of a 400px x 200px frame:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:panelGroup style="width: 400px; float: left;" layout="block">
<p:carousel>
<p:outputLabel value="No preview available" style="width: 100%; height: 200px; display: block;"/>
</p:carousel>
</h:panelGroup>
</h:body>
</html>
It displays the border around an inexplicable frame of 50px x 200px:
MVCE at https://github.com/krichter722/jsf-width-and-height-on-outputlabel.
I'm using Primefaces 6.0.
The solution is surprisingly simple. Don't bother trying to hack this using CSS, but set the numVisible attribute to 1 on your p:carousel.
This worked for me:
<h:panelGroup style="width: 400px; float: left;" layout="block">
<p:carousel numVisible="1" itemStyle="height: 200px;">
<h:outputText value="No preview available"/>
</p:carousel>
</h:panelGroup>
Also note that you can use itemStyle to set the height of your item (if you need a fixed height).
...don't mind the cursor ;-)
I have written some code where a div should overlap IFrame. In Chrome its working fine, where as in IE IFrame overlaps div. Below is the code. Any idea on how to fix this issue such that it works fine with both IE and Chrome?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IFrame Div</title>
</head>
<body>
<div top="86px" left="5px" width="500px" height="500px" z-index="20000" style="width: 1000px;
border-color: red; height: 500px; position: absolute !important; border-color: red;
left: 5px; top: 86px; border-width: 5px; background-color: #E6E6E6; opacity: .8;">
</div>
<iframe src="http://samplepdf.com/sample.pdf" height="700px" width="600px"></iframe>
</body>
</html>
Give the iframe: z-index:-999;
Or you could use in-line CSS: <iframe src="http://samplepdf.com/sample.pdf" height="700px" width="600px" style="z-index:-999;"></iframe>
I have a parent div with a flash movie in it.
I rotate the parent div, so I expect that the flash movie is also rotated.
Unfortunatly this doesn't happen. The flash movie has no rotation.
This is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.rotate
{
position: absolute;
top: 100px;
left: 250px;
width:800px;
height: 800px;
background-color: #f00;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
</style>
</head>
<body>
<div class="rotate">
<h1>Youtube Flash Video:</h1>
<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/KMU0tzLwhbE?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/KMU0tzLwhbE?version=3&hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>
</body>
</html>
And this is how it looks like in the browser
Do you know how I can get this flash movie rotating with its parent?
Thanks a lot!
Vincent
The new way of youtube embedding solved my problem.
http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html
Doctype:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
HTML:
<a href="http://www.somelink.com">
<img src="images/someimage.jpg" alt="sometag" />
</a>
CSS:
div.something img {
display: inline;
border: none;
}
Firefox shows them just fine, IE just adds a little inlined box (presumably where it expects text to be?) with a purple-ish border that IE uses for visited links. It occurs in all versions (6, 7 and 8).
Using the following HTML, I was able to reproduce your problem:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div.something img
{
display: inline;
border: none;
}
div.something a
{
border: 0;
}
</style>
</head>
<body>
<div class="something">
<a href="http://www.somelink.com">
<img src="images/someimage.jpg" alt="sometag" />
</a>
<a href="http://www.somelink.com">
<img src="images/someimage.jpg" alt="sometag" />
</a>
<a href="http://www.somelink.com">
<img src="images/someimage.jpg" alt="sometag" />
</a>
</div>
</body>
</html>
The problem with this is that the whitespace between the end of the opening "a" tag and the start of the "img" tag is considered to be part of the link.
Replacing those with:
<img src="images/someimage.jpg" alt="sometag" />
solved the problem in IE8 for me.
EDIT: Removed the CSS. Turned out not to be necessary.
You need to set border="0" on your image tag, that will resolve the issue. IE when an image is inside a link, automatically puts the "link" border around it, to show it is a link.
You might also be able to use CSS to set the border to 0 for the img tag
I have this simple xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
</head>
<body style="height: 100%;">
<div style="height: 100%; overflow: auto; background-color: #00f;">
<div style="height: 400px; margin-bottom: 2000px; background-color: #f00;"></div>
</div>
</body>
</html>
It shows two rectangles - but the lower (blue) one doesn't show the 2000px margin. It is only as tall as the window. Why? Or more importantly, how do I make it to show? I can add some dummy text like 'aaa' between those two </div> </div> but I don't feel that's the right way of doing it.
Thanks a lot for help!
If you want 2000px of blue beneath the 400px div, make this change:
Change the height of the containing div to be the height of it's contents + the 2000px space.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head> </head>
<body style="height: 100%;">
<div style="height: 2400px; overflow: auto; background-color: #00f;">
<div style="height: 400px; background-color: #f00;">
</div>
</div>
</body>
</html>
Remove your height: 100% from <body>:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
</head>
<body>
<div style="height: 100%; overflow: auto; background-color: #00f;">
<div style="height: 400px; margin-bottom: 2000px; background-color: #f00;"></div>
</div>
</body>
</html>
Get rid of the height declaration in the blue background div.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
</head>
<body style="height: 100%;">
<div style="background-color: #00f;overflow:auto">
<div style="height: 400px; margin-bottom: 2000px; background-color: #f00;"></div>
</div>
</body>
</html>
It's because you have a height set on the containing div. Margins aren't content, so they don't trigger overflow. You could add another div around the innermost div, and give it a 1px padding, or, as others have suggested, you could adjust your existing containing divs.
lotusvskoi: Thanks but then the body scrolls, not the outer div.
endash: Yes! This is it! Thank you a lot, also for the explanation. Wrapping the innermost div inside another div with padding: 1px works great!
Final version, for archiving:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
<style>
</style>
</head>
<body style="height: 100%;">
<div style="height: 100%; overflow: auto; background-color: #00f;">
<div style="padding-bottom: 1px;">
<div style="height: 400px; margin-bottom: 2000px; background-color: #f00;">
</div>
</div>
</div>
</body>
</html>