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.
Related
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
Unfortunately, I'm stuck working with legacy code in IE9.
Long story short, I'm cloning an itinerary template (hidden) using jQuery and applying a top border to all clones except the first visible (which is really the second actual because the template is hidden).
What I'm running into is that the border renders in Chrome, FF, and Opera, but not IE9. I think it's because I'm stringing several pseudo-classes together, though in my mind that shouldn't cause a problem.
I'm targeting the itineraries as follows:
#itinerary table.formTable:not(:nth-child(2)):after {
content: "";
border-top: 1px solid #999999;
width: 100%;
position: relative;
margin-top: -130px;
margin-left: 17px;
display: block;
}
Basically, apply the above CSS to all except the second itinerary.
The qusetion is, why is this happening in IE9? According to can I use, the pseudo-class is suported. Is this becuse I've strung so many into this particular rule? I'm at a loss.
Here's how it's supposed to look (Chrome):
Here's what's going on in IE9:
Here's a close-up of the CSS from the IE9 screenshot:
Extended arguments are not supported in IE9 for the pseudo-class :not
here are the docs on that issue
Most likely you can use
#itinerary table.formTable:not(:nth-child(2))
but not
#itinerary table.formTable:not(:nth-child(2)):after
Fortunately IE9 supports conditional commenting so you can write a fallback for IE9 and >
I'm debugging this site and trying to sort out some issues that arise in Internet Explorer (big surprise).
I'm adding a sub-title to several links as follows:
.subtitle a:after {
content:"The Subtitle Here";
}
On all modern browsers (and IE9) the content is center aligned because the container uses text-align:center;. However, in IE8 "The Subtitle Here" is flushed left.
Is there any way to control that with CSS?
Thanks.
Turns out you can do it easily:
I added another style rule that targets the added content...
.subtitle a:after {
text-align:center;
}
I guess IE9 and other browsers inherit the text-align property for :after content but IE8 doesn't. IE always keeps it interesting...
text-align:center
didn't work for me. This is how i got it fixed in IE8. (I have a seperate style sheet for IE8)
.printIcon:after {
content: "Print" !important;
text-align: center !important;
margin-top: 25px !important;
position:relative !important;
left:25px !important;
}
Hope this helps someone.
Neither of the answers above worked for me because of an underlying issue I had. Apparently IE8 does not support ::after, I changed it to :after and it worked just as intended.
Worth checking for!
I want to use to simulate a cursor by adding the following class to it.
.cursor {
border-left: 1px solid red;
margin-right: -1px;
display: inline;
position: relative;
z-index: 1;
}
It works perfectly fine in Firefox. However, nothing is shown in Safari. I've been trying many different values. It seems like border-left is not understood by Safari although w3c claims that it's supported by all major browsers.
Can someone please help me fix this problem?
Thanks,
It seems to work fine for me, using your exact code. I've created a jsFiddle here, which displays a red "caret" in Safari.
Is there a particular Safari version you're having problems with? Does the jsFiddle shown work for you? It uses only the code you've provided.
On further investigation, it seems that the span must have content in order to show the border. I'm not sure exactly why -- perhaps Safari is "optimising out" the empty span, or giving it zero height, or something like that.
This appears to be a WebKit issue, as the same behaviour occurs in Chrome. As a workaround, if you set a height on the span, it seems to work. If I change your CSS to:
.cursor {
border-left: solid 1px red;
margin-right: -1px;
display: block;
position: relative;
z-index: 1;
height: 1em;
}
...that is, adding a height to the span, then your border displays whether or not it has content. Therefore I guess what's going on is that without content, WebKit is giving no height to your span, and therefore no border. Which is perfectly sensible behaviour, really.
Here is your original jsfiddle, with a height added, that works in Safari and Chrome.
border-left style works on safari v1.0+
See my code snipped that I've just tested on Safari 5.0.2 and it worked:
http://jsfiddle.net/DqhfJ/1/
in fact all css tags that you provided - work in Safari 1.0+ , except display tag (it works in Safari 1.3.2+)
I'm having some problems with some CSS properties in IE8.
I've tested my site in IE7, Chrome and Firefox and they work fine but IE8 is having some layout issues.
I inspect the developer tool option on ie8 and I've noticed that some of the properties I set in CSS are being ignored by ie8. For example:
#header
{
position: relative;
padding: 20px;
height: 100px;
background:url(header.png);
}
In this header IE8 ignored the height property:
If I inspect the element in developer tools it is missing that property and it's crushed into another line:
background:url;HEIGHT: 100PX
The same thing happens for floats too:
#logon
{
float: left;
text-align:right;
width:20%;
height: 40px;
padding-left: 0px;
padding-right:7px;
border:0;
margin:0;
background: url(navgradient.gif);
}
This ignores the float value:
background: url(navgradient.gif); FLOAT:left;
What is happening here and how can I fix it?
I've seen this too. Some styles are shown on the same line, happens to me with "filter" lines.
The HTML renders in IE correctly, but if you try to toggle that CSS line on/off, it affects both properties. So unchecking "filter: alpha(opacity=25); BOTTOM: 10px" in dev tools disables both the "filter" and "bottom" CSS rules.
So it seems like a bug in dev tools' parser, but not the IE rendering engine. It's crazy how this still isn't fixed.
Seems like a parse error, or similar. Try putting quotes around the image names;
background: url('navgradient.gif');
I've seen this happen if the stylesheet contains filter properties.