PDA

Click to See Complete Forum and Search --> : Cross Browser Box problem

porfirio
03-14-2006, 04:52 AM
Hi all , this is my fist post in this cool forum :)

I have a problem with some thiing

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style type="text/css">
#test{
border:3px solid black;
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body onload="alert(document.getElementById('test').offsetWidth)">
<div id="test">
&nbsp;
</div>
</body>
</html>

this code create a 100*100 div element with a 3px border

In IE and Opera the border is inset so the total width is 100 but in Firefox the border is outset and the total width is 106

This gives some problems in layouts
They look good on Firefox and bad in IE or look good in Firefox and look bad in IE

Anyone know how i would solve this? I havent found any css declaration for set the border inset or outset :(
Kravvitz
03-14-2006, 05:23 AM
You should use a complete doctype (one that includes a URL).
http://hsivonen.iki.fi/doctype/
http://www.alistapart.com/articles/doctype/
http://www.juicystudio.com/choosing-doctype/
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Read these too:
Dodging the Box Model and other Oddities (http://www.tjkdesign.com/articles/boxmodel.asp)
Difference between box models, doctype switching, etc. (http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp)
The Box Model Problem (http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41)
Interactive CSS Box Model Demo (http://www.redmelon.net/tstme/box_model/)
porfirio
03-14-2006, 10:22 AM
Thank's :eek:
long time working with javascript and some with html-css and i never noticed that a !doctype would change the page rendering mode :)
And make it compliance



<!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=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>
</title>
<style type="text/css">
#test{ border:3px solid black; width:100px; height:100px; background:red; }
</style>
</head>
<body onload="alert(document.getElementById('test').offsetWidth)">
<div id="test">
&nbsp;
</div>
</body>
</html>