I've tried many tricks found on the web including:
wmode transparent
z-index
WindowlessVideo
But none of them seem to work on Chrome. Works fine on IE and FF.
This version of code is XHTML compliant:
<!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>wmv embed test</title>
<style type="text/css">
#floatingbar { background: thistle; z-index: 9999; position: absolute; width: 500px; height: 60px; border: 1px solid blue; }
#floatingbar2 { background: white; z-index: 9999; position: absolute; width: 500px; height: 60px; border: 1px solid orange; top: 140px; }
</style>
</head>
<body>
<div id="floatingbar"></div>
<object type="application/x-mplayer2" style="width:260px; height:200px;" data="http://nov-exl.com/test/FactFinders.wmv">
<param name="movie" value="http://nov-exl.com/test/FactFinders.wmv" />
</object>
<div id="floatingbar2"></div>
</body>
</html>
If you just wanted to crop the video, you could put it in a div tag with overflow set to hidden. Something like this:
<style>
div#crop {position:absolute;height:100px;top:60px;overflow:hidden}
object, param {position:absolute;top:-60px}
</style>
<div id=crop><object><param /> </object></div>
If you wanted a more custom border or something for your videos, you might be out of luck when it comes to Chrome.
Related
The thing is that there is just the generic favicon of a faviconless page. Any solution is valid, like adding html to the loaded file or configs of the browser.
You could create a HTML page which has a favicon and just add an iframe to it.
Although this may not be what you wanted but in this example it would show a .png file with the stackoverflow icon.
body {
margin: 0px;
padding: 0px;
}
* > iframe.maxsize {
position: fixed;
width: 100%;
height: 100%;
}
.maxsize {
display: block;
width: 100%;
height: 100%;
border: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My File</title>
<link href="https://www.google.com/s2/favicons?domain=stackoverflow.com" rel="icon">
</head>
<body>
<iframe src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="maxsize">
Your browser does not support iframes!
</iframe>
</body>
</html>
Some idea to render this correctly on IE????
The :active only goes if I click out of span area.
I would like to do this without to use javascript.
On chrome and firefox it runs perfectly.
<!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>Documento sem título</title>
<style type="text/css">
a
{
padding:20px;
border:1px;
display:block;
}
a span
{
width:96px;
height:96px;
display:block;
border:1px solid;
}
a:hover
{
background-color:#ccc;
}
a:active
{
background-color:#666;
}
</style>
</head>
<body>
<a href="#">
<span>casa</span>
</a>
</body>
</html>
You can fix this using a pseudo-element for the a-element which is positioned right on top of it:
a {
position: relative;
}
a:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
The drawback is that you can't select any text inside the a-element.
Pseudo-elements are supported by IE8+. A workaround for IE7 would require CSS-Expressions, but as you don't want to use Javascript …
Try this code on your CSS
ul.active_a li a:link { color: red;}
this code may help you.. http://jsfiddle.net/easwee/WVrzu/16/
I tested it IE. its working perfectly.
Good Luck !
The :active code works in all browsers, except IE8 (not 9). I've looked at other similar questions to this and have tried different methods. This is the code:
HTML:
<div id="main" style="color:white;font-family:Georgia">
<div id="button" onmouseup="someFunction()"></div>
<!-- other things -->
</div>
CSS:
#button
{
position: relative;
width: 241px;
height: 41px;
background-image:url("images/buttonStatic.png");
display: none;
}
#button:hover
{
background-image:url("images/buttonHover.png");
}
#button:active
{
background-image:url("images/buttonActive.png");
}
The button displays proper, changes to the second button when I hover over it properly, but doesn't change to the third button when I click on it.
I just tried this out in IE8 and it works fine. Make sure your DOCTYPE specification is declared correctly <!doctype html> and maybe try putting in the IE compatibility meta tag which is something like <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>.
On a side note, you shouldn't be using a <DIV> element as a button like that. You should use <button> or <a> with suppressed behaviour.
Edit
Here's my code...
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Active Button</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.5.0/build/cssreset/cssreset-min.css&3.5.0/build/cssfonts/cssfonts-min.css"/>
<style type="text/css">
.button {
padding: 4px 12px;
border: solid #555 1px;
background-color: #ddd;
}
.button:hover {
background-color: #eee;
}
.button:active {
background-color: #09c;
color: #fff;
}
.frame {
padding: 2em;
}
</style>
</head>
<body>
<div class="frame">
<button class="button">I'm a Button</button>
</div>
</body>
</html>
Your code is fine, it's a known bug (sorry, discrepancy) in IE8.
In light of the answers to the original question I had, I have amended my code. I was hoping if someone could tell me if this is a better approach in comparison. My original post and code is below.
UPDATED CODE
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content= "" />
<title>Example</title>
<base href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrapper {
}
#header {
background-image: url('images/bg-inner-page.gif');
height: 200px;
}
#logo {
float: left;
margin-top: 50px;
margin-left: 100px;
}
#topnav {
float: right;
margin-top: 50px;
margin-right: 1250px;
}
#topnav ul {
word-spacing: 10px;
}
#topnav ul li {
list-style-type: none;
display: inline;
}
#content {
background-color: orange;
}
#footer {
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
logo
</div>
<div id="topnav">
<ul>
<li>home</li>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
ORIGINAL POST
I am new to the world of coding as well as CSS. I am attempting to line up CSS elements however unaware how I can place some sort of lines to get the exact line-height, position, etc. I attempted to use FireBug however to no avail. Is there some of tool I can use that possible places a grid over the canvas?
EDIT
Here is a sample of the code I am working with.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content= "" />
<title>Example</title>
<base href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#wrapper {
}
#header {
background-image: url('images/bg-inner-page.gif');
height: 200px;
}
#logo {
width: 20px;
position: relative;
top: 50px;
left: 100px;
}
#topnav {
width: 500px;
position: relative;
top: 14px;
left: 150px;
}
#topnav ul {
word-spacing: 10px;
}
#topnav ul li {
list-style-type: none;
display: inline;
word-spacing: 10px;
}
#content {
background-color: orange;
}
#footer {
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
logo
</div>
<div id="topnav">
<ul>
<li>home</li>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
It is generally inadvisable to do pixel-by-pixel layout in webpages. You can never tell with which browser, which resolution on which platform and with which fonts installed your future customer will view the page.
Use HTML and CSS to specify a logical layout of the document. Tell the rendering machine, which parts have enphasis, which are less important and so on and let the renderer decide how to represent it the best way on the target display and UI-theme.
If you start worrying about pixel-exact line heights, your page most probebly will look swell on one browser, in one resolution on one platform and in the rest of the world like turd.
Move from physical mark-up to logical mark-up.
The Web Developer Extension for firefox ( http://chrispederick.com/work/web-developer/ ) has a grid function.
Alternatively, in html/css, you can create an overlaying, full-screen div with a grid background to give you the visual, but its not the best solution since you'd also have to make it the highest z-index element, or make all other elements have a background of transparent, which could screw with your design.
Highly suggest just using the plug in, you don't want to mix in html/css just as a developer tool too much.
<subjective>Whilst I agree with the sentiment of "don't do pixel-level design", sometime the requirements of the project demand it. Using a reset css like YUI-reset is one of the better ways to have most browser renderings consistent, but also requires you have stye declarations for all the elements from the ground up. </subjective>
I agree with Hyperboreus above, trying to make the site exactly the same in all browsers is a recipe for a headache.
But, I've often used xscope (http://iconfactory.com/software/xscope) to overlay guidelines and grids on my mac to line things up. It's not free, but it's well worth the $25.
Edit: Just saw your code. If you're just trying to get the logo and nav on the same line, try something like this:
<title>Example</title>
<base href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#header {
background-image: url('images/bg-inner-page.gif');
height: 200px;
}
#logo {
width: 20px;
float: left;
margin-top: 50px;
margin-left: 100px;
}
#topnav {
width: 500px;
margin-left: 150px;
margin-top: 14px;
}
#topnav ul {
word-spacing: 10px;
}
#topnav ul li {
list-style-type: none;
display: inline;
word-spacing: 10px;
}
#content {
background-color: orange;
}
#footer {
background-color: blue;
}
</style>
<div id="wrapper">
<div id="header">
<div id="logo">
logo
</div>
<div id="topnav">
<ul>
<li>home</li>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
You can see it here: http://jsfiddle.net/BRKrx/
In example bellow when you hover on icons cursor should be changed to different. It works except of IE 8. On IE 8 these icons turned to be unclikable, i.e. not only cursor are not changed, but also Jquery click event does not fire. Consider how the following html code works at FF, IE7 and eventually at IE8:
<!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>
<title>CSS IE 8 cursor test</title>
<style type="text/css" media="screen">
.icon-button {
float: left;
cursor: pointer;
}
.ui-icon { width: 15px; height: 10px; background-image: url(http://sstatic.net/so/img/replies-off.png); }
</style>
</head>
<body>
<div class="icon-button ui-icon"></div>
<div>Sample Text</div>
</body>
</html>
What migth be the root of problem? What could be possible workarrounds?
Thanks in advance.
P.S. Changing DOCTYPE is not really possible.
Also if I remove float: left on this example it seems like "fixed", but when I remove it on a website, besides broken design, it does not help also.
IE8 doesn't like empty divs. Putting a blank <img/> with a transparent pixel inside the div seems to fix it.
Demo: http://jsbin.com/asiju (Editable via http://jsbin.com/asiju/edit)
HTML source:
<!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>
<title>CSS IE 8 cursor test</title>
<style type="text/css" media="screen">
.icon-button { float: left; cursor: pointer; }
.ui-icon { width: 15px; height: 10px; background-image: url(http://sstatic.net/so/img/replies-off.png); }
.dummy-image { width: 15px; height: 10px; vertical-align: top; border: none; }
</style>
</head>
<body>
<div class="icon-button ui-icon"><img class="dummy-image" src="data:image/gif;base64,R0lGODlhAQABAJH/AP///wAAAMDAwAAAACH5BAEAAAIALAAAAAABAAEAQAICVAEAOw=="/></div>
<div>Sample Text</div>
</body>
</html>
I don't know any hack to beat it. But, if smth could be clicked it should be in a tag, so insert a and maybe display:block. href could be =#. That solution seems to be semantic and good for me :)
How about:
<a href="whatever.php">
<div class="BG IMAGE" style="cursor:The one you want"></div>
</a>
I use it myself and it works fine.
Take out the float:left and the css class looks like below.
.icon-button { cursor: pointer; }
It should work.
This just worked for me in IE8, super simple
cursor: pointer !important;