Sent by Ghodmode on 27 February 2012 11:11
On Mon, Feb 27, 2012 at 1:25 PM, Theresa Jennings
[EMAIL-REMOVED]> wrote:
> Here's a sample of the interior pages (the home page is handled a little differently):
>
> http://mdh-test.com/HealthySkin/Healthy_Skin_Story.shtml
>
> Style sheets, so you don't have to look for them:
>
> mdh-test.com/HealthySkin/main.css
> mdh-test.com/HealthySkin/ddsmoothmenu.css
>
> In Safari and Chrome (Win and OSX), the white #box juts up against the bottom of the text of the
navigation. There should be a 1px space between the bottom of the nav bar and the top of the white
box, like there is on the home page. It does it perfectly in all the other browsers. If I add extra
margin pixels in the CSS to make the white box go down in Safari and Chrome, then it goes down a
bunch in FF. Bleccch.
>
> On the home page, there is no #box rule.
>
> I have validated the html (woot!), and the css validates except for a few things having to do with
the smoothmenu and the webkit hacks. I've been futzing with the original code.
>
> Can you help me, please? I imagine I'm going to need to hack the CSS a little.
The short answer:
Change your selector for the #box (about line 285 in main.css)
from:
#box
to:
div#wrapper #box
Explanation:
It looks like you're having a weird specificity problem and you might have even
stumbled into a bug in Webkit that I haven't seen before.
In your main stylesheet, the #box is set with a top margin of 8px.
In your ddsmoothmenu stylesheet the '*' selector is set with margin 0.
There's no way that the general asterisk selector should override the more
specific #box selector, but chrome's developer tools show that is exactly what's
happening.
The even more specific selector "div#wrapper #box" seems to correct the problem,
but this shouldn't be necessary at all.
This is an interesting problem. I'm going to need to experiment with it and see
if I can reproduce the problem on a simple page.
Ref: http://www.w3.org/TR/CSS2/cascade.html#cascading-order
I'm curious... Why are you creating your 1px space like that? I see the -7px
bottom margin on the bottom of your navigation ul and the 8px top margin on
div#box leaves the 1px you wanted, but why not just use a 1px margin on either
the nav ul or the #box?
Thank you.
--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com
> Theresa Jennings
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
