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
Related
here is my test 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>
</head>
<style>
*{
margin:0;
paddin:0;
}
.warp{
background:#0F6;
position:relative;
width:100px;
height:100px;
left:50%;
}
.line{
position:fixed;
width:10px;
height:120px;
background:#F00;
}
</style>
<body>
<div class="warp">
<div class="line"></div>
</div>
</body>
</html>
in chrome and ie10 the "line" div is on left side,but in firefox,it stay with div "warp", the "line"
is a "fixed position" div, it should rendered like chrome and ie ,i think.
http://jsfiddle.net/AWdqY/
You can simply define the left property on the element (left: 0).
http://jsfiddle.net/AWdqY/1/
<!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 type="text/css">
body {
margin: 0px; padding:0;
background:url(http://custdemos.com/synverse_portfolio/images/safercab_mobi.png) no-repeat left bottom;
height:100%
}
</style>
</head>
<body>
<div class="do">
X Content
</div>
</body>
</html>
I need to put that background image on body bottom, plz if anybody knows this issue tel me.
You need to give a min height to body. Here is the corrected jsFiddle link. Following is also modified css
body {
margin: 0px;
padding:0;
background:url(http://custdemos.com/synverse_portfolio/images/safercab_mobi.png) no-repeat left bottom;
min-height:500px;
}
The following code does not work in IE. The DIV does not span entire page despite the fact it is set to left:0px and right:0px. Body element has big width according to debugger.
Why?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div align="center" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color: red">
Some text
</div>
</body>
</html>
Yo can't use"left: 0; right: 0; " either left or right and same with top bottom in same container.
Use This
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div align="center" style="position: absolute; left: 0; top: 0; background-color: red">
Some text
</div>
</body>
</html>
Actually, margins are not required. and it is working here in IE also !
position: absolute; width:100%;height:100%;background-color: red;
if you want to use the whole page. use width:100% and height:100%
I have a little issue w/ an element displaying in IE9
the structure:
<div id="container">
<a id="logo" href="#">stuff here</a>
</div>
the problem is that the container has a height of 47px and the anchor has a height of 65px. In chrome, ff, opera etc the overflow of the anchor is visible but cut off in IE9.
this is the css for the container and anchor
#container{
width:100%;
height:47px;
overflow visible;
}
#logo{
background:url('path/to/myimage');
display:block;
float:left;
height:65px;
}
and this displays great in everything except IE... any ideas? thanks in advance.
You must to declare Doctype For IE all versions:
<!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 type="text/css">
#container{
width:100%;
height:47px;
border:1px solid red;
}
#logo{
background:url('path/to/myimage');
display:block;
float:left;
height:65px;
border:1px solid blue;
}
</style>
</head>
<body>
<div id="container">
<a id="logo" href="#">stuff here</a>
</div>
</body>
</html>
I have problem with width using percentage in Mozilla Firefox.
In Firefox:
In Opera:
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=iso-8859-1">
<meta name="author" content="adminite">
<title>Untitled 2</title>
<style>
#cont {
width:99.8%;
height:125px;
border:1px solid red;
background-color:#1ea1de;
margin: 0px 0px 0px 0px;
}</style>
</head>
<body>
<div id="cont">
</div>
</body>
</html>
A possibility is that you haven't reseted the browser default styles.
Try:
html, body{
margin: 0;
padding: 0;
}
If that's the case, you might benefit from using a reset stylesheet such as this one:
http://meyerweb.com/eric/tools/css/reset/