/    Sign up×
Community /Pin to ProfileBookmark

Cross Browser Box problem

Copy linkTweet thisAlerts:
Mar 14.2006

Hi all , this is my fist post in this cool forum ?

I have a problem with some thiing

[code=html]<!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>[/code]

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 ?

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@KravvitzMar 14.2006 — 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:

[url=http://www.tjkdesign.com/articles/boxmodel.asp]Dodging the Box Model and other Oddities[/url]

[url=http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp]Difference between box models, doctype switching, etc.[/url]

[url=http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41]The Box Model Problem[/url]

[url=http://www.redmelon.net/tstme/box_model/]Interactive CSS Box Model Demo[/url]
Copy linkTweet thisAlerts:
@porfirioauthorMar 14.2006 — 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



[code=html]<!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>[/code]
×

Success!

Help @porfirio spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.1,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...