I’m having an issue with the way Firefox treats border size. For example, in other browsers (IE and Chrome), if you have an element with a size of 100x100px and you apply a 25px border to it, you will end up with an element that has an interior space of 100x100px and a 25px border around it, making the total size of the element 150x150px.
In Firefox, however, you end up with an interior size of 50x50px and a total element size of 100x100px.
This is quite frustrating. 
That’s not the case, actually. FF behaves as the others do. Are you using CSS3? I belive there are options for placing the border inside or outside with that, but in CSS2, this will work the same in all browsers:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
<style media="all">
div {width: 100px; height: 100px; border: 25px solid green;
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Perhaps post your code if that doesn’t help.
That example works correctly for me, but mine is not.
<article>
<object class="soundcloud" data="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F965897"/>
</article>
article {
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
background: -moz-linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
background: -webkit-linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
background: -o-linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
background: linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
padding: 15px;
border: 1px solid black;
border-radius: 15px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5),
inset 0px 1px rgba(255,255,255,0.3),
inset 0px 10px rgba(255,255,255,0.2),
inset 0px 10px 20px rgba(255,255,255,0.25),
inset 0px -15px 30px rgba(0,0,0,0.3);
}
object.soundcloud {
border: 25px solid #eee;
box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
height: 80px; width: 100%;
}
Also, in chromium, the right hand size of the object is extending out past it’s container.
Chromium:
Firefox:
How can .soundcloud fit inside the article element when it is bigger than the parent?
object.soundcloud { [B]border: 25px solid #eee;[/B] box-shadow: 0px 3px 5px rgba(0,0,0,0.5); height: 80px; [B]width: 100%;[/B] }
You have a width of 100% and borders of 25px making the child 50px bigger than the parent. If a child is bigger than its parent then it overflows.
Remove the width from the inner element.
But it works perfectly fine in Firefox(almost?), and it doesn’t change the fact that it’s being treated differently across these two browsers.
What I need is a way for the interior of the flash element to be exactly 80px high, have a border, and for the entire element, including border, to take up 100% of it’s parents width. And it needs to work on all browsers.
How about something like this for modern browsers.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
*{margin:0;padding:0}/* for testing only*/
article,object{
display:block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: content-box;
}
article {
margin-top: 10px;
margin-bottom: 10px;
background: -moz-linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
background: -webkit-linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
background: -o-linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
background: linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
padding: 15px;
border: 1px solid black;
border-radius: 15px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5),
inset 0px 1px rgba(255,255,255,0.3),
inset 0px 10px rgba(255,255,255,0.2),
inset 0px 10px 20px rgba(255,255,255,0.25),
inset 0px -15px 30px rgba(0,0,0,0.3);
}
object.soundcloud {
border: 25px solid #eee;
box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
height:130px;
width: 100%;
}
</style>
</head>
<body>
<article>
<object class="soundcloud" data="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F965897"/>
</article>
</body>
</html>
Yes, thank you. 
box-sizing was exactly what I needed to get a consistent effect.
What’s the purpose of setting display:block? I removed it and it had no effect.
Edit: Also, which of these browsers is displaying the correct default box-sizing behaviour here?
The new elements in html5 will be treated as inline elements unless the browser knows about them. You probably have a default html5 stylesheet to address this anyway.
object elements are repleced elements and are inline which means you often get gaps around then so i set them to display:block where possible.
Edit: Also, which of these browsers is displaying the correct default box-sizing behaviour here?
[/quote]
I’m not sure who is right or whether both are right as I could not find it mentioned in the specs. Its the same for some form elements and the submit button and select elements also use the broken box model.
OK, it gets even weirder.
I have the flowing css now:
article, object {
-moz-box-sizing: content-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.soundcloud {
border: 5px solid #eee;
border-radius: 5px;
box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
height: 90px; width: 100%;
}
.youtube {
border: 5px solid #111;
border-radius: 5px;
box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
width: 100%;
// calculating height with JavaScript
}
The the embedded soundcloud object works just fine still, but my youtube player is is extending too far to the right now, exactly as the soundcloud did before (in Firefox, not in Chrome). I can’t even begin to describe how much of a headache this is giving me. It is completely counter intuitive. :injured:
The only solution may be to add an extra element to avoid those box model issues.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
*{margin:0;padding:0}/* for testing only*/
article,object{
display:block;
}
article {
margin-top: 10px;
margin-bottom: 10px;
background: -moz-linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
background: -webkit-linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
background: -o-linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
background: linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
padding: 15px;
border: 1px solid black;
border-radius: 15px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5),
inset 0px 1px rgba(255,255,255,0.3),
inset 0px 10px rgba(255,255,255,0.2),
inset 0px 10px 20px rgba(255,255,255,0.25),
inset 0px -15px 30px rgba(0,0,0,0.3);
}
object.soundcloud {
width: 100%;
height:80px;
}
.wrap{
border: 25px solid #eee;
box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<article>
<div class="wrap">
<object class="soundcloud" data="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F965897"/>
</div>
</article>
</body>
</html>