Hey there, I'm having an issue with the font-face element. It seems to work perfectly fine in Chrome, but doesn't seem to be working in any other browser. Any ideas on what could be causing this? Thanks in advance!
Check out the demo here -> http://codepen.io/designhorf/pen/AlJKp
Having just an otf file is not sufficient. Different web browsers require different file formats, and as always, IE is the troublemaker.
@font-face{
font-family: 'YourFont';
src: url('../fonts/YourFont.eot');
src: url('../fonts/YourFont.eot?#iefix') format('embedded-opentype'),
url('../fonts/YourFont.woff') format('woff'),
url('../fonts/YourFont.ttf') format('truetype'),
url('../fonts/YourFont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}A valuable tool for generating both the code and the necessary files can be found at
Enjoy the process!
I have implemented a drag-and-drop circle feature inside an HTML canvas with the following code: var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); width = c.width = window.innerWidth * 0.9; height = c.height ...
My mind is a bit muddled when it comes to finding XPath: I'm not sure when to use //* at the beginning and when just // will suffice. For instance, I recently encountered this issue while trying to understand it on . On their homepage, there is a sea ...
Another website has a file that I would like to include in one of my own pages. The URL format is as follows: http://example.com/path/with/some/variables I could use an iframe to accomplish this, but I also want to customize the CSS of elements within th ...
I have been experimenting with Vuetify cards and encountered an issue with their height. In the image below, you can see that the cards' height varies until it reaches a specified max-height of 225px. I want to implement a text-overflow: ellipsis feat ...
I am facing an issue with aligning 2 divs on the same line, separated by a vertical line while ensuring that the line always has the height of the parent div. Despite trying various solutions suggested online, none seem to work for me. I cannot use positi ...
I am currently working with NextJs@12 and I am attempting to set up CSP for my application. Unfortunately, I keep encountering errors in my console and I cannot figure out where I am going wrong. Below is the current policy that I have in my next.config fi ...
In an attempt to conditionally assign a class based on the value of a boolean variable, I have declared the variable in the parent component: public alteredSidebar: boolean; This is my approach for dynamically setting the classname: <div [class ...
Having trouble with styling a page in jquery using CSS, specifically aligning #navgroup to the center of the footer and removing an additional white counter from the slider. Here is my code: <!doctype html> <html lang="en> <head> < ...
Here is a fiddle I created to demonstrate the issue at hand... https://jsfiddle.net/scottieslg/q78afsu8/10/ Running this fiddle in Chrome or Opera yields a value of 8. However, Firefox returns 9, and IE gives 8.5. How can I ensure consistency across al ...
My app has a unique feature where it displays different dropdown lists based on previous selections. Specifically, I have two lists - one for vehicle Makes and the other for Models. When a specific Make is chosen, like BMW or Audi, the next list will only ...
I am currently developing a web application for my own personal needs. One feature I would like to implement is the ability to set the download attribute on certain links. However, I have run into an issue where the files to be downloaded are hosted on ex ...
I am currently working on a project where I am trying to track my location using my smartphone and display it on a map. To achieve this, I am utilizing openlayers 2. However, I am encountering an issue. When I implement the code below in a Chrome Browser ...
Here's the code snippet I'm working with: @shade : #d14836; .stripes span { -webkit-background-size: 30px 30px; -moz-background-size: 30px 30px; background-size: 30px 30px; background-image: -webkit-gradient(linear, left top, ri ...
I'm looking to enhance a DIV element by applying a shadow effect using CSS3. To achieve a shadow on the bottom of the DIV, I have utilized the following code: -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.75); box-shadow: 0 1px 10px rgba(0, ...
My challenge involves analyzing an HTML document in string form to locate a specific keyword and identify the tag in which it appears. For instance, if my document looks like this: $string = "<html> <head> <title> ...
Currently facing an issue with jQuery. I created a drop-down menu and would like it to expand when the li tag within the menu is clicked. Even though I am using the jQuery click function successfully, there seems to be a problem where the webpage refreshe ...
I am currently working on creating an interactive FAQ accordion with specific features in mind: 1- Only one question and answer visible at a time (I have achieved this) 2- When toggling the open question, it should close automatically (having trouble with ...
Is there a way to toggle between the symbols + and - using HTML entity codes + and -? I have attempted different solutions for toggling HTML content, but none seem to work correctly with these specific codes. It toggles once, but doesn&apo ...
The input box below accepts values in percentage form. To indicate this, I have set a placeholder that says Percentage (%). https://i.sstatic.net/LJ1ee.png My goal is to automatically add a % symbol to the value as soon as it is entered into the input fi ...
While working on developing a forum, I encountered an issue where if I repeatedly input letters or words without any spaces, it causes everything to overlap. Below is an example highlighting this problem: https://i.sstatic.net/KStNq.png Although there is ...