I have what seems like a simple arrangement: a list of tags in a UL, and the last list item holds an absolutely positioned list of the "rest" of the tags.
See a stripped down demo here: http://dev.timmurtaugh.com/demo/chrome-problem/browse-bar-sandbox.html
In Chrome (and only Chrome so far as I can tell; version 19.0.1084.56) the absolutely positioned list is being overlapped by the "Instrument" header below it.
Help!
Try adding z-index:999 to below mentioned class:
.browseBar ul.tagList li.seeMore, .browseBar ul.tagList li.clearAll {
position: relative;
color: #C82D09;
cursor: pointer;
z-index: 999; /* Add This */
}
Related
I am trying to apply a filter on the entire webpage for creating an inverted view of the page. The page has fixed-positioned elements (some buttons and block). So the easiest way is to invert the color of each element on the webpage, including fixed position buttons. To invert the colors I use the following css code:
html {
filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
-webkit-filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
}
This works fine in chrome, but not in firefox. The inverting works but it changes the position of two buttons that are defined as follows:
#topbtn {
display: none;
position: fixed;
width: 40px;
height: 40px;
overflow: hidden;
outline:none;
bottom: 20px;
right: 20px;
z-index: 99;
}
I have tried to change the filters but no luck. No error is shown. I know this may be duplicate of similar issues in Firefox. But, the other questions are mostly to deal with some div or some element inside another element.
IMO, this question is different as the filter applies to the entire page and I don't want to apply the filter to each element one-by-one too naive.
I hope someone has already encountered and solved the problem for Firefox (especially the dark mode theme guys).
I have been trying to add an image next to my navigation menu using CSS pseudo selectors ::before or ::after.
.menu_container::before{
content: "";
background: transparent url('ISO.png') no-repeat;
position:relative;
float:right;
width: 50px;
height:100px;
}
When i use above code, the image is positioned on a line before the actual menu. When I use the ::after selector it goes to the next line.
I have tried almost all the solutions given in this forum for similar issues. But nothing worked. Really appreciate your support.
Thanks heaps.
Try this.....
.menu_container{
position: relative;
}
.menu_container::before{
position: absolute;
}
/* now u can change where ever you want your before , after div */
You would need to place the :before pseudo element in a way that it will always be positioned according to where the 'actual' element is.
So, to achieve this, you will need to first ensure your 'main' element is positioned relatively:
.menu_container{
position:relative;
display:inline-block; /*more than likely needed for elements*/
}
That's realistically the only required CSS you need on the parent for this to work.
For your pseudo element, you shouldn't look to use a float as that will take the pseudo out of the flow of the dom - we don't want that. We can to position it according to the next relatively positioned parent (which we have just made as the main element).
.menu_container:before{
content: "";
background: transparent url('ISO.png') no-repeat;
position:absolute;
top: 0;
left:0;
height:100%;
width:50px;
}
I would also suggest removing the double :: and replacing with a single : for better browser support (old IE doesn't like the double colon syntax).
So the Position:absolute will allow you to use the top:, left:, bottom: and/or right: properties to position it according to this relative parent.
I've created an 'underline' animation that uses an ::after pseudo-element underneath the link. Here is the code for the link and the pseudo-element:
Link
a {
position: relative;
}
::after
a:after {
content: '';
display: inline;
position: absolute;
height: 2px;
width: 0%;
background-color: #ce3f4f;
left: 0%;
bottom: 0px;
transition: all 0.2s ease;
}
a:hover::after {
width: 100%;
}
This all works fine when the link is on a single line, but if the link flows onto the next line then it only fills across the bottom of the first line, as seen here:
http://i.stack.imgur.com/7SX7o.jpg
If I inspect the element then it appears that the issue is not solvable, as the browser (in this case, Firefox) isn't selecting the entirety of the wrapped element:
http://i.stack.imgur.com/342GH.jpg
Is there a way of solving this purely with CSS, or is it a problem with the way the browser renders the objects? I have played around with a lot of white-space, display and position configurations but to no avail.
Here's an example of the behaviour:
https://jsfiddle.net/57Lmkyf4/
This cannot be done with CSS. (I've implemented it using JS for links that wrap over not more than 2 lines: https://jsfiddle.net/6zm8L9jq/1/ - you can resize the frame to see it at work)
In my Chrome (39.0.2171.95) the underline under a wrapping a doesn't work at all, while in FF it displays like in your screenshot above. Primarily this is because your a element is inline (default), and when it wraps, any pseudo/child elements that depend on its width get 0 width in Chrome and the element's width on the first row in FF. Inline elements don't have control on their own width/height properties (eg, you can't set a width:100px on them without changing them to block elements), and this also affects any absolutely positioned elements that depend on them for width/height.
If you call the window.getComputedStyle method on the pseudo element in FF and Chrome, like:
var a = document.querySelector('a');
a.onmouseover = function(){
setTimeout(function(){
var width = window.getComputedStyle(a,':after').getPropertyValue('width');
console.log(width);
},300); //timeout so that animation to 100% width is completed
}
...in chrome you will see 0px while in FF you will see 100% - and neither will span to actual 100% of the parent. If you added a child element (eg a span) to a instead of a pseudo element, you could investigate the child's actual width after mouseover by calling getBoundingClientRect().width on the child, in which case again, in chrome you would see 0px, and in FF the width of the part of the parent element falling on the first line.
You can change the a element to display: inline-block and it will work, but it will obviously no longer wrap.
When opening the navigation dropdown, the transformed fonts in the sidebar on the right sidebar: "UNSERE HEIMSPIELE 2014",... and so on in kassel-titans.de are displayed over the navigation dropdown.
Why is that?
It looks to me that by declaring top: 16px for .GDtitans, you're giving that element a position. #megaMenu has position: relative, but neither have a z-index set. Since the .GDtitan elements occur later in the document, they overlap #megaMenu.
Try adding a z-index to both, something like:
#megaMenu {
z-index: 20;
}
.GDtitan {
z-index: 10;
}
Now #megaMenu will have a higher z-index, and will overlap everything else.
By Removing below (or using desired value)
-webkit-backface-visibility: hidden;
From your GDtitans class and it will solve your problem.
Here you can find more explanation on that: http://css-tricks.com/almanac/properties/b/backface-visibility/
you should but z-index on your navigation div not on ul only
div#navigation{
position: relative;
z-index: 1;
}
that should work fine
Is it possible to not display an element, as with display:none, but continue to display the :before and/or :after?
I tried
#myspan {display:none}
#myspan:after {display:inline; content:"*"}
but that didn't work. I'm trying to have CSS replace the content of a span with an asterisk, without introducing jQuery.
No, it is not possible.
Pseudo elements are rendered like children:
<span id="myspan">whatever<after></span>
And display:none hides the element including all children.
EDIT 1
JavaScript is your best option in my opinion. Even without jQuery changing text is not hard:
document.getElementById("myspan").innerHTML = "*";
Demo
EDIT 2
However, if you really want to do it with CSS, you can use negative text-indent to hide the text and relative positioning to show the asterisk:
#myspan {
text-indent: -9999px;
display: block;
}
#myspan:before {
content: '*';
position: absolute;
top: 0;
left: 9999px;
}
Demo
I think a very easy approach to doing this is to exploit the visibility property. But note that a "hidden" element still takes up the space. But if you are okay with that, just make make the parent element "hidden" and pseudo element "visible":
#myspan {visibility:hidden}
#myspan: after {visibility:visible}
Once you have the visibility taken care of, feel free to play around with the position so that excess space is avoided.
Something like,
myspan {
visibility: hidden;
position: relative;
}
myspan:after {
visibility: visible;
position: absolute;
left: 10px;
}
It's definitely possible. Use font-size: 0px instead of display: none:
#myspan {
/* display: none; */
font-size: 0px;
}
#myspan:after {
/* display: inline; */
font-size: 16px;
content: "*"
}
A demo is here.
In this case you can only use px/pt for the display text font units.
Use:
#myspan {font-size:0}
#myspan:after {font-size:16px; content:"*"}
If you have a min-font size specified, it won't work (browser setting). I'd only use this method for things like previous and next buttons so that screen readers will read "Previous", but you want to replace it with a \276e. So plan for what it will look like with the text showing up.
As explained by #bookcasey, setting display: none on an element unavoidably hides the :after or :before pseudo-element too (because they are not really something displayed after or before an element but content added inside the element, after or before its real content).
But the goal of replacing an element’s real content by generated content is in principle possible, according to the old (2003) CSS3 Generated and Replaced Content Module draft, by simply setting content on the element, e.g.
#myspan { content: "*"; }
So far, only Opera supports this. But a special case where the replacing content is an image is supported by WebKit browsers, too:
#myspan { content: url(asterisk.png); }
It is possible, but you need to use visibility:hidden instead of display:none.
See the answers in the following question for more detail:
How can I replace text with CSS?
You need to break them into multiple content DIV blocks because the style is inherited by child elements. So it's not possible once the parent display style is defined.