I made a site with simple instructions let's say:
<html>
<head>
<style type="text/css">
.a120 {
background-image:url('image/back.jpg');
width:1004px;
border: 1px solid #333333;
}
</style>
</head>
<body>
<div class="a120">bfahksbdhabdb</div>
</body>
</html>
*back.jpg is 1004 pixels wide.
And then the crazy thing:
IE8, FF35, Opera9, they all show the div.a120 with a background width of 1004px that matches the width of the div and also a border of 1px on each side.
CHROME, shows me the same, at least initially. I used a floating menu on top of the div.a120 with a width of 1004px and surprise, I realised Chrome did this to div.a120:
|-1px border -1002px div width- 1px border-|
sum=1004px!!!!
Is this a normal behaviour or am I wrong?
When you use a table instead of a div with display: table the behaviour is obviously a table, but when I use display:table isn't supposed to be just a div with table vew or it becomes a table?
Thanks in advance.
A short example (change the width of the orange panel and you'll see how it covers the black border):
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>gfgfg fds f sdf sdf sd fsd f sd</title>
</head>
<body style="margin:0">
<div style="width:1004px; display: table;margin: 0 auto; border: 1px solid black">
<div style="width:967px; height:16px;background-color: #666666;border:none"><div style="width: 37px; float: right;margin-right:-37px; background-color:#ff3300">gfgfg<br />
fds<br />
f<br />
sdf<br />
sdf<br />
sd<br />
fsd<br />
f<br />
sd<br />
ffsd<br />
s<br />
fsd<br />
f<br />
dsf<br />
d<br />
fsd<br />
f</div>
dasdasdas</div>
<div style="width:967px; display:table">dasdasdas<br />
dgf<br />
sdf<br />
<br />
sdfdf<br />
s<br />
sdf<br />
fds<br />
fsd<br />
<br />
sdf</div>
<div style="width:967px; height:16px;">dasdasdas</div>
</div>
</body>
</html>