For instance, you put a div with no width into a div of 300px, and somehow the inner div will pop out to 400px or more.
I've never had that problem with Safari despite using inherited widths since day 1.
The width 'inherits' just fine, defaulting to the '100% of the parent element' just as it should.
e.g.
Code:
<!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" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style type="text/css">
#parent {
width: 300px;
border: 1px solid #333;
}
#child {
height: 400px;
border: 1px dashed #999;
}
</style>
</head>
<body>
<div id="parent">parent. width: 300px;
<div id="child">child. no width declared.
</div>
</div>
</body>
</html>
Your layout does appear to be going wrong in Safari though, but I doubt it's Safari inheritance that's causing the problem.
I'll take a glimpse at your code later, though I imagine it will be some element within the 'article' divs forcing them to become wider than their 'right' parent div.
Check padding and margins and also that you haven't explicitly declared width: 100%; *and* a margin (and/or padding) together for the same block element.
Not sure if the array of hacks you have in your css are helping keep things simple.
Ridiculously irritating safari bug
Bookmarks