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

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.

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>

Why is there a blank line at the top of my html page?

Here is my html code:
<!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" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
kjkj
</div>
</body>
</html>
Lve demo:
http://tinkerbin.com/O2MwkUTj
Why is there a blank line at the top of my web page?
I noticed that removing the div, or removing the doctype fixes the problem...
It is because Tinkerbin is getting confused.
If you put your HTML into a file it works fine. In Tinkerbin, the following happens in the preview:
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div>
kjkj
</div>
</body>
I presume it is removing some tags such as <html>, <head> and <body> when outputting your page in order to display inside a page created for the preview.

How do I fix this element overlapping issue when I zoom in IE7?

When I zoom in in IE7, the element with position relative gets overlapped..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>HTML5</title>
<style type="text/css" media="all">
.wrapper{width:500px;height:1000px;border:1px red solid;}
.block1{border:1px red solid;width:100px ;height:100px;position:relative;}
.block2{border:1px red solid;width:100px ;height:100px;}
.block3{border:1px red solid;width:100px ;height:100px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="block1">A</div>
<div class="block2">B</div>
<div class="block3">C</div>
</div>
</body>
</html>
I tries adding zoom:1 to .block1 also but it didn't work
.block1 {
zoom: 1 ;
}
Try something like this, Hope this helps.

How can I deal with the collapsed parent?

The parent collapses when I do not specify a height..
<!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" >
#parent{width:500px;border:#000 thin groove}
#parent p{float:left}
</style>
</head>
<body>
<div id="parent">
<p height="100px" width="100px">text</p>
</div>
</body>
</html>
Add overflow: hidden to your #parent div
Explanations as to why this works is at http://www.quirksmode.org/css/clearing.html

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?