Not sure if anyone else has come across this - I am running Safari 12.
I have a very simple setup to demonstrate this bug.
HTML:
<div class="contents">
<p>Hello!</p>
</div>
CSS:
.contents {
display: contents;
}
.hide {
display: none;
}
See this CodePen: https://codepen.io/ericxgao/pen/dreqWp
If you go to the CodePen, inspect the text and then change the class of the wrapping div from "contents" to "hide", nothing actually happens. In every other browser, the text disappears but in Safari, it doesn't seem to apply. This appears to be a bug documented here: https://bugs.webkit.org/show_bug.cgi?id=188259
I'm curious if there's any clever workarounds available here. What's the cleanest way that I can preserve this behavior without overhauling my existing code that uses this toggle?
I ended up using this instead until Safari fixes the issue.
.hide * {
visibility: hidden;
width: 0;
height: 0;
}
Related
not sure if I should be asking this here or in WebMasters...
I have an HTML block used within a Jive-N instance and in the block I have a number of DIVs with content that is hidden until the heading is clicked. Much like an accordian or collapsible.
You can see it in action on this codepen.
It uses the input[type=checkbox]:checked CSS element to toggle the display of content and is working fine on every browser except Safari... I've only just been made aware of this and how it is actually a big issue for one of our firms that run Macs and use Safari as their primary browser.
Does anyone know how to fix or adapt so it works with Safari as well as the others it already works in (IE/Edge, FireFox, Chrome and Opera).
I've tried using
.ln-toggle-box + label ~ div {
display: none;
margin-bottom: 10px;
}
.ln-toggle-box:checked + label ~ div {
display: block;
margin-left:40px;
}
instead of
.ln-toggle-box + label + div {
display: none;
margin-bottom: 10px;
}
.ln-toggle-box:checked + label + div {
display: block;
margin-left:40px;
}
but it makes things break across all browsers.
I'm not against using an entirely different method, but it HAS to be HTML+CSS based and cannot use JS or jquery as Jive strips that out.
Thanks
I want to hide the border of a recaptcha v2.0 widget so that I can better visually integrate it into my site's look and feel.
NOTE: I'm posting this as a question, and providing a solution, because most of the StackOverflow questions I've found on the topic center around removing the frameborder attribute of the recaptcha's iframe, which isn't technically what I'm after. I'm after the result of that -- an edgeless recaptcha widget that I can position within a larger visual context.
I hope this is helpful!
I wanted to hide the borders of a v2.0 ReCaptcha (the one with the "I'm not a robot" checkbox), and solved it as follows:
Wrap the recaptcha div (the one that is marked with the class "g-recaptcha") with another div, and size it a bit smaller than the iframe comes in at, and shift the iframe using position: relative and left: -10px, to hide the borders.
If you're using the "compact" version, you'll need to adjust the sizing... the css I provide works for the "normal" version.
NOTE: Tested on Safari 9.1.2 (OSX) only, but I'd guess the technique will translate to other browsers too.
Hope this helps!
html:
<div class="my-div"><div class="g-recaptcha" data-size="normal" data-sitekey="<your site key>"></div><div>
css:
.my-div {
display: inline-block;
overflow: hidden;
width: 290px; /* note the embedded iframe is 302x76 */
height: 74px;
text-align: left;
}
.my-div iframe {
position: relative;
left: -10px;
}
NOTE: for people brought here by google but with different problem
If you want to hide just borders not making it edge less keeping original design just do following:
HTML:
<div class="captcha"><div class="g-recaptcha" data-size="normal" data-sitekey="<your site key>"></div><div></div>
CSS:
.captcha iframe {
position: relative;
box-shadow: none !important;
}
I'm editing a WordPress site at present. I've been researching this a bit but I can't work out why this isn't working.
The problem is I'm confined to the bounds of CSS editing only. I cannot touch the HTML. Thus I am hoping to edit content via CSS. (I realize this is abnormal).
So far I can across this suggested solution. It did however, not work for me.
Does anyone know a cool trick to edit content via CSS and not HTML, PHP, JavaScript etc...
Suggested code below not working
.comment-reply-title {
display:none !important;
}
.comment-reply-title::after {
content: "New text";
text-indent: 0;
display: block;
line-height: initial;
}
You can use visibility:hidden in div then apply overflow:visible to ::after
font-size:0 is to hide/collapse the extra space left by div
.comment-reply-title {
visibility: hidden;
font-size: 0
}
.comment-reply-title::after {
content: "New text";
visibility: visible;
font-size: 16px
}
<div class="comment-reply-title">Old Text</div>
I've put my code into a jsFiddle because I wasn't able to reproduce it with a smaller example.
I have a few menu items that show their submenu when hovered. I wanted to add a title that should also be shown on hover but the css class doesn't seem to work.
Here's the rule, it's on line 60 in the fiddle:
li:hover > .skimap-control-title {
display: block;
}
The funny thing is if I add the exact same rule in the developer tools it suddenly works.
I hope someone here can help me.
I think the problem is with some syntax/formatting errors. I wasn't able to narrow it down, but when you click "Tidy Up" in JSFiddle, it seems to work as expected. See updated fiddle
Also why do you have <ul></ul>? What is the point of these empty tags?
I was able to fix it thanks to #cocoa
I just copied the rule after using "Tidy up" in my fiddle and replaced the rule in my css file and it works.
The strange thing is in the git diff the two lines look exactly the same.
I'm clueless what the difference is here, but it works.
Without knowing your code, we can only guess.
But here's an example on how to display a child when the parent is in hover state:
<div class="outer">
<div class="show-on-hover">Hello there!</div>
</div>
and here's the CSS:
.outer {
width: 150px;
height: 150px;
display: block;
border: 1px solid green;
}
.show-on-hover {
display: none;
}
.outer:hover {
background: #ccf;
}
.outer:hover .show-on-hover {
display: block;
}
Here's a working fiddle: http://jsfiddle.net/an5v2atn/1/
First the result in Firefox 4 Beta 8:
Button vs Div http://b.imagehost.org/0419/buttonSpace.png
The former element shown is a button with an img the latter is a div with an img. As you can see in the former case there is some strange space between the border of the img and the border of the button. I wonder how I can remove it.
Here the CSS file:
* {
margin: 0;
padding: 0;
}
button, img, div {
border: 1px solid black;
}
img {
display: block;
}
Testing the above testcase in other browsers has shown that this probably isn't a CSS issue but a bug in Firefox. After a little bit of research I found this bug report: Bug 140563 - <button> ignores CSS style padding:0
In that bug report there is a fix for the problem:
button::-moz-focus-inner {padding:0; border:0}
I think you have to set a width for the div
It looks like the padding you're asking for is not being applied. Have you tried setting it explicitly on the button?