208052 - CSS1: A id selector and a child class selector doesn't cascade margin-top

Status: RESOLVED INVALID

(Core :: DOM: CSS Object Model, defect)

Description

[Scott Hamilton]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.4a) Gecko/20030401
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.4a) Gecko/20030401

In my Cascading Style Sheet, I have a ID selector (#menu), I want the
first child with a class selector (div.activeSectionBox or div.sectionBox) to
have a different margin-top. So I used the + operator, the CSS would look like;

#menu + div.activeSectionBox {
   margin-top: 25px
}

#menu div.activeSectionBox {
   a heap of other CSS attributes
   but does NOT set any margin attributes.
}

If I use > or simply #menu div.activeSectionBox { 
the margin-top attribute is rendered

I've put a complete example at http://goat.admin.net.au/moz_bug_css.html
You will notice the box with "First Option" is very close to the top of
the blue DIV#menu box. It should be 25px further down....

Reproducible: Always

Steps to Reproduce:
1. CSS with a id selector + class selector
2. set CSS Attributes.
3. id selector and class selector
4. set more attributes.

Actual Results:  
the first block doesn't cascade.

Expected Results:  
the attributes should have been rendered where a specific class selector is the
first child of a specified id selector.

Comment 1

[Jesiah S]

This is what you want 
#menu > div.activeSectionBox:first-child{
    background: black;
    margin-top: 25px
}
Adjacent sibling selectors:
E + F = E and F share the same parent and where E comes directly before F
Child selectors
E > F = E is the parent of F
:first-child pseudo-class
E > F:first-child = E is the parent of F which is also the first child of E

http://www.w3.org/TR/CSS21/selector.html#q1

Comment 2

[Scott Hamilton]

Many thanks, my reading/memory was wrong...
This works wonderfully now!

Comment 3

[Kai de Leeuw]

Mark as invalid? :-)

Comment 4

[Hixie (not reading bugmail)]

invalid per comments