My source code is:
<!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="it" lang="it">
<head>
<title>Hi</title>
</head>
<body>
<div id="content">
<a href="product_displayer.cgi">
<div style="background-image: url('../res/images/background.jpeg')">
<img src="../res/images/products/thumbnails/image.png" alt="hello"/>
<p>Hello hello hello</p>
</div>
</a>
</div>
</body>
</html>
If I try to validate the code, the W3C validator giving me this error:
document type does not allow element "div" here; missing one of "object", "ins", "del", "map", "button" start-tag
How can I solve it?
<a href="product_displayer.cgi">
<div style="background-image: url('../res/images/background.jpeg')">
In XHTML 1, you cannot have a div inside an anchor.
Either don't use a div (or a paragraph) or use HTML 5 which does allow that.
Related
I am trying to position a <span> relative to a particular image. I must use the XHTML Transitional doctype because that is what the application has been using since years before I ever laid hands on it and too much depends on it.
The following code correctly positions the <span> way off to the side:
<html>
<head>
<style type="text/css">
span.tooltip {
z-index:1000;
position:absolute;
top:200;
left:600;
}
</style>
</head>
<body>
<span class="hasTooltip">
<img src="https://www.google.com/images/srpr/logo3w.png" />
<span class="tooltip">Tooltip!</span>
</span>
</body>
</html>
However, this code breaks the <span> position, and it always appears in the same spot no matter what the left or top values are:
<!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">
span.tooltip {
z-index:1000;
position:absolute;
top:200;
left:600;
}
</style>
</head>
<body>
<span class="hasTooltip">
<img src="https://www.google.com/images/srpr/logo3w.png" />
<span class="tooltip">Tooltip!</span>
</span>
</body>
</html>
How can I correctly position this <span> element with the XHTML Transitional doctype?
Use top: 200px and left: 600px. They work in any mode, whereas if you omit `px', it is incorrect CSS code and only works in Quirks Mode.
I have the following:
<!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>Testing PasteHTML.com</title>
<link type="text/css" href="http://optdev.shellprompt.net/css/jquery-ui-1.8.1.custom.css" rel="stylesheet">
</head>
<body>
<div class="notification" id="notification-message">
<div class="ui-widget">
<div style="padding: 0 .7em;" class="ui-state-error ui-corner-all">
<span style="float: right;cursor:pointer" onclick="$x_Remove('notification-message')" class="ui-icon ui-icon-closethick"></span>
<div id="message" style="float:left">Invalid Login Credentials</div>
</div>
</div>
</div>
</body>
</html>
Both the Message and "X" apear outside of their parent div. How do I place them inside their parent?
Here is a demo http://pastehtml.com/view/bngl4k1th.html and I would like it to look like JQuery UI Theme http://tinyurl.com/dbqg2t Alert message
Just been working through the jQuery UI Theme and I was missing the ui-helper-clearfix class once I added that it worked perfectly.
You can either add overflow:hidden to the parent tag or a new div with the clear:both property, before ending the parent tag.
How can be image center horizontally inside smaller or bigger div, (image is variable and can be bigger then his div wrapper or smaller)?
Exist Javascript solution, but i looking for css solution.
The sample code that not working: (html should be not changed only css)
<!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" xml:lang="en" lang="en">
<head>
<title>my test</title>
</head>
<body>
<div id="wrapper" style="width:300px;margin:0 auto;">
<div id="image_content" style="margin:0 auto;">
<img src="image_small_then_300_or_bigger.jpg" />
</div>
</div>
</body>
</html>
Thanks
You want to center align the image_content within the wrapper?
text-align
<div id="wrapper" style="width:300px;margin:0 auto;text-align:center;">
background-image
<div id="wrapper" style="width:300px;margin:0 auto;background:transparent url('image_small_then_300_or_bigger.jpg') 50% 50%;"> good call #gov
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function init(){
document.getElementById('test2').innerHTML = '1 2';
}
</script>
<style type="text/css">
#test{
white-space:pre;
}
#test2{
white-space:pre;
}
</style>
<title></title>
</head>
<body onload="init();">
<div id="test">
1 2
</div>
<div id="test2"></div>
</body>
</html>
Here is an example page showing my problem. I have two divs. Each has this text '1 2' with white-space. The only difference is that one is injected dynamically and one is in the html itself.
If you open the above page in IE7, the text in div test2 doesn't respect white space. How can i get the same behavior for the text that is dynamically injected??
P.S. My doctype is triggering standards mode on IE7.
Have you tried substituting white space with
Alternatively, you could try innerTEXT instead of innerHTML
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