I have been busy creating my website, however in the process of testing my in-progress main page on Opera I noticed that It was adding a horizontal scroll bar. After cutting bits out of my page I noticed that if I only left a single div with the ID feature the problem would still occur. I tried searching it by couldn't find anything on it... anywhere.
Here is a link to a page exampling the problem Opera Box Shadow Bug
It is important to note that it only occurs in Opera and as part of the CSS3 Spec it is stated that box-shadow does not at height or width.
Does anybody have a easy solution for this? The only thing that I found that worked was to put a containing Div around the box shadow div, or around several divs and set overflow:hidden; , which is far from ideal.
I haven't checked Opera for Windows but it is occurring on Opera for Mac (v11.50).
I tested your file in Windows Opera and it is displaying the same way.
The only way I was able to make it work was to also wrap a div around your #feature div, add overflow:hidden, and a larger height. Here is my code
html, body {
margin: 0;
padding: 0;
}
#hidden{
height:400px;
overflow:hidden;
}
#feature {
width:100%;
height: 375px;
background: #000;
box-shadow: 0 4px 4px 4px #000;
}
<div id="hidden">
<div id="feature">
</div>
</div>
Besides this, I would use a 1px wide image with repeat.
The bug seems to be solved at least in Opera 11.60.
Related
I find issue with background attachment in firefox.
I want to make my banner background fixed ( http://inkerkam.so-use.ru/ ), but it doesn`t work in firefox: background displayed, but it scrolls, however in chrome it works normally. And another moment, in another block below '.content' it works normally too.
my html:
<div class="banner">
...
</div>
...
<div class="content">
....
</div>
my css:
.banner {
background: url(/template/img/banner.jpg) no-repeat fixed left top;
}
.content {
background: url(/template/img/banner.jpg) 0px -690px fixed;
padding: 80px 0 120px 0;
}
Maybe somebody know how to solve this problem?
Firefox version is the last one. Updates today.
p.s. sorry for my bad english
Even without having the rest of the code I am almost certain that the problem is a transform:translate property either in the element with the background or a parent element. When this property is applied - for any axis, either X, Y or Z, background-attachment:fixed is disabled.
I'm using CSS box-shadow to mimic a background that "bleeds" to the edges of the browser window. It works great in Chrome, Firefox, Safari, and Internet Explorer 9 & 10. However, Internet Explorer 11 renders a transparent 1px "space" before the left (negative) box-shadow.
Take this HTML:
<div class="wrapper">
<div class="widget">Test</div>
</div>
And this CSS:
.wrapper {
background:red;
padding:20px 0;
}
.widget {
width:600px;
height:400px;
margin:0 auto;
text-align:center;
background:white;
box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
}
In most browsers, the widget DIV has a white background and white left & right box shadows that fill the width of the browser window with no spaces, breaks or red from the wrapper bleeding through. In IE11 there is a 1px red line that runs vertically along the left side of the widget DIV.
Take a look at this fiddle for an example: http://jsfiddle.net/Bxsdd/. (You may need to manually adjust the width of the fiddle Results pane as slight differences in the width of the window show the issue more apparently - again, only in IE11.)
Things I've tried to remove the transparent space:
Changing the box-shadow from using em's to using px's
Adding or subtracting 1px from the other box-shadow attributes
Adding a border around the widget DIV
Adjusting the padding, display, position and other CSS elements for the widget
So many things I can't even remember right now
Any ideas how to remove the 1px transparent space in IE11?
Now that we know it's a bug, here's one acceptable workaround:
.widget {
width:600px;
height:400px;
margin:0 auto;
text-align:center;
background:white;
box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
position:relative;
z-index:2;
}
.widget:before, .widget:after {
position:absolute;
content: " ";
width:1em;
left:-1em;
top:0;
height:100%;
background:white;
z-index:1;
}
.widget:after {
left:auto;
right:-1em;
}
Basically, I'm adding absolutely positioned :before & :after pseudo elements that contain nothing more than the same background color as the widget DIV and that DIV's box-shadow. These pseudo elements are offset just to the outside-left and outside-right of the widget DIV and positioned behind it so that they provide the correct color for the box-shadow bleed through.
Obviously this adds complication if one is already using the :before & :after elements, but this works for my purposes. I suppose one could also try setting negative margins on the widget DIV.
Checkout the fiddle here: http://jsfiddle.net/TVNZ2/
THE PROBLEM:
This appears to be an graduated alpha transparency/aliasing issue to do with even/odd pixelation calculations.
As best I can tell, colour is spilling into that pixel line but the antialiasing calculation is stripping its alpha value in an attempt to try graduate the distinction of the box-shadow with its surrounds.
That is fine on the outside border of the box shadow, but not so great in the inside border - which is why we are all here!
WHAT (PRETTY MUCH) WORKED FOR ME (PURE CSS):
In my use case, this was fixed by adding several additional box-shadows (of different and lesser values) like so:
div {box-shadow: 10px 0px 0px 0px red,
4px 0px 0px 0px red,
3px 0px 0px 0px red,
1px 0px 0px 0px red;}
Though not elegant, this cumulatively increase the "spill" into the inner pixel line. About three additional box-shadows were required to achieve the desired value - suggesting the antialiasing spill is set at about 25%. Different device densities may change that?
Simply repeating the same box-shadow didn't work - so I am guessing IE treated them as an repetition error and ignored them.
THE "PRETTY MUCH" PART (FOR ME):
In my use case I was adding a purely horizontal box shadow to the right of a text span to create the impression of padding if the line broke and became more than one line. I wasn't adding a shadow to the top or bottom or around a div.
The "pretty much" part for me is that there is a little vertical spill "dot" of about 1px or 2 pixels at the top and bottom of pixel line at certain widths. Essentially, the same problem above in reverse.
Not ideal, but far more preferable than having a whole line transparent.
I hope this will work for you (the reader) in similar other scenarios, but I haven't tested this.
Good luck, and let's all thank good ol' IE for its "challenges"!! ;)
You can fill the space with outline:1px solid color; It worked for me.
.container{
display:block;
position: relative;
width:450px;
height:450px;
margin: 0 auto;
background-color: #654d7f;
}
.header-emphasis{
position: absolute;
bottom:5px;
max-width: 420px
}
span{
position: relative;
left:8px;
background-color: white;
padding:4px 4px 4px 0px;
color: #666666;
box-shadow: 6px 1px 0px 2px #ffffff, -8px 1px 0px 2px #ffffff;
outline: 1px solid white;
}
<div class="container">
<h3 class="header-emphasis">
<span class="highlight">
If there are no dogs in heaven then when i die i want to go where they went.
</span>
</h3>
</div>
I thought I would share my answer to this issue. I cannot be sure that I have had the same exact problem as everyone else, but what I have observed is this: The problem occurs in EI11 (and EI10 according to other which I have not tested) when an element with a set width of pixels is centered using margin: auto; (my case was a left/right issue). I noticed that on resize, the div would shift over to the right 1px on every other pixel width of the screen.
I used a transparent background to observe that instead of just a gap appearing on the left, the div did in fact shift 1px to the right.
Changing the width of the div 1px does work on the current screen width. However, change the screen width will bring back the problem on every other pixel.
To solve the issue, we need to identify the screen width as even or odd. In my case, on even I added a css rule to my culprit div. The new rule changes the left positioning by 0.5px.
Furthermore, the function needs to be executed on the screen resize.
Below is the script I used to fix the issue:
(function (window, document) {
function isEven() {
var windowWidth = window.innerWidth;
// Find out if size is even or odd
if (windowWidth % 2 === 0) {
document.querySelector("#container").classList.add("container_left_1px");
} else {
document.querySelector("#container").classList.remove("container_left_1px");
}
};
document.addEventListener("DOMContentLoaded", isEven);
window.addEventListener(('onorientationchange' in window) ? 'orientationchange':'resize', isEven);
})(this, this.document);
And the css rule
.container_left_1px {left: .5px;}
Executing the script only on EI10 and 11 would be optimum. Please forgive my scripting as this is the first js I have made. Please feel free to correct any issues. This solved my problem; I hope someone finds it helpful!
DaveE gave a nice solution. I played with this myself as well. I had an issue with the top and bottom blur of a box-shadow, instead of left and right. I eventually solved it by just adding a border on top and use important next to it.
.class
{
border-top:1px solid $colorBg !important;
border-bottom:1px solid $colorBg !important;
}
Perhaps not as well tought out as the previous solution, but it worked for me.
Found this solution(Small space between box shadow and div when alpha set) and it works for me: div width must be an odd number.
width: 800px; => not working, but width:799px; => works and white gap disappeared!
In my case, I had a white line between the div bottom and the shadow and I resolved the issue adding a height to the div with decimals:
height:30px; -> height:30.1px;
Is there a way to position a background image a certain number of pixels from the right of its element?
For example, to position something a certain number of pixels (say, 10) from the left, this is how I'd do it:
#myElement {
background-position: 10px 0;
}
I found this CSS3 feature helpful:
/* to position the element 10px from the right */
background-position: right 10px top;
As far as I know this is not supported in IE8. In latest Chrome/Firefox it works fine.
See Can I use for details on the supported browsers.
Used source: http://tanalin.com/en/blog/2011/09/css3-background-position/
Update:
This feature is now supported in all major browsers, including mobile browsers.
!! Outdated answer, since CSS3 brought this feature
Is there a way to position a background image a certain number of pixels from the right of its element?
Nope.
Popular workarounds include
setting a margin-right on the element instead
adding transparent pixels to the image itself and positioning it top right
or calculating the position using jQuery after the element's width is known.
The easiest solution is to use percentages. This isn't exactly the answer you were looking for since you asked for pixel-precision, but if you just need something to have a little padding between the right edge and the image, giving something a position of 99% usually works well enough.
Code:
/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */
div.middleleft {
background: url("/images/source.jpg") 99% center no-repeat;
}
Outdated answer: It is now implemented in major browsers, see the
other answers to this question.
CSS3 has modified the specification of background-position so that it will work with different origin point. Unfortunately, I can't find any evidence that it is implemented yet in any major browsers.
http://www.w3.org/TR/css3-background/#the-background-position
See example 12.
background-position: right 3em bottom 10px;
As proposed here, this is a pretty cross browser solution that works perfectly:
background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;
I used it since the CSS3 feature of specifying offsets proposed in the answer marked as solving the question is not supported in browsers so well yet. E.g.
The most appropriate answer is the new four-value syntax for background-position, but until all browsers support it your best approach is a combination of earlier responses in the following order:
background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */
A simple but dirty trick is to simply add the offset you want to the image you are using as background. it's not maintainable, but it gets the job done.
This will work on most modern browsers...apart from IE (browser support). Even though that page lists >= IE9 as supported, my tests didn't agree with that.
You can use the calc() css3 property like so;
.class_name {
background-position: calc(100% - 10px) 50%;
}
For me this is the cleanest and most logical way to achieve a margin to the right. I also use a fallback of using border-right: 10px solid transparent; for IE.
Ok If I understand what your asking you would do this;
You have your DIV container called #main-container and .my-element that is within it. Use this to get you started;
#main-container {
position:relative;
}
/*To make the element absolute - floats above all else within the parent container do this.*/
.my-element {
position:absolute;
top:0;
right:10px;
}
/*To make the element apart of elements, something tangible that affects the position of other elements on the same level within the parent then do this;*/
.my-element {
float:right;
margin-right:10px;
}
By the way, it better practice to use classes if you referencing a lower level element within a page (I assume you are hence my name change above.
background-position: calc(100% - 8px);
The CSS3 specification allowing different origins for background-position is now supported in Firefox 14 but still not in Chrome 21 (apparently IE9 partly supports them, but I've not tested it myself)
In addition to the Chrome issue that #MattyF referenced there's a more succinct summary here:
http://code.google.com/p/chromium/issues/detail?id=95085
If you have proportioned elements, you could use:
.valid {
background-position: 98% center;
}
.half .valid {
background-position: 96% center;
}
In this example, .valid would be the class with the picture and .half would be a row with half the size of the standard one.
Dirty, but works as a charm and it's reasonably manageable.
If you would like to use this for adding arrows/other icons to a button for example then you could use css pseudo-elements?
If it's really a background-image for the whole button, I tend to incorporate the spacing into the image, and just use
background-position: right 0;
But if I have to add for example a designed arrow to a button, I tend to have this html:
Read more
And tend to do the following with CSS:
.read-more{
position: relative;
padding: 6px 15px 6px 35px;//to create space on the right
font-size: 13px;
font-family: Arial;
}
.read-more:after{
content: '';
display: block;
width: 10px;
height: 15px;
background-image: url('../images/btn-white-arrow-right.png');
position: absolute;
right: 12px;
top: 10px;
}
By using the :after selector, I add a element using CSS just to contain this small icon. You could do the same by just adding a span or <i> element inside the a-element. But I think this is a cleaner way of adding icons to buttons and it is cross-browser supported.
you can check out the fiddle here:
http://codepen.io/anon/pen/PNzYzZ
use center right as the position then add a transparent border to offset it?
If you have a fixed width element and know the width of your background image, you can simply set the background-position to : the element's width - the image's width - the gap you want on the right.
For example : with a 100px-wide element and a 300px-wide image, to get a gap of 10px on the right, you set it to 100-300-10=-210px :
#myElement {
background:url(my_image.jpg) no-repeat -210px top;
width:100px;
}
And you get the rightmost 80 pixels of your image on the left of your element, and a gap of 20px on the right.
I know it can sound stupid but sometimes it saves the time... I use that much in a vertical manner (gap at bottom) for navigation links with text below image.
Not sure it applies to your case though.
my problem was I needed the background image to stay the same distance from the right border when the window is resized i.e. for tablet / mobile etc
My fix is to use a percenatge like so:
background-position: 98% 6px;
and it sticks in place.
yes! well to position a background image as though 0px from the right-hand side of the browser instead of the left - i use:
background-position: 100% 0px;
Does anyone know something more about Opera outline bug?
Check this out:
http://jsfiddle.net/BYgMr/
<div id="outline">TEST</div>
<div id="another-div">Another div</div>
#outline {
border: solid 1px #000;
outline: solid 1px red;
background-color: #fff;
width: 200px;
height: 200px;
}
#another-div {
position: absolute;
top: 100px;
left: 100px;
border: solid 1px #000;
outline: solid 1px blue;
background-color: #eee;
width: 200px;
height: 200px;
z-index: 5000; /* even this is not helping */
}
I'm using the latest Opera, I've checked on TWO different machines with different Opera versions all of them render it like:
What's THAT? In any FF/Safari/Chrome the outline goes below grey area, but in Opera it's still above (even if div parent is way below!).
Google search gives only "Opera 9.5+ CSS bug: rendering outline over absolute positioned" link, but it doesn't want to open.
Any temporary fixes? Or maybe I'm blind and made a horrible mistake somewhere?
This is more of a missing spec in Opera rather than a bug. A bug constitutes something not working according to specifications and Opera is following W3 standards according to step 10 - http://www.w3.org/TR/CSS21/zindex.html)
It is a missing spec in Opera because there's no way to set a style above the last block drawn namely an "outline".
Its probably in our best interest not to use an outline when we could use border or box-shadow but I can't do that in my case since I've got a tooltip which thousands of people load independently onto their sites. And I don't have the luxury of changing everybody's template styling nor would I ever want to.
I've submitted a bug report to Opera (DSK-339836). Hopefully they'll give us a way to draw something above the last thing drawn (ie. outline)
This is not a bug!
http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines
The outline created with the outline properties is drawn "over" a box,
i.e., the outline is always on top, and does not influence the
position or size of the box, or of any other boxes. Therefore,
displaying or suppressing outlines does not cause reflow or overflow.
Outline is not supposed to be "just another border" property. Its more needed for debug, or creating visual UI hints, around certain elements.
It's not a "bug," per se, but a difference in how the spec was implemented. The outline highlights the edges of the box. That's it. It isn't supposed to be used as a border. If you look closely, you'll see that only the red outline overlaps the other box, but the dark border does not.
Is there a reason you're using a border and an outline and overlapping divs? That seems like an odd use case. If you need to use both, you can use box-shadow as a bit of a hack to get the effect you want in most recent browsers: box-shadow: 0px 0px 0px 1px red;.
First: I see a lot of talk and no intelligent answers.
Second: the outline property in opera seems to have a positive Z-Index and stays on top of all other Z-Indexes.
Third: I came looking for a fix or a deal with it, but instead got rubbish and opinions, and we all know what opinions are like.
I see this as a browser code issue that separates the outline from the element and gives it a positive Z-Index above everything else. All other browsers I have tried work fine including mobile browsers, except Opera.
I was once fond of Opera as a mobile browser but am now seeing more draw backs than anything else.
The only fix I see at this point is a browser ID script that removes the outline property for the Opera browser.
Yes, it is a bug!
CSS 2.1 outlines differ from borders in the following ways:
Outlines do not take up space.
Outlines may be non-rectangular.
So nowhere it states that outlines should be on top of other boxes. Borders don't do that! That the outline is drawn above its own box is allright but thats it. Another box above with a higher z-index and it should not be visible.
I can not even nicely show a floating popup window over a div with an outline, it shines through! This is simply wrong. No other browser does it like this.
I have an absolutely-positioned DIV that I need to trap onclick events for. It turns out that, in IE7, the DIV seems to have no 'footprint' for things like clicking and even cursor. For example:
div {
width: 200px; height: 200px;
position: absolute;
border: 10px solid black;
cursor: pointer;
}
In IE7, that DIV has no 'footprint': it doesn't react to onclick(), and its cursor doesn't change to the pointer. Curiously, it DOES handle both those over its border - hence the large border in this example. Setting a background-color:
div { background-color: #fff; }
fixes the problem. But, in this case, that's not possible - I need the DIV to have a transparent background.
I've come across this bug in the past, but I cannot for the life of me remember the IE hack to fix it.
Try using a transparent background image.
I would suggest using a 2x2 or bigger .gif that is all transparent pixels. Set it to repeat on x and y and IE shouldn't have an issue with the clicks.
background: transparent url(path/to/spacer.gif) repeat left top;
/* Not all of that is necessary, but I have a tendency to define it anyway. */
Had the same problem and didnt found a better solution than the transparent gif. Note that this problem also occured in IE8 for me. You don't have to use a 2x2 px gif, 1x1 px is enough.