This is my code. http://furkan.brove.net/syflm.php
It is not working in Chrome when i print it. I wish it puts header and footer on every page in print mode. Also in every browser last footer is going bottom of the content. But i want it to be bottom of the page.
Is there any way to solve my problem?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>Brove.NET ISO Yazılımı</title>
<link rel="stylesheet" type="text/css" href="css/pagination.css" />
<style>
#all thead { display: table-header-group; }
#all tfoot { display: table-footer-group; }
.header_table{ height:100px; }
.footer_table{ height:100px; }
</style>
</head>
<body>
<table id="all">
<thead><tr><td><table class="header_table"><tr><td>Your header goes here</td></tr></table></td></tr></thead>
<tfoot><tr><td><table class="footer_table"><tr><td>Your footer goes here</td></tr></table></td></tr></tfoot>
<tbody>
<tr><td>
Page body in here -- as long as it needs to be<br />
<!-- i wrote this many -->
</td></tr>
</tbody>
</table>
</body>
</html>
This is IE screenshot. In second page it puts header and footer well.
This is Firefox screenshot. It is working too.
But in chrome it is not working
This is a known issue with Webkit, unfortunately.
Here it is on the Chrome issue tracker: http://code.google.com/p/chromium/issues/detail?id=24826
And the Webkit issue tracker: https://bugs.webkit.org/show_bug.cgi?id=17205
Star it on the Chrome issue tracker if you want to show that it is important to you (I did).
Related
I have an input field which currently looks like this:
I would prefer the value to be hidden like this:
Here is the kicker, I know that giving the field a type=password will do this, but unfortunately the software I am using brings over 2 password fields in this case. So, I am left with a standard text input to create the effect.
My hope is that there is some CSS styling that I can do to the field id in order to hide the input information. Thanks for you attention to this issue.
You could just use:
input { -webkit-text-security: disc; /* Default */ }
as described here
Here is also a dirty hack for other browsers
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="txt/javascript">
<script type="text/javascript">
function replaceT(obj){
var newO=document.createElement('input');
newO.setAttribute('type','password');
newO.setAttribute('name',obj.getAttribute('name'));
obj.parentNode.replaceChild(newO,obj);
newO.focus();
}
</script>
</head>
<body>
<form>
<input type="text" name="password" onfocus="replaceT(this)">
</form>
</body>
</html>
I am trying to construct a simple pixel-art game in html.
The basic idea is to make a fixed-size div inside which I am placing my images in pixel coordinates. I would like to keep individual img tags as I then can easily work with the mouse events (clicks) on them. I have this up and working:
<!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" />
<style>
.game_area {
position:relative;
}
</style>
</head>
<body>
<div class="game_area" style="width:320px;height:160px;" >
<img src="field_base.png" style="position:absolute;left:0px;top:0px;" />
<img src="field_base.png" style="position:absolute;left:16px;top:8px;" />
</div>
</body>
</html>
This is just a very basic test. "field_base.png" is a sample image 32x16 px in size:
Works fine.
Now I want to scale the whole thing to somewhat better visible, but I want to retain the pixel visuals. For a simple image I found this solution:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.pixelart {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
</style>
</head>
<body>
<img src="example.png" width="75%" class="pixelart" />
</body>
</html>
example.png is a pixel-art-image with size 168 x 97. Chose anyone you like.
This also works fine.
My question is now: can I get both together? Can I somehow "scale" my div-container in the upper example to, e.g., 75% page width, but keeping the pixel-content and pixel-based coordinates for the images inside?
Or do I have to use the canvas element and do the mouse interaction the hard way?
I can't set the font-size of a text input from the style sheet. However, it works fine by setting the style attribute.
This works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text-htmlcharset=utf-; 8" />
<title>Test</title>
<style type="text/css">
#about {
}
</style>
</head>
<body>
<input id="about" type="input" value="anything" style="font-size:21pt;" />
</body>
</html>
This does not work (font-size is ignored):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text-htmlcharset=utf-; 8" />
<title>Test</title>
<style type="text/css">
#about {
font-size:21pt;
}
</style>
</head>
<body>
<input id="about" type="input" value="anything" />
</body>
</html>
What am I missing? Surely, you're not expected to use inline style for all text inputs? That seems pretty tacky and redundant in some cases. Thanks a bunch!
Change <style type="text/javascript"> to <style type="text/css">
You are confusing the browser because it is looking for JavaScript code, but you are feeding it CSS. <script> tags should be used for javascript, and <style> tags for CSS.
Your style block has a type of text/javascript. Remove that and it'll work fine.
I have the following sample code and noticed that if I attempt to use the declaration display:inline-block on the div element content, it doesn't place its descendants or children side by side.
The only way for me to have the p element appear adjacent to one another is to apply the style to the p selector. Does this mean I cannot use display: inline-block on descendants, children and siblings?
Code
<DOCTYPE public HTML "-//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" xml:lang="en" lang="en">
<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="" />
<meta name="copyright" content="© 2012" />
<title>Inline-block</title>
<base href="" />
<link rel="stylesheet" href="" />
<style type="text/css" media="all">
p {
display: inline-block;
width: 100px;
}
</style>
</head>
<body>
<div id="content">
<p>paragraph 1</p>
<p>paragraph 2</p>
</div>
</body>
</html>
inline-block should apply to siblings, but not children. Try something like this:
#content p {
display: inline-block;
}
You need to set the property on the element you want displayed that way. The display property is not inherited by children. Also it should be noted they IE7 only accepts inline-block on elements that are inline by default.
OK so uh.. it seems like XHTML Transitional doesn't wanna take 0 padding...
Help? :|
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Tadah</title>
<style>
body {
width:1440px;
}
* {
margin:0;
padding:0;
}
img {
margin:0;
padding:0;
width:144px;
height:90px;
}
</style>
</head>
<body>
<img src="http://www.gravatar.com/avatar/63ba857eda5875ce057cffd1adf960d3?s=128&d=identicon&r=PG" /><br />
<img src="http://www.gravatar.com/avatar/63ba857eda5875ce057cffd1adf960d3?s=128&d=identicon&r=PG" />
</body>
</html>
The space between the images isn't coming from padding, it is coming from line-height. If you set line-height: 0; in the block that contains the images then they'll fit together without any space between them.
Using <br/> to stack images like that probably isn't the best approach anyway. You might have better luck with explicit positioning or sized <div> elements with background images. What will work best really depends on your specific situation though.