position and top being ignored in @media

[rjplano]

Anyone know why the position and top parameters I set up in a @media inquiry are being ignored by browsers while things like background and border work just fine?

media inquiry.png

The p.returnTo_DD class appears in the style sheet in only two places; where it's first declared and then in the @media section. I've tried the @media at both the top and bottom of the style sheet.

[Psider]

I think it's css inheritance at play.

When I create a simple test like this:
p.test {
position: fixed;
top: 90px;

}
@media (max-width: 1000px) {
p.test {
position: fixed;
top: 214px;
border: 1px solid green;
}
}

The media query 'position' is used.

If I do it like this:
@media (max-width: 1000px) {
p.test {
position: fixed;
top: 214px;
border: 1px solid green;
}
}
p.test {
position: fixed;
top: 90px;

}

Then the non-media query 'position' is used.

If you have the non-media query version before the media query, then given a more complex stylesheet, perhaps there's a misplaced bracket or something causing issues?

[rjplano]

As noted, I tried locating the @media section at both the top and bottom of the style sheet, same results in both locations. It is a fairly complex style sheet, with four different mediums included.

What's also odd is that I can control the top position of the breadcrumbs proxy just fine with the same @media query.

This:

MadCap|breadcrumbsProxy
{
position: fixed;
width: 100%;
top: 90px;
left: 20%;

is modified to this:

@media (max-width: 1000px)
{
div.breadcrumbs
{
top: 114px;
left: 0px;
}

with no problems. Although figuring out that MadCap|breadcrumbsProxy is converted to div.breadcrumbs took some digging. Would be a useful bit of information to include in the Flare Help System.