I have a Google invisible Recaptcha that auto positions itself at the bottom right corner of the page.
The footer is now covering this so I want to relocate it. When I inspect its styles I see:
element.style {
width: 256px;
height: 60px;
display: block;
transition: right 0.3s ease 0s;
position: fixed;
bottom: 14px;
right: -186px;
box-shadow: grey 0px 0px 5px;
border-radius: 2px;
overflow: hidden;
}
It looks like the bottom value needs to be changed to unset. When I change this in Chrome it positions correctly.
I have included the following in my style tag however it does not make any difference.
.grecaptcha-badge
bottom: unset
Related
I have to resize the buttons on the screen initial size of button 157*70px and required size on screen is 100*50px. It has to be compatible with IE8 where the background-size property is not working although this property works fine in FF.
HTML:
<div id="return_button">
<a class="new_return_button" name="PREVIOUS">Previous</a>
</div>
CSS:(Firfox)
.new_return_button{
background: url("images/previous.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
backgound-size: 100px 50px;
color: #FFFFFF;
cursor: pointer;
display: block;
height: 70px;
line-height: 70px;
width: 157px;
}
#return_button{
color: #FFFFFF;
font-weight: bold;
height: 70px;
left: 10px;
line-height: 70px;
margin: 0;
position: absolute;
text-align: center;
width: 157px;
}
This css works fine in Firefox with background-size property and shrinks the image of 157*70px to area of 100*50px but doesn't work in IE8.
Please suggest a solution to this issue
One way to solve this is to use another element. You probably need to tweak the margins of the <span> to have it working as desired. Also note that this does not guarantee a specific height, instead it will give you the correct aspect ratio for the scaled graphic.
<style>
#return_button {
position: relative;
width: 100px;
}
#return_button img {
max-width: 100%;
height: auto;
}
#return_button span {
position: absolute;
top: 50%;
margin-top: -5px;
left: 10px;
right: 10px;
text-align: center;
}
</style>
<div id="return_button">
<img src="images/previous.png" alt="Button graphic">
<span>Button label</span>
</div>
I am getting a odd effect (currently in chrome). I have created my own overlay dialog box. which has a semi transparent background sitting on top of my website with a box on top of that. the top of the bar as you can see has a black background. The main part of the box is white thought.
Its not the easyist to see but it is annoying me.
The white is showing through from behind. (I know as if i change it to red it changes colour) Which you can see in the top right hand corner of the screenshots, just above the "X"
Both the header and the box has a border radius 3px
.blockUI .overlay {
background: #f00;
border-radius: 3px;
margin: 0 auto;
padding: 10px;
overflow: hidden;
position: relative;
top: 20%;
text-align: inherit;
width: 600px;
z-index: 10009;
}
blockUI .overlay h1 {
background: #000;
border-bottom: 2px solid #F48421;
border-radius: 3px 3px 0 0;
color: #FFF;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: -10px;
padding: 10px;
}
Since overflow: hidden; along with border-radius seems to cause some rendering inconsistencies in some engines (take a look at this), one should use border-radius on both the parent and the child elements to achieve rounded corners.
As you have noticed, you still get some wierd results with extra pixels "shining" through. Just reduce the border-radius of the child (or the other way round) to compensate this.
blockUI .overlay h1 {
border-radius: 2px 2px 0 0;
}
I had same problem. But I solved.
.blockUI .overlay {background:#000;}
and remake some!
You should try on the parent div:
-webkit-background-clip: padding-box;
Finally fixed this completely by adding this on parent and child divs.
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
outline:none;
border:none;
text-decoration:none;
I use framesets (I know, that is very very bad :)) and that works for me, but I have one little problem: the frameset does not allow me to see the dropdown box that I have made. It just shows one list item and the other 4 items are invisible. If I enlarge the frameset, then it will show up, but that is not a solution because the site won't be the way I want it to be (it goes to the bottom).
This is the frameset: frameset id="f" border="0" rows="50" and this is the css of the dropdown menu:
.dropdown .dropdown-menu {
background-color: #ECECEC;
border: 1px solid #D9D9D9;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
display: none;
float: left;
left: 0;
margin-top: -1px;
min-width: 150px;
position: absolute;
top: 100%;
z-index: 1000;
I have tried overflow etcetera, but it didn't work. Can someone help me out, please?
It's obvious that this happens, because this is a frameset we are talking of.... A thing used before Christ...
So yeah, my answer is solved by my own.
I am trying to create a button with "caps" on either end, and a repeating background, in order to keep the button a flexible size.
In order to do this, I have used the :before and :after pseudo-elements in CSS, along with position:absolute to get it outside of the main button's background-covered space (using negative values).
It works in FF and Chrome, but it looks like in IE8 and 9, the images are there, but are "outside" the button, and therefore are hidden. Does anyone know how to pop these pseudo-elements "out" of the button, so that they will render?
I want to keep the HTML to just the <button></button> element, and am using SASS.
You can see a jsFiddle here: http://jsfiddle.net/Dqr76/8/ or the code below:
button {
display: inline-block;
zoom: 1;
*display: inline;
border:0;
background-image: url(../images/btn_bg.png);
background-repeat: repeat-x;
color: #fff;
font-weight: bold;
height: 22px;
line-height: 22px;
position: relative;
margin: 0 5px;
vertical-align: top;
&:before {
display: inline-block;
height: 22px;
background-image: url(../images/btn_left.png);
width: 5px;
position: absolute;
left: -5px;
top: 0;
content: "";
}
&:after {
display: inline-block;
height: 22px;
background-image: url(../images/btn_right.png);
width: 5px;
position: absolute;
right: -5px;
top: 0;
content: "";
}
}
Just a sidenote, before someone brings it up, I know that these pseudo-elements do not work in < IE8, and have created a work-around that is not effecting this problem.
Add overflow: visible; to the button element, and it shows up.
Demonstrated at this jsFiddle
I swear I tried that already, but I guess not. Thanks to this question
i have this code:
<style type="text/css">
div {
margin: 100px auto;
width: 0px;
height: 0px;
border-right: 30px solid transparent;
border-top: 30px solid red;
border-left: 30px solid red;
border-bottom: 30px solid transparent;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
position: relative;
}
</style>
<div></div>
that produce:
in firefox,
but in chrome (linux, and windows - didnt try in mac) i see nothing why?
I believe it is some sort of bug, actually. It works for me if you change the height and width to 1px. This leaves a little white dot, unfortunately, but that can be fixed by changing the background to red and the background-clip to content.
JSFiddle example.
Because you gave 0px width and 0px height to the div so you see nothing.
width: 0px;
height: 0px;
Change this, hope it'll be visible.