It's all in the question but here's a simple example
<!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>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<title>TEST</title>
</head>
<body style="margin:0;padding:0">
<div style="background-color:#eeeeee;margin:auto;height:500px;width:500px">
<div style="position:relative">
<span style="position:absolute;display:block;height:250px;width:250px;background:green;z-layer:2"><br /><br />Should be on top</span>
</div>
<span style="position:relative;display:block;width:500px;background:blue;z-layer:1">Actually on top</span>
</div>
</body>
</html>
instead of "z-layer" use "z-index"
also the absolute span is in a relative div with no z-index
Here is the correct html:
<div style="background-color:#eeeeee;margin:auto;height:500px;width:500px">
<div style="position:relative;z-index:2">
<span style="position:absolute;display:block;height:250px;width:250px;background:green"><br /><br />Should be on top</span>
</div>
<span style="position:relative;display:block;width:500px;background:blue;z-index:1">Actually on top</span>
</div>
It happens because when you position an element "absolutely" it is removed from the flow of the document in the Document Object Model and so elements that remain in the flow of the document appear "above" the removed element. For cross-browser compatibility place your z-index adjustments on the parent element of the absolutely positioned element.
Related
I'm trying to get rid of <center tag in my HTML, but apparently it is not so easy in some cases.
This answer: HTML: Replacement for <center>
also did not work for me.
The following example is supposed to center both Foo and Bar, but it does not center Bar. What is wrong here?
<!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=UTF-8" />
<title>Title</title>
</head>
<body>
<div style=" margin: 0 auto; text-align:center;">
Foo
<table>
<tr>
<td>Bar</td>
</tr>
</table>
</div>
</body>
</html>
If I replace <div> with <center> then everything works as indended, but <center> tag is deprecated...
Your current code centres the containing div but since it has width: auto (the default), it expands to fill the horizontal space available. This means that being centred puts it in the same position as if it was left (or right) aligned. If you want to centre that element, give it a width … but it doesn't look like that is what you want to do.
If you want to centre inline content (such as the text "Foo"), then apply text-align on the container.
If you want to centre block content (such as that table), then apply the auto margins you are using to that block content (not the container).
See also Centring using CSS
It seems inheritance works for color but when I try to inherit the color its anchestor p, the list cannot take the color..Why does inheritance not work in this case?
<!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>CSS (1)</title>
<style type="text/css">
p#parag{color:#009;}
</style>
</head>
<body>
<p id="parag">
<ul id="nav">
<li>test</li>
</ul>
</p>
</body>
</html>
<ul> is a block-level element.
<p> cannot contain block-level elements - from the HTML 4.01 spec:
The P element represents a paragraph.
It cannot contain block-level elements
(including P itself).
So the browser is attempting to fix this error and produces this HTML:
<p id="parag"></p>
<ul id="nav">
<li>test</li>
</ul>
<p></p>
The solution is to simply change the <p> to a <div>.
<ul> (block level) is not valid within a <p> tag - no block levels allowed within <p> tags!
http://webdesign.about.com/od/htmltags/p/bltags_paragrap.htm
I was just playing around with CSS positioning and I have got a few doubts regarding the the elements being rendered in browsers? Would someone please explain to me why this is?
HTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="background:#ccc;height:150px;width:300px;">
parent div
<div style="background:#ff0;height:50px;position:absolute;">
child div
</div>
</div>
</body>
</html>
1.Why is the child div being displayed in-line with the content of the parent div in IE6 but not in Safari?
2.And when I positioned the child div absolute,it lost its width? But if I specify width:inherit it gets its full width back in Safari but not in IE6[i know inherit is not supported in IE].
Thank You
Absolutely-positioned block-level elements are supposed to live in their own formatting context. Furthermore, since div is a block-level element, the child is supposed to go on a new line instead of inlining with the parent's content. And of course, one can't expect IE6 to know all this.
Absolutely-positioned block-level elements do not expand to fit their container if you do not give them a width.
I have a problem with white space after an absolute span in a relative container div, white space is with no effect, but in case it is replaced with white space Unicode (which is &nsub), IE renders it successfully.Although I have tested it FF and it the result was the same.
More details:
I am using win7 OS
Ie 8
ANd this is my html 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>
<body>
<div style=" display:inline;position:relative;">
<p>
<div style=" display:inline;position:relative;">
<span style=" display:inline;position:absolute;">x</span> y
</div>
</p>
</div>
</body>
</html>
Whitespace is indeed meaningless in HTML and to force space you can use the HTML entity .
To have the text appear to the right of the span you can make that span float instead of absolute positioned:
<span style="float: left;">x</span>
Then you can set its right margin to decide exactly how much space to put, for example:
<span style="float: left; margin-right: 15px;">
Live test case: http://jsfiddle.net/fg8NF/
Given the html fragment
<!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>Test JQuery AppendTo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
</head>
<body>
<div id="Test1">
<p>Just some text</p>
</div>
<form name="FORMPOST" method="post" action="showform.aspx" id="FORMPOST" >
<label for="Test2">Test Label</label>
<input id="Test2" type="checkbox" />
<img src=\"add2.jpg\">
</form>
</body>
</html>
and given that the add2.jpg image is in the same directory as the html code, why does the image not display? Note that if I move the image tag node to be inside the div node, it will display :(
Note the display does not appear regardless of whether I add the img tag at design time as above, or append it using the jQuery.appendTo function when the form loads.
For one, you shouldn't have back slashes there for quotes. Can you give us a link to the page itself? Because that will work.
Were the backslashes in <img src=\"add2.jpg\"> a typo? <img src=\"add2.jpg\"> should be <img src="add2.jpg" />.
You need the forward slash to end the img tag because you are using XHTML.
Your image tag doesn't look correctly formed to me
<img src="add2.jpg" />
Does this work for you like the above?