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?
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.
position and top being ignored in @media
position and top being ignored in @media
You do not have the required permissions to view the files attached to this post.
Re: position and top being ignored in @media
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?
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?
Re: position and top being ignored in @media
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.
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.