I'm a new web developer, trying to add the latest Recatpcha to a website with a dark background. It displays with white space on some edges - a recent bug that is also being discussed in the Recaptcha Google group. I'm trying to develop a workaround until they fix it. Recaptcha is displayed as an iframe - so it should be configurable - but none of the properties visible in the DOM looks like "background". How do you force the iframe background to be transparent?
My code is here:
<!DOCTYPE HTML>
<head>
<style>
body {
background-color: rgb(30, 30, 40);
}
</style>
<script src='https://www.google.com/recaptcha/api.js?hl=en'></script>
</head>
<body>
<div class="g-recaptcha" data-theme="dark" data-sitekey="6LcZuQwTAAAAAA-qE3415DMsfeGdeQ6WWlzm4Lqz"></div>
</body>
</html>
Thanks so much!
Josh
Quick fix:
body {
background-color: rgb(30, 30, 40);
}
.g-recaptcha {
overflow:hidden;
width:298px;
height:74px;
}
iframe {
margin:-1px 0px 0px -2px;
}
Demo: http://jsfiddle.net/76rkfb2w/
As #CookieMan sad, iframe content can't be styled, but, holder of iframe, and iframe box it self - can. So, this should work on dark background...
Related
I have an embedded browser control in my C++ / MFC dialog. It displays an HTML page with some transforms.
Everything renders fine, the transforms work and all that.
However!
For reasons I cant fathom, once every two weeks or so, something happens to the font side. Sometimes its too large, sometimes too small.
I go and change the CSS section of HTML to make the font size larger, it works for a couple weeks, then all of a sudden it gets too large, and I have to change the number back down again. Nothing I do to IE zoom levels, etc seems to have effect on the font size inside my MFC app.
I have a vague suspicion that it has something to do with networks connecting/disconnecting, but can not reproduce the issue.
Why would that happen, and how can I prevent that from happening?
Windows 10, IE 10.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box {
display: inline-block;
border-spacing: 0;
border-collapse: collapse;
padding: 0;
width: 0px;
height: 380px;
transform: rotate(90deg) translate(0%, 0%);
font-family: Arial;
font-size: 37px; /* <-- need to keep changing this */
}
.line1 {
color: white;
width: 1000px;
text-align: center;
transform: translate(-35%, 0);
display: inline-block;
}
</style>
</head>
<body id=CHtmlMirror bgcolor=black>
<div class="box">
<div class="line1">My Text</div>
</div>
</body>
</html>
You can try to reset css or enable compatibility mode in IE10.
OK, found a solution.
I can intercept the OnDocumentComplete method of CDhtmlDialog and ensure the zoom level is always set to some fixed value. Then tweak the CSS to look right for that zoom level, and it will not jump around again
void CMyDialog::OnDocumentComplete(LPDISPATCH pDisp, LPCTSTR szUrl)
{
CComVariant zoomLevel;
zoomLevel = 100;
m_pBrowserApp->ExecWB(OLECMDID_OPTICAL_ZOOM, OLECMDEXECOPT_DODEFAULT, &zoomLevel, NULL);
}
I want to know how I can change the style of the scroll bar of a browser window using CSS. I want to change it's color and width so that I can make the webpage look more attractive and comforting for users. Can I do this with CSS or should I use any other languages to do that?
I would also like to know whether styling scroll bar of a browser window affects page load speed and smoothness since I have seen websites with custom scroll bars which lags while scrolling.
I want to change the following
1. Width
2. Color of scroll bar
3. Color of scroll bar background
Here is a sample page with long enough to display a scroll bar. You may show me how to add the effect on the code below.
Sample structure code below:
HTML:
<html>
<head>
<title>
Sample Page
</title>
</head>
<body>
<div class="main">
</div>
</body>
</html>
CSS:
body{
background:#C0C0C0;
}
.main{
height:1200px;
width:1000px;
}
Also try to include the code which works with all browsers like Google Chrome, Firefox and especially IE
You can design the scroll bar easily with CSS.
body{
background:#C0C0C0;
}
.main{
height:1200px;
width:1000px;}
body::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar-track {
background:green;
border-radius: 20px;
}
body::-webkit-scrollbar-thumb {
background-color: red;
border-radius: 20px;
}
for more information you can refer here. : https://www.webkit.org/blog/363/styling-scrollbars/
Got it. The CSS for chrome is given above and for IE IS given below
CSS:
body{
scrollbar-face-color: #EEC800;
scrollbar-shadow-color: #006cb4;
scrollbar-highlight-color:#006cb4;
scrollbar-3dlight-color: #006cb4;
scrollbar-darkshadow-color: #006cb4;
scrollbar-track-color: #006cb4;
scrollbar-arrow-color: #C1C1D1;
}
http://jsfiddle.net/36ykrp9x/5/
HTML
<div class="container">
<button>O</button><button>O</button>
</div>
CSS
.container {
width: 100%;
background-color: rgb(120, 200, 200);
text-align: center;
}
button {
border: 0;
width: 3rem;
height: 3rem;
opacity: 0.8;
background-color: gray;
}
This above code best captures the visual bug I am interested in solving. I should note that this does not appear to affect Firefox or Safari's latest versions. I am currently on Chrome 39. If you are on a retina display and a recent version of Chrome and do not already see the thin line between the elements, try resizing the window a bit. A thin line between the buttons will flicker in and out of presence.
For my purposes, there is at least one element above the button group in the hierarchy with 100% width, and the buttons must be horizontally centered within it. The buttons themselves must have opacity between 0 and 1. They can be divs, or any other element for that matter - but I have indeed tried others and found the problem remains.
Unfortunately, centering the button group within a fixed-width element doesn't appear to solve this issue for me, as the fixed-width button group must ultimately also be centered somehow which appears to resurrect the issue. Nudging with margins can lead to overlapping which is more obvious with elements that have such opacity - which is really no better than having the gap in the first place.
It is worth noting that indeed using background-color: rgba(r,g,b,a) addresses the problem for most intents and purposes, but I am very interested in resolving this without it if only to see that it's possible.
I am not particularly interested in solutions that involve JavaScript. Am I out of luck?
Based on the information you provided, and my own experience with Google Chrome, I'm led to the suggestion that this is a browser bug in Chrome, considering it only occurs in Chrome on a Retina screen, and other browsers such as Safari and Firefox do not exhibit the problem. Your HTML and CSS looks perfect so I don't see issues here.
You can verify that this is a browser rendering issue by also checking this in a latest version of Opera (on your Retina display), as Opera now uses the same Blink rendering engine as Chrome (which is forked from Webkit). If Opera exhibits the same issue then its a Engine issue which should be logged as a bug.
Unless someone else figures out a way around it, I am normally inclined to leave browser rendering bugs like this alone where possible so that you're not hacking code in your site, and when the bug is fixed, you don't have to do anything to your site.
The problem is with jsfiddle.net. I have the same 1 pixel space in Chrome 40 on retina. Try this: http://dabblet.com/gist/c0068a79fc0268482ee1
or the following code, loaded directly:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.container {
width: 100%;
background-color: rgb(120, 200, 200);
text-align: center;
}
button {
border: 0;
width: 3rem;
height: 3rem;
opacity: 0.8;
background-color: gray;
}
</style>
</head>
<body>
<div class="container">
<button>O</button><button>O</button>
</div>
</body>
</html>
I'd like to have a pattern I made in an embedded SVG appear as the background of an html doc.
<head>
<style>
body{
background-image: url('apattern.svg');
}
</style>
</head>
Basically, SVGs do not work well in body-background as you described in the question, if at all. What I've done is create a fallback option for those browsers that have an issue.
body {
background: url(fallback.png);
background-image: url(image.svg), none;
}
See ... http://css-tricks.com/using-svg/
I have an HTML page with a pink background image. I want to define a DIV on the page for text, but I want the background to show in the DIV much paler, almost white. I tried this, but it doesn't seem to work on IE8.
My HTML...
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="div1">
testing
</div>
</body>
</html>
and here's my CSS file ...
body
{
background-image:url('back.jpg');
background-repeat:repeat;
}
.div1
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
background: #ffffff;
}
Any ideas?
The thing you have to keep in mind is that the opacity property will affect the opacity of the entire element, including its text/children. If you want to affect JUST the background, you will need to approach it in a different way.
You could use RGBA for modern browsers:
.div1 {
background-color: rgba(255,255,255, .4);
}
Then, in a separate IE stylesheet (using conditional comments or similar method):
.div1 {
background: transparent url(white_trans.png);
}
You would need to make a PNG-24 image, 1px x 1px, that was just simply white reduced to 40% opacity. That will work in IE7 & 8.
You should add the zoom: 1 declaration to your .div1 block.
If you are using a plain (solid) color as background, then, I would suggest you to just use a paler pink for your DIV.
This will create the illusion of opacity. And more importantly, you will not face issues with some browsers.