I've been testing with borders with opacity and Webkit seems to be having a weird behavior.
Here's my code
<style>
div{
position: relative;
width: 300px;
height: 300px;
background: #00f;
}
span{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(255, 255, 255, 0.5);
}
</style>
<div>
<span></span>
</div>
You can test it here. In Firefox you'll get as expected: a 10px white inner border with 50% opacity around the div, however, at least Chrome (but I suspect Webkit) seems to be overlapping the border's borders (somehow that makes sense). And I think it's not intented, since it seems to be overlapping itself!
Is this a bug or just an intended feature?
Bug on the Chrome issues list (guess what, nobody cares):
http://code.google.com/p/chromium/issues/detail?id=36475&q=transparent%20border%20color&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS
Taking a look at the spec, this indeed seems like a bug:
http://www.w3.org/TR/css3-background/#box-shadow-samples
The examples, too, have an inner border with alpha and show Firefox like behavior.
The problem you have is discussed in detail here:
http://snook.ca/archives/html_and_css/safari-transparent-borders
If you change the opacity value of the colliding borders just a tiny bit you get a non-perfect fix, hope that helps.
Related
I have a question on something weird that is rendering on the latest IE and Chrome browsers. I have a div that is supposed to span 100% of a parent. So clumsily, I gave it - width: 100%px; as a CSS property. Here is my entire item:
.loc_vendiv{
position: relative;
margin-top: 5px;
left: 0px;
width: 100%px;
height: 120px;
border: 1px solid #333;
background-color: #fff;
}
The weird thing - that worked perfectly. So much so, that I just noticed today that this was wrong. Not wanting an ugly style sheet, I removed the px from the end. And... the div was two pixels too wide. Any explanation as to why this is happening? Here is the parent div:
#loc_catlist{
position: absolute;
width: 612px;
height: 720px;
top: 50px;
left: 0px;
background-color: #eee;
overflow-y: auto;
overflow-x: hidden;
}
I'm mildly annoyed, as the bad code works, yet the correct code doesn't do what I want. I don't think I can leave it, though. I don't like little hiccups like this...
It's because of your border.
Try adding :
box-sizing: border-box;
to your .loc_vendiv class, it will take the border in account.
Browsers usually ignore invalid css rules like width: 100%px; which means that to get the style you had with the mistake. you only have to remove the width rule.
2px too wide is likely caused because you have a width of 100% in addition to a border of 1px (all around adds up to 2px width).
A fix can be found here from "Paul Irish" about
box-sizing
what happens is that when the width value is wrong (100%px;) this part of the CSS is simply ignored by the browser. If this part of the css was deleted, the result would be the same.
About the 2 extra pixels, this happens because of the border set to the div.loc_vendiv.
The width of div.loc_vendiv is equal to the width of div#loc_catlist and to this is added the border value (1px for the left border and 1px for the right border = 2px).
Remember that the border width is added to the size of the object while the padding creates an internal space.
I'm experiencing issues with dreaded IE again.
I have created a single line divider that separates different elements on a page. The code itself is working great in webkit browsers as it would but I can't seem to replicate the effect in IE. I have attempted to use CSS gradient generators but they do not replicate the fading effect.
My code is below
#home-single-line {
margin: 25px 0;
height: 1.4px;
background: white;
background: -webkit-gradient(linear, 0 0, 100% 0, from(#123f67), to(#123f67), color-stop(50%, #fff));
position: absolute;
top: 55px;
left: 580px;
width: 550px;
}
The effect I am trying to achieve can be seen here
and the background colour is the background colour I am using on my website
Please help, IE will be the death of me!
Thanks for your time.
Use an <hr> element and style it. See CSS Tricks code for your example, it looks identical: http://css-tricks.com/examples/hrs/
I am trying to create a box with a jagged edge, that can actually be used as a HTML element should be, and can resize etc.
Finally got my head around border-image, got it looking nice, and then when I rotate it, it gets a gap between the border-image and the main fill:
I googled it, and found an answer on SO telling someone to set
-webkit-backface-visibility: hidden;
This cleared it up, but obviously only in webkit browsers.
I tried using -moz-backface-visibility as well, but it didn't clear the issue up in Firefox.
Any suggestions?
jsFiddle
e: I actually thought I may be able to fix it by setting a background color, and then setting the background-clip to padding-box, but honestly it just left me in the same position.
One trick that fixes the problem both in Webkit and FF is setting perspective (instead of backface visibility)
.box.one {
-webkit-transform: perspective(999px) rotate(1deg);
-moz-transform: rotate(1deg);
-ms-transform: rotate(1deg);
-o-transform: rotate(1deg);
transform: perspective(999px) rotate(1deg);
}
fiddle
Adding an after pseudo class with negative margin seems to fix the Firefox issue.
.rough:after {
content: "";
display: block;
margin: -1px;
height: 302px;
background: black;
}
Fiddle demo: http://jsfiddle.net/Wkk7W/3/
Note that the display:block seems to be an essential part of my hack/fix.
Update: Depending on your plans for content inside the div, that exact example might not suit. However, I think the concept could be tweaked depending on your requirements - e.g. using a 3px wide black border instead of a background fill, and using position:absolute to allow other text to be layered on top of the box.
Gonna answer myself, because this solution actually covers my needs of it being "as a html element should be, and can resize etc", even though I developed this solution from Grants answer.
http://jsfiddle.net/Wkk7W/6/
Set the element to position:absolute, then give it a pseudo element with:
content: "";
display: block;
position: absolute;
top: 0;
width: 102%;
margin: -1px 0 0 -1%;
height: 102%;
background: black;
z-index: -1;
This way it keeps the elements width and height, z-index: -1 to put it behind the text. It might not require the display:block, i didn't check.
There are still a few tiny gaps but they are basically impossible to cover and I am happy with it the way it is.
I'm using :before and :after pseudo elements to create shapes. In this case triangular shape that need to be shown as the end of a rectangle. I'm finding myself with this issue which I do not understand why it's happening. The image should look like this image 1, but it looks like image 2.
image 1 (all browsers except FF):
image 2 (Firefox):
As asked here you have a jsfiddle with the code:
http://jsfiddle.net/LpXxM/
.news-info a:before {
position: absolute;
top: 0;
left: -20px;
border-right: 20px solid rgba(64, 64, 64, 0.85);
border-top: 20px solid transparent;
content: "";
}
I just checked and it seems the issue is simply with the left css property. If instead of left: 20px, it would be left: 22px it works with Firefox, but of course the rest of browsers are then wrong. So, why in the heck firefox has 2px difference with the other browsers? And how to solve this or target this issue?
I'm using normalize as a reset for the site. Can somebody help?!
http://www.milknhny.co.uk/SofiaWork/home/
Hi
The following has a banner, which has a box shadow, and i want it to sit over the top of the image.
Ive tried putting a z-index and position of absolute on the div class .maincontentinner
however the background seems to mess up (with it being a gradient) when i do this.
Any ideas how i can achieve this? I have a clearfix in there also
thanks
style.css line 431
.headerwrap {
width: 100%;
height: 218px;
background-color: #ffffff;
box-shadow: 3px 3px 8px #41434b;
posistion: fixed;
z-index: 99999;
}
Change posistion to position.
First off, I'd use relative rather than absolute positioning, since I don't think you want to disrupt page flow.
I applied:
position: relative;
z-index: -1;
to .maincontentinner and it seems to work just fine. What do you mean by "the background seems to mess up"? What browser are you testing in?