How do I solve the following issue in QUirks mode? - html

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?

Related

HTML Simple Holding Page not visible on newer browsers e.g. Chrome and Firefox

I want to update an existing/simple holding page on my domain in html.
Unfortunately, I've noticed that this page doesn't seem to appear on newer browsers such as Chrome and Firefox and only seems to load up properly on Internet Explorer.
Is there any advice you could give me to help overcome this issue please?
Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>"TITLE HERE"</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="background:ffffff url('LOGO.jpg') no-repeat center center">
</a>
</body>
</html>
<!--#easybanner4-->
To make a simple HTML page visible by most modern browsers it's better to use HTML5 so first, instead of using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> just use <!DOCTYPE html>...
About your code, you can fix it by using something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- or <meta charset="iso-8859-1"> -->
<meta name="viewport" content="width=device-width">
<title>"TITLE HERE"</title>
<style>
body {
background:#ffffff url('LOGO.jpg') no-repeat center fixed;
}
</style>
</head>
<body>
link
</body>
</html>

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 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.

Is it a good idea to align to center a site with CSS like this?

I have seen a tutorial on youtube which centers a site by giving margin: 0px auto; and by saying the actual width of the site:
body
{
align:center;
margin: 0px auto;
width: 1000px;
}
But this does not work for ie8. IS this a good idea to use in order to align to center the layout?
It works in IE6 and newer providing the browser is in standards mode. Trigger it with a Doctype such as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Since the alternative is quirks mode, and that creates many inconsistances with other browsers, standards mode is highly desirable.
So, yes that is a good method to centre things.
align:center;
That, on the other hand, is nonsense. There is no align property in CSS.
I have found the problem why this style and many other styles was not working for for ie8 (only for this browser). The problem is that I wrote
<html>
<head>
<title>About us</title>
<link href="css/about.css" rel="stylesheet" type="text/css" />
</head>
<body>
.......
Now I have changed it to:
<!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>About us</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/about.css" rel="stylesheet" type="text/css" />
</head>
<body>