In the example .html file below, the border-width attribute does not appear to be doing anything in either firefox 5 or firefox 3.6.18.
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<style type="text/css">
a:link img {
border-width: 1px;
border-style: solid;
}
</style>
</head>
<body>
<p><img src="thumbs/thumb-avh.jpg" alt="CB" /> A court barony.</p>
</body>
</html>
I have tried 1px, 3px, and 5px, and this does not change the output. Why is the border-width property being ignored?
Are you forgetting to give it a border-color? It defaults to transparent if it isn't explicitly set.
Related
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 want to create multiple background images but for some reason it is not working for me. I have googled online and watched some tutorial videos on youtube. I followed the tutorial instructions step by step but i do not know why its not working for me.
I am using Dreamweaver CS6.
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1
<style type="text/css">
body
{ background: url(images/navi-bg.png) repeat-x 0 85px, url(images/gplaypattern.png) repeat;
}
</style>
</head>
<body>
</body>
</html>
and here are the links to the images:
I want the first image to have backgound-repeat: repeat-x backgound-positon (x): 0 backgound-position (y)85px
the 2nd image should repeat
here is the solution you are missing html and head tag and also forgot closing doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body
{ background: url(http://i48.tinypic.com/23vyd6g.png) repeat-x 0 85px, url(http://i46.tinypic.com/oucxky.png) repeat;
}
</style>
</head>
<body>
</body>
</html>
Idea is this, change your code with this
<!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 type="text/css">
body {
background-image: url(images/navi-bg.png), url(images/gplaypattern.png);
background-repeat: no-repeat, no-repeat;
background-color: transparent, transparent;
}
</style>
</head>
<body>
</body>
</html>
Have look at this jsFiddle Link - http://jsfiddle.net/nFPLN/
<style type="text/css">
body {
background: url('http://oi48.tinypic.com/23vyd6g.jpg'),
url('http://oi46.tinypic.com/oucxky.jpg');
background-repeat: repeat-x, repeat;
}
</style>
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 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/
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.