Using IE11, but looking for a solution IE9+, I'm debugging why the labels at the bottom of this CSS bar chart are improperly positioned.
From what I can tell with the IE debugger -- despite the relative parent container having a definite width and height -- the position:absolute is not being applied to the ::before pseudo, resulting in strangely placed labels:
.chart span::before {
position: absolute;
left: 0;
right: 0;
top: 100%;
In Chrome, FF, etc. all is well: the labels are below the bar chart as expected. Any insight on why this occurs, or any tips on debugging ::before in IE (I can't target the ::before like I can in Chrome and FF)?
Try replacing top:100% with bottom:-21px on your ::before pseudo element. That seems to work in FF, Chrome, and IE9+.
Demo
Related
Hi i have applied position sticky on one of my element. I used following code:
position:sticky;
top:10px;
z-index: 1;
Also i have removed overflow hidden from parent classes. But still sticky position not working.
Any suggestion please.
Thanks
Are you on Safari.
Unfortunately position: sticky is not supported in Safari with some disparity in some Chrome versions i think.
I would recommend using the old way with position: fixed; and absolute positioning.
I am working on a website: https://debifit.de and everything is fine on Chrome, FF and Edge.
But in IE11 it adds huge white space at the bottom and - if you remove overflow:hidden from the body tag - also to the right.
After hours of research I found that the element causing these issues is div#stickysmartphone, as long it has position: absolute. When ScrollMagic.js sets it to fixed, the white spaces disappear.
It is also positioned more to the right than in the other browsers.
#stickysmartphone {
position: absolute;
right: 20%;
top: 25em;
bottom: 10px;
}
Please help me fix these two problems as this animation is essential to the UX.
Thank you.
I figured it out: setting overflow: hidden on the inline svg element solved the issue. But I find it very weird that setting position:fixed on the containing div changed that. That's IE11 magic I guess.
The design of the site I'm working on calls for underlines squished right along the bottom of the text, literally touching the baseline. I'm absolute positioning an after pseudo element with a border-bottom to accomplish this, and I'm seeing a strange inconsistency between the box height in Mac Chrome and PC Chrome.
Notice the "Visit" link in the top right corner. This screenshot is Mac Chrome and it's how it is supposed to look. The dev tools claim the box height of the <a> tag is 30px.
Look what's happening for the same site in PC Chrome. As you can see, there's a small gap below the text and the underline because PC Chrome thinks that same exact element has a box height of 22px.
The CSS for the underline:
a {
position: relative;
&::after {
content: '';
position: absolute;
top: 1em;
width: 100%;
left: 0;
border-bottom: 4px solid;
}
}
As you can see, the 1em that positions the underline lands in a different place on the two different OS's.
What's going on here!?
Here's a round-up of things I've checked:
I exported the woff/woff2 files using FontSquirrel with the "Match X-Height" option turned on to "100%"
Both browsers have the zoom set to 100%
The calculated font-size of the element is 22px on both.
The calculated line-height of the element is 22px on both.
Both elements have box-sizing: content-box.
If the box model is truly the issue, you can set the box-sizing attribute on your a tag and ::after element to force consistent rendering of the box-model, then adjust your variables as necessary.
box-sizing: border-box
Is there a way to fake a foreground-image analagous to a background-image in CSS? Instead of existing behind other elements in a div, it would obscure everything inside the element.
Use a pseudo-element (::before won't work in IE≤7):
.obscured{
position: relative;
}
.obscured::before{
position: absolute; /* maximize the pseudo-element */
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color:rgba(0,0,0,0.3); /* use background-image here */
content: " "; /* it needs actual content, an empty space is enough */
}
See also:
JSFiddle Demo
W3C: CSS2.1: 12.1 The :before and :after pseudo-elements
On way is to use absolute positionning, to cover all the tags. I presume you want to trigger this with an event. So when the event is triggered, you can float all the elements except the foreground
You can overlay a same-size child element with absolute positioning and add a bg image to it.
jsfiddle example with bg color instead of an image. Tested in FF, Chrome, IE9.
You can use one line of css > backdrop-filter: blur(1rem);:
<div class="some-background">
<div style="backdrop-filter: blur(1rem);"></div>
</div>
I'm having an issue with IE7 related to overflow. http://www.photocrayze.com/photos
On Google Chrome, Firefox, or any browser that's not IE7, this layout works as intended. The tags (look specifically at the photos 'City People' and 'Kaleidoscopic') are cut off at the edges and set to half opacity. On mouseover, the edges are revealed and set to full opacity.
However, in IE7, when you mouseover a photo, div.photo-tags-inner expands and messes up the layout. I'm not sure how to explain this better... but how can I fix this issue?
Also, it seems like setting the opacity to 0.5 doesn't work in IE8 (but works in IE7 and IE9 and other browsers)...
zoom: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
opacity: 0.5;
filter: alpha(opacity=0.5);
in your css style
.photo-browser tr td .photo-info .photo-tags {
margin: 0.5em auto auto;
opacity: 0.5;
overflow: hidden;
position: relative;
width: 200px;
}
get rid of overflow hidden and it should work. Next time also use firexfox's firebug to play around with styling to get teh desired output. But then I notice then the horizontal scroll bar comes up that may mean you need to some more digging to find out how to get rid of that.
Giving .photo-tags-inner position:absolute and left:0 fixed the issue in IE7 and also works fine in other browsers.