Why does this document have a border?

Get Started
1

I’ve got a page that’s organized as follows:

<div id="left" style="position:fixed; width:262px; ...">
   <div id="top" style="position:absolute; top:0; ...">
      text text text
   </div>
   <div id="bottom" style="position:absolute; bottom:0; ...">
      text text text
   </div>
</div>

<div id="right" style="position:absolute; left:262px; ...">
   <iframe name='contentFrame' style='height:100%; width:100%; overflow-y=auto;' src='someFile.html'>
   </iframe>
</div>

Obviously this is simplified. I’ve attached the whole file in case you want to try it out.)

Everything works fine except that div “right” has a left and top border.

When I examine the document elements in Chrome Developer Tools’ Elements tab, I see that the iframe has the following properties:

border: 2px inset;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;

If I set border:0 in Developer Tools or in the iframe tag’s style attribute, the border goes away.

I’ve tried the same thing with Firefox. Firebug does not show the border properties I listed above, but Firefox also shows the border, and also makes the border go away when I set the iframe tag’s style attribute to border:0.

So I know what causes the border to appear, in terms of the DOM, and how to make it go away. But why is it there?

My HTML and CSS are not setting it. The outer HTML file does not load a style sheet, and does not set the iframe’s border in-line, or set any element’s border to either “2px” or “inset”. The file in the iframe does not define any element’s border properties inline, and when I remove its style sheet references the border persists.

It’s hard for me to believe that “border:2px inset” is an initial value in both Chrome orFirefox, much less both. If they were I should see them when I display a trivial HTML page with no styles or style sheet, and I don’t.

Furthermore the DOM reference I use says that the default value of border is “not defined.” If it’s not defined by default, how did it get an initial value of “2px inset”?

2

It is the default stylesheet of the user agent. :slight_smile:

3

But your code example is an example of an HTML page with no styles or style sheet (at least for the iframe) and the border is there. As said, it’s the browsers’ default styles. That’s why many people use a CSS reset for most elements.

I’m not sure about Firebug, but the native FF dev tools make things pretty clear. E.g.