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;
Related
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
I want to be able to make a 2px white border with an 8px tan border around an image that automatically changes with the size of the image.
article.post .wp-caption img, article.page .wp-caption img {
background: none repeat scroll 0 0 transparent;
border: 2px solid white;
margin: 0;
padding: 0;
}
If you want to look at the site here is the link:
http://www.metnews.org/news/aurora-remembers-holmes-victims/
border: 2px solid white;
outline: 8px solid yellow;
The outline property acts like an outer border.
You can also use padding to get the effect of a second border. The part of changing size according to the image, I think you should explain a little better what you are trying to achieve.
padding: 2px;
background: white;
border: 8px solid #000;
Or box-shadow - you can have as many borders as you want. Poor 'old IE8 and less won't get the pretty styles :(.
http://jsfiddle.net/ryanwheale/KmnUB/2/
img {
/* Make sure to add vendor prefixes */
box-shadow: 0 0 2px 2px white, 0 0 0px 10px tan;
}
I'm trying to make an image-less icon for a drop down menu using CSS triangles that point up and down. Code looks like this: http://jsfiddle.net/FGrR2/6/
.d, .u {
float: left;
clear: left;
width: 0px;
height: 0px;
border-style: solid;
margin-bottom: 5px;
}
.d {
border-width: 5px 5px 0 5px;
border-color: #007bff transparent transparent transparent;
}
.u {
border-width: 0 5px 5px 5px;
border-color: transparent transparent #007bff transparent;
}
However, if I load the page in Firefox 17.0.1, the edges of the triangles don't line up. Here's a zoomed version of how that looks: http://imgur.com/7W8Owmk It's like the 2nd triangle is "aligned" to the right or something.
Has anyone else encountered this?
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