Snippet: http://jsfiddle.net/bHRVe/
An arrow sprite is utilized, and the background position appears correctly in Firefox and IE8:
Nevertheless, when switching to RTL direction, IE9 seems to be causing issues as the arrow disappears:
If I adjust the positioning from left -52px to right -52px, it solves the problem in IE9 but introduces new issues in other browsers.
Is there a solution that resolves this using the same CSS without resorting to conditionals or hacks?
Here is a simple solution using pure CSS to solve your issue:
CSS:
.button span {
background: url("http://i48.tinypic.com/16716yb.png") no-repeat 0 -52px;
margin-right: 0.5em;
padding: 0 5px;
direction: rtl;
width:4px;
height:15px;
display:inline-block;
}
HTML:
Note: It's recommended to include a space ( ) in empty elements as it can help with browser compatibility.
<a class="button" href="#">
<b>تم, غزو عل جنوب</b>
<br/>
<u>ب ان. Testما وص</u>
<span> </span>
</a>
Additional Note: By default, <span> and <a> elements are inline elements. Depending on our needs, we may need to use display:block; or display:inline-block; with CSS.
In this case, you could also use display:block;, but then you'd need to add float:left to ensure the span appears correctly.
Screen Shot: IE9
Modify your CSS slightly:
.button span {
background: url("http://i48.tinypic.com/16716yb.png") no-repeat scroll left -52px transparent;
margin-right: 0.5em;
direction: rtl;
display: inline-block;
width: 10px;
height: 16px;
}
See it in action here. Tested and proven to work on IE9, Chrome, Firefox, Safari, and Opera :)
Recently, I switched over to the stunning Now-UI kit which is built on Bootstrap 4.0. While Bootstrap has always been highly responsive on all devices, I am currently facing an issue with the responsiveness of the Now-UI kit on mobile devices. If you cou ...
I'm currently experimenting with jQuery Mobile to enhance my skills, but I'm facing issues with applying the basic CSS styling. I have included the css link from the jQuery Mobile website and ensured that I am connected to the internet. However, ...
I currently have 3 different divs nested within each other: <div class="a"> <div class="b"> </div> <div class="c"> </div> </div> Here is the current CSS styling applied to these divs: .a { hei ...
Current Admin Panel Themes /** Custom Portlet Color Options **/ .Vibrant-Pink { background: rgb(220, 79, 173); } .Rich-Red { background: rgb(172, 25, 61); } .Bold-Orange { background: rgb(210, 71, 38); } ...
I have implemented a feature using jQuery to disable the submit button and display a loading image. Here is how I have set it up: The HTML structure for the submit button looks like this: <div id="registerbtn" name="registerbtn"> <input typ ...
I am facing a challenge with a background image that has been set to background-size:cover; and a series of overlaid divs that I would like to convert into separate clipping masks. I have explored the clip: rect(20px, 20px, 20px, 20px,) feature, but since ...
I am attempting to replicate the functionality of this fiddle: http://jsfiddle.net/jhudson8/135oo6f8/ (I also tried this example http://codepen.io/adamaoc/pen/wBGGQv and encountered the same issue with the onClick handler) My goal is to make the fiddle c ...
My problem is with VS Code and Live Server for HTML CSS. I expected the page to automatically reload after editing my HTML, but that's not happening. Even though I have Auto-Save enabled, Live Server isn't updating or refreshing my page automati ...
I've been researching whether JavaScript can determine if a file is a video or an image. However, most of the information I found only shows how to accept these types using the input tag. What I really need is for JS to identify the file type and the ...
As I strive to incorporate a Dark Mode feature based on the user's system preferences, I utilize the @media query prefers-color-scheme: dark. While this approach is effective, I also find it necessary to conduct additional checks using JavaScript. de ...
I have a grid of images and I want each image to expand into fullscreen when clicked. However, the JavaScript I am using is causing only the last image in the grid to overlay. How can I resolve this issue? Here is the code I am currently using: http://js ...
I've been trying to find a solution to remove the annoying blue highlight box that appears when dragging on the canvas while using fabric js, but so far I haven't had any luck. I've tried the following code, but it only works for text and n ...
This test page has been created to showcase the issue: <html> <head> <style> .panel { position: absolute; width: 326px; max-height: 200px; overflow: scroll; z-index: 1000; } .item-container { width: 100%; list-style: none; ...
I am looking for a way to scroll the contents of my table horizontally while keeping the table structure fixed. Currently, when I try to scroll, the table structure scrolls along with the content, resulting in visibility issues at both ends due to the corn ...
Within a table cell, I have another table. The outer table has a hover effect applied to it, but I want to prevent the inner table with the id "table_I_don_not_want_to_hover" from inheriting this hover behavior like the rest of the cells and rows. I need t ...
I have designed two buttons using css and I am looking to align them below the title "forecast customer activity". Due to extensive styling in css, the code might appear lengthy. Requesting assistance with a solution after reviewing the following code snip ...
I am working on creating an overflow effect with tagging that fades out at the beginning to provide a subtle hint to users that there is more content. Here is what it currently looks like: https://i.stack.imgur.com/fXGBR.png To achieve this, I added a fa ...
I am struggling with aligning the background of my vertical menu to the right and center from the top. Here is the code I have tried: ul.nav { margin:0; background-position:center; background-image: url(../images/nav_bg.gif);font-family: "Century Go ...
My goal is to enhance the appearance of words that begin with an "@" symbol by making them bold. For example, transforming the sentence: '@xyzharris has a cat @zynPeter' into: '@xyzHarris has a cat @zynPeter' ...
I am currently facing an issue with a PHP page that utilizes flush() and ob_flush() to send progress updates to a browser. The page generates a styled <ul class="progresslog"> where individual <li class="{success|warning|error}"> items are sent ...