white space after absolute element - html

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/

Related

Div not taking 100% width with position absolute and old doctype in IE

Div not taking 100% width with position absolute in IE. It render on quirks mode in IE. There is any way to make div 100% width without changing doctype and without specify width
<!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=utf-8">
<title>Untitled Document</title>
</head>
<body>
<div style="width:500px;">
asfdsaf
<div style="background:#ff0000; position:absolute; height:8px; left:0; right:0"></div>
</div>
</body>
</html>

Getting rid of <center> tag

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

How can I solve this clear off inconsistency in Firefox and IE7?

When I am clearing an element in Firefox4,it goes to the next line leaving some spacing in between and in IE7, it goes to the next line without leaving any space..
<!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>
<style type="text/css">
#a{border:#000 thin groove;float:left;}
#b{border:#000 thin groove;float:left;clear:left;}
</style>
</head>
<body>
<p id="a">Testing</p>
<p id="b">Testingb</p>
</body>
</html>
Most browsers now have a default margin-top and margin-bottom greater than zero for p elements. Internet Explorer doesn't.
Adding p { margin: 0; } to your styles will fix it.

How do I solve the following issue in QUirks mode?

I have an element with a width 200px.It has a left and right padding of 100px each. In IE7,IE8 and firefox 4,it appends the padding to the elements width.However, In IE Quirks mode, the padding is not appended and the width remains 200px.How can I fix 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" />
<title>Untitled Document</title>
<style type="text/css">
#t1{float:left;border:#000 thin groove;width:200px;padding:10px 100px 10px 100px;}
</style>
</head>
<body>
<p id="t1">This is child 1</p>
</body>
</html>
By not using quirks mode. Quirks mode uses a broken box model, so this is expected behavior of that rendering mode.
You're already using standards mode with a proper doctype declaration; what's causing quirks mode to be triggered on IE?

Why is my element with position:absolute always showing up underneath position:relative items?

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.