I am currently working on a site which has an design where the main 'welcoming text' contains more than one line (as it is a short introduction about a product). This has an background of a transparant (0.7) white (rgba(255,255,255,0.7) with multiline padding. Yes, multiline padding I am saying. What that means, is that every line of text has top, bottom, left and right padding, background color and also a small transparent space between the lines.
To accomplish this, I used a box-shadow with an horizontal offset to simulate the left and right padding on each line. This does work on all browsers except Internet Explorer. As we want to have site working on all browsers I tried fixing this problem for a while now and I almost have come to the conclusion that this is just an internet explorer issue.
I used Geoff Muskett his example (http://geoffmuskett.com/text-with-background-padding-on-the-end-of-each-line-and-a-gap-between-lines/) and it does work as excepted except IE.
The problem is that when I open the page in IE, the box-shadows seems to be rendered somewhat blurry even though I set the blur to 0 pixels. (or just not added it, both did not work).
Even the code from Geoff his example does not work:
HTML
<h2><span>Could you benefit from having Alfi in your home?</span></h2>
CSS
h2 {
line-height: 1.8em;
font-size: 1.7em;
display: inline;
}
h2 span {
padding: 0.2em;
box-shadow: 0.2em 0 0 rgba(255,255,255,0.7), -0.2em 0 0 rgba(255,255,255,0.7);
background-color: #fff;
background-color: rgba(255,255,255,0.7);
}
Is there anybody here that knows this issue and knows if there is a solution to this that is not very hacky (not preferred)?
IE 11.0.9600.17905
EDIT
3 August 2015 09:32
I have been investigating this issue this weekend and found some posts of people having exactly the same issue as I am currently having. This seems to be a rendering bug in IE. See: https://connect.microsoft.com/IE/feedback/details/810756/ie-11-gap-between-element-background-and-its-box-shadow
Also in another StackOverflow post, someone by the name of #nickmorss says using the box-shadow to accomplish the multiline padded text is not working in IE11 and FF34+. It could be fixed in FF using box-decoration-break: clone; but this does not work at my side.
I think this is something not fixable in CSS by myself as this may be just a narly bug.
I found this worked in IE11
body{
background-color: blue;
}
h2 {
line-height: 1.8em;
font-size: 1.7em;
display: inline;
}
h2 span {
padding: 0.2em;
box-shadow: 0.2em 0 0 rgba(255, 255, 255,0.7), -0.2em 0 0 rgba(255,255,255,0.7);
background-color: #fff;
background-color: rgba(255,255,255,0.7);
}
<h2><span>Could you benefit from having Alfi in your home? Making this text a little longer so that it wraps on stackoverflow</span></h2>
So I'm thinking that maybe your site is perhaps in quirks mode, or using a different rendering mode other than IE11.
Confirm that you are running in IE11 mode by pressing F12 and going to the emulation tab. Are you in the right document mode. If not you will have to fix your site to ensure it's using the right document mode.
Please note, that in the comments of that blog post it does mention it doesn't work in Firefox, but someone has post code that does.
Not sure if it'll solve it but try declaring your rgba values as rgba(255,255,255,0.7) I've not seen hex values used within rgba before and this may be confusing IE
Related
Having a problem with box-decoration-break and overflowing. Here is a fiddle to illustrate my problem: https://jsfiddle.net/n56226na/3/
span {
display: inline;
padding: 7px 20px;
background: #000;
color: #fff;
font-size: 18px;
line-height: 40px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
Basically, I need the text to be boxed, and with padding, according to the design. The problem is on browser resize, the boxes always overflow to the right (and off the page), while the left hand side is padded nicely, due to centre alignment. Here's an image to illustrate my problem:
In an ideal world, the span would be centre aligned, with a black box white text, but wouldn't overflow it's parent div. Not sure if this is even possible. Appreciate any ideas.
I asked a similar question and after some researches and taking inspiration from others users' suggestions, I found possible solution.
First of all, in this page you can find some possible solutions using many different methods.
The best that "actually" (browser support varied during time) is to combine the cited "Fabien Doiron's box-shadow Method" with a little modification to address only specific behaviour of Firefox 32+.
Your updated jsFiddle has the following specific rule:
span {
display: inline;
padding: 7px 0;
background: #000;
color: #fff;
font-size: 18px;
line-height: 40px;
box-decoration-break: clone;
box-shadow: 10px 0 0 #000, -10px 0 0 #000;
}
I added a multiple box-shadow to mimic lateral padding (resetting your original padding declaration).
Anyway, is necessary to add box-decoration-break: clone; to override specific Firefox 32+ behaviour that has box-decoration-break: split; as default.
Please, note that I left only box-decoration-break: clone; because is necessary only for FireFox.
Instead, you (actually) MUST remove analogue specifix Chrome variant, -webkit-box-decoration-break: clone; because it's the responsible of your unwanted horizontal overflow on window resize.
So, due to fact that Chrome needs vendor prefix for this property, declaring it only with standard syntax is a workaround to make it running correctly even in it and also in IE9+
Add a right margin to the parent the same width as the text's padding (20px in your case). That way it will trigger a line break a little sooner, keeping your text from ever seemingly overflowing.
I have this css to put an icon after each external link:
a[target="_blank"]:after {
background: url("images/external_icon.png") 0 0 no-repeat;
border: 0 none;
content: "";
padding: 0 14px 0 0;
}
If I would to change to :before instead, the icon will appear in front of the link instead. So far, so good.
But in my right-to-left version of the site, while using direction: rtl;, the icon still appears to the right of the element, instead of being "flipped" to the other side. Changing to a :before will still make the icon appear to the right of the element.
Is this a known FF bug? Is there any other solution?
(Works fine in Chrome)
Ok, so I found a solution. Make it inline-block instead.
display: inline-block;
height: 13px;
width: 13px;
Simple solution, but getting there isn't aslways as easy.
I still feel like the css from the question might be a browser bug?
The Firefox behavior seems to be correct: the rendering of the :after should be the same as the rendering of an empty span with those styles inserted at the end of the a[target="_blank"]. If you try that, you get identical behavior in Chrome and Firefox, and it matches the Firefox behavior for :after.
You may want to file a WebKit bug, though.
I'm trying to style the dropdown arrow of a <select> element with CSS only , it works perfectly in Chrome/Safari:
select {
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url('./select-arrow1.png') ;
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
margin: 0;
padding-top: 2px;
padding-bottom: 2px;
width: 200px;
}
Which renders beautifully as seen here
By that logic, the only thing I had to do to make it work in Firefox was to add all -webkit-* stuff as -moz-* :
-moz-appearance: button;
-moz-border-radius: 2px;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-padding-end: 20px;
-moz-padding-start: 2px;
-moz-user-select: none;
It works for 99%, the only problem is that the default dropdown arrow doesn't go away, and stays on top of the background image as seen here
It looks like -moz-appearance: button; does not work for a <select> element. Also -moz-appearance: none; has no effect to remove the default dropdown arrow.
So what is the correct value for -moz-appearance to remove the default dropdown arrow?
Updates:
December 11, 2014: Stop inventing new hacks. After 4 and a half years, -moz-appearance:none is starting to work since Firefox 35. Although moz-appearance:button is still broken, you don't need to use it anyway. Here is a very basic working example.
April 28, 2014: The mentioned css hack worked for a couple of months but since the begining of April 2014 this bug is creeping back into Firefox 31.0.a1 Nightly on all platforms.
Update: this was fixed in Firefox v35. See the full gist for details.
== how to hide the select arrow in Firefox ==
Just figured out how to do it. The trick is to use a mix of -prefix-appearance, text-indent and text-overflow. It is pure CSS and requires no extra markup.
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Long story short, by pushing it a tiny bit to the right, the overflow gets rid of the arrow. Pretty neat, huh?
More details on this gist I just wrote. Tested on Ubuntu, Mac and Windows, all with recent Firefox versions.
This is it guys! FIXED!
Wait and see: https://bugzilla.mozilla.org/show_bug.cgi?id=649849
or workaround
For those wondering:
https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c59
First, because the bug has a lot of hostile spam in it, it creates a hostile workplace for anyone who gets assigned to this.
Secondly, the person who has the ability to do this (which includes rewriting ) has been allocated to another project (b2g) for the time being and wont have time until that project get nearer to completion.
Third, even when that person has the time again, there is no guarantee that this will be a priority because, despite webkit having this, it breaks the spec for how is supposed to work (This is what I was told, I do not personally know the spec)
Now see https://wiki.mozilla.org/B2G/Schedule_Roadmap ;)
The page no longer exists and the bug hasn't be fixed but an acceptable workaround came from João Cunha, you guys can thank him for now!
To get rid of the default dropdown arrow use:
-moz-appearance: window;
Try putting opacity:0; your select element will be invisible but the options will be visible when you click on it.
It is worth trying these two options below while we're still waiting for the fix in Firefox 35:
select {
-moz-appearance: scrollbartrack-vertical;
}
Or
select {
-moz-appearance: treeview;
}
They will just hide any arrow background image you have put in to custom style your select element. So you get a bog-standard browser arrow instead of a horrible combination of both the browser arrow and your own custom arrow.
In Mac OS X, -moz-appearance: window; will remove the arrow accrding to the MDN documentation appearance (-moz-appearance, -webkit-appearance).
It was tested on Firefox 13 on Mac OS X v10.8.2 (Mountain Lion). Also see: 649849 - Make -moz-appearance:none on a combobox remove the dropdown button.
While you can't yet get Firefox to remove the dropdown arrow (see MatTheCat's post), you can hide your "stylized" background image from showing in Firefox.
-moz-background-position: -9999px -9999px!important;
This will position it out of frame, leaving you with the default select box arrow – while keeping the stylized version in Webkit.
it is working when adding :
select { width:115% }
I am debugging my app in IE8's developer mode and I'm running into some very strange behavior. IE8's dev mode usually displays every CSS style on a new line, but not in these cases... take three examples:
#1
.messages .read
background-color: rgb(234,234,234); HEIGHT: 1.5em
padding-top: 0.3em
#2
a:link
color : rgb(80,80,82); TEXT-DECORATION: none
#3
#messaging .body
border-bottom: rgb(...) 1px solid
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#FDFDFD', endColorstr='#C2C2C2'); BORDER-LEFT: rgb(...) 1px solid; PADDING-BOTTOM: 1.5em; MARGIN: 15px 0 25px; etc.
As you can see, these are three cases where IE seems to behave strangely, and especially for #3, I get some really strange artefacts, such as an ugly dark grey border around my gradient box.
Is there a known way of getting around this behavior?
Update - gradient artefacts fixed
#3 was fixed surprisingly easily, by adding position:relative; to that style. Apparently IE needs this in order to render its gradients properly.
I'm still interested in knowing why IE lumps some styles together on one line, and whether this quirk has any actual effect.
In the samples you give there are at least some missing semi-colons. This may very well be the problem here.
As suggested in comments: try to validate your CSS. Here's the one from W3:
http://jigsaw.w3.org/css-validator/
I inherited a site that I'm working on finishing and there is this style applied to tags inside my footer (forgive me if I don't give enough info, just let me know and I'll put it up). The style puts a subtle background color around the header text and rounds the corners a bit:
h4 {
background: none repeat scroll 0 0 rgba(32, 37, 41, 0.3);
border-radius: 8px 8px 8px 8px;
color: #5CB414;
font-size: 26px;
font-weight: bold;
margin-bottom: 20px;
padding: 12px 0 8px 10px;
position: relative;
}
This works great in Chrome and FF but in IE8 it doesn't work. And in IE8 it doesn't float the columns next to each other. Here is the site. Scroll down to the bottom to see the issues (should be 3 columns but in IE it is only 2 and there is no background style applied to the H4.
I know IE is finicky, but I don't know what to do about it. Any help will be greatly appreciated. Thanks!
as far as losing the 3 columns at the bottom simple replace the ".col" width:300px to width:292px; It's just barely too big.
Also with the rounded corners being crossbrowser compatible I like to get my styles from here: http://css3please.com/
I do not know that rounded corners will work in ie8 or less so you might try doing it with jquery instead of css3
http://jquery.malsup.com/corner/
Versions of IE prior to 9 don't support RGBA or border radius, so these are simply being ignored. You can try the cross-browser syntax at http://css3please.com, but this won't give you rounded corners in versions of IE prior to 9.
Your column float issue stems from the use of an nth-child selector on line 1454 of your style.css:
.col:nth-child(3) { margin-right: 0; }
Again, IE8 and lower don't support this so you'll have to find a work around. You can add a class of "last" to the third column, and place this in your stylesheet:
col.last { margin-right: 0 !important; }