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+)
Related
I've got some CSS code in order to display the title attribute when touching on abbreviations and symbols of a smartphone's screen. Within a section '#media only screen and (max-width: 767px)' of my stylesheet I have the following code:
span[title]:active::after,abbr:active::after {
color: Maroon;
font-weight: bold;
content: 'Meaning: ' attr(title);
position: fixed;
top: 3ex;
left: 2ex;
display: block;
z-index: 100;
background-color: White;
box-shadow: .3ex .3ex .1ex Grey;
border: 1px solid grey;
padding: .4ex;
width: 70%;
height: auto;
}
It does work flawlessly on Android -I've tested it on Chrome, Firefox and Samsung browser- and my iMac -tested it on Chrome, Firefox, Safari and Opera after stretching the width of the browser's window, but it doesn't work on iOS at all! The trick/workaround of adding '-webkit-transform: translate3d (0,0,0);' added to the code did not help to this.
I should appreciate any help a lot!
Thank you very much indeed!
SOLVED!
I tried the solution as proposed in the following link: Enable CSS active pseudo styles in Mobile Safari
and it works fine. The problem was that Safari Mobile disables :active pseudo-class by default, and this simple idea solves it.
I tried some other working solutions, such as 'body ontouchstart=””' and similar ones, but all of them gave errors when checking the code against W3C validator.
Many thanks to all those that answered and tried to help!
The :active property only works on activabe elements. Documentation says:
There may be document language or implementation specific limits on which elements can become :active or acquire :focus.
So the most simple thing to do is to set the tabindex attribute to 0 for each element you want to be activable.
This has the big advantage that your code will work with keyboard.
EDIT: adding tabindex=-1 for all elements can be done easily with jQuery using
$("abbr[title]").attr("tabindex", -1);
or using standard javascript
var ele=document.querySelectorAll("abbr[title]");
for (var i=0;i<ele.length;i++) {
ele[i].setAttribute("tabindex", -1);
}
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 doing some changes to a wordpress theme, but Safari (both on Mac and iOS) seems to be ignoring some of the CSS, whereas other browsers work fine.
An example - this is how it looks in Chrome and Safari:
https://s3-eu-west-1.amazonaws.com/cystennin/chrome-safari.png
This is the CSS I've used, specifically for the images.
.homeleftside1 img {
width: 70px;
height: auto;
margin-right: 15px;
float: left;
border-radius: 100%;
}
I've got a test site here so you can see what I mean: link removed
Any ideas where I am going wrong? Thanks
Is it possible that Safari doesn't support border-radius?
Try to add -khtml-border-radius: 50%;, that should work...
Similar question: Rounded cornes (border radius) Safari issue
Just took a look in Safari and Chrome, but Safari isn't even listing the styles you set in your stylesheet in the list of matched styles for that particular image you're targeting. However, Safari is reporting a couple of errors in your stylesheet: a couple of mismatched curly braces etc. Maybe they are throwing off WebKit? (Would have posted as a comment, but don't have enough rep yet.)
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 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.