I am attempting to create a heading with lines on both sides, but I am facing an issue where it only seems to work on the left side in IE.
h2 {
position: relative;
overflow: hidden;
text-align: center;
}
h2:before,
h2:after {
position: absolute;
top: 44%;
overflow: hidden;
width: 50%;
height: 1px;
margin-left: 5%;
content: '\a0';
background-color: red;
}
h2:before {
margin-left: -55%;
text-align: right;
}<h2>THE HEADING</h2>If you're looking for a workaround that is compatible with Chrome, Firefox, and Internet Explorer, this solution might be just what you need.
The issue with compatibility in IE was caused by the positioning of pseudo elements not being relative to the text. To solve this problem, I removed absolute positioning from the pseudo elements and changed their display to table-cell, ensuring they are positioned correctly relative to the text.
You can adjust the right/left positioning to customize the spacing around the text as needed.
.line {
display: table;
white-space: nowrap;
overflow: hidden;
text-align: center;
}
.line:before,
.line:after {
content: '';
display: table-cell;
position: relative;
top: 0.5em;
width: 45%;
height: 1px;
border-top: 1px solid #f00;
}
.line:before {
right: 5%;
}
.line:after {
left: 5%;
}<h2 class="line">THE HEADING</h2>
<h2 class="line">THE LONGER HEADING</h2>After creating my e-commerce website and implementing the woocommerce plugin to display products, I encountered an issue. The main menu pages are all showing up with the list-style, but the pages associated with the plugins are not displaying the list-styl ...
Currently, I am developing a dynamic formula generator using jQuery's drag and drop functionality. Here is what I have accomplished so far: I have two lists: <ul id="head"> <li class="horizontal">Salary</li> <li class="h ...
My goal is to make a row editable when a button is clicked. $(":button").click(function(){ var tdvar=$(this).parent('tr').find('td'); $.each(tdvar,function(){ $(this).prop('contenteditable',true); }); }); <s ...
I recently removed the reference to the master page from the head section @{ Layout = null } After making changes in my CSS: html { background-image:url('Images\BGP.jpg'); } However, I didn't see any changes. Any suggesti ...
I've implemented a fixed menu on my website. Everything seems to be working fine, but here's the issue: When I scroll down and the fixed menu starts animating, if I continue scrolling quickly, the animation pauses. It only continues when I stop ...
Starting from scratch with html, css, and javascript, I've embarked on a basic learning project. Within this project, I plan to create two main pages: a list page and a detail page. The list page will showcase posts on the html screen, featuring only ...
import * as React from 'react'; import { styled, useTheme } from '@mui/material/styles'; import Box from '@mui/material/Box'; import MuiDrawer from '@mui/material/Drawer'; import MuiAppBar from '@mui/material/Ap ...
Trying to utilize BeautifulSoup for scraping my banking website to automatically retrieve the generated PDF from monthly purchases. Successfully logging in and reaching the page with the button, but the button does not seem to be a simple link - possibly a ...
Currently, I am in the process of learning CSS and HTML5. However, I am experiencing some difficulty when it comes to implementing basic elements. Specifically, I am using Google Chrome and attempting to create a top bar for my webpage. This top bar should ...
I have a JSON object that I need to use to retrieve images from a remote URL and display them in the img tag using API calls. The API link can be found at <div class="emoji"> <ul id="emojiz"></ul> <span style= ...
There seems to be an issue with AngularJS ng-src not working properly with the HTML5 Video element in this specific fiddle: http://jsfiddle.net/FsHah/5/ Upon inspecting the video element, it appears that the src tag is correctly filled with the appropriat ...
I am looking to retrieve user storage data (local and session) from a specific tab, similar to what is shown in this app (see screen below). From my understanding, I need to access the window object of the active tab. While I have obtained the object, I a ...
Hello there, I've come across the following layout: <Box width="100%" height="100%" p={1}> <Box my={1} display="flex" justifyContent="center"> </ ...
Here is an example of a table: <TABLE class=vysledky > <TR class=podtrzeni> <TD width="39" height="19">Order <br /> League</TD> <TD width="39" height="19">Order <br /> Team</TD> <TD width="3 ...
Feeling frustrated with this seemingly straightforward code challenge. My sticky menu is causing me headaches on iOS devices, particularly the iPhone 6 running the latest iOS. It seems like the menu jumps into its fixed position too early, leading me to be ...
settings.py import os BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) SECRET_KEY = '@6qt%i+0&_=z0#zl^+!u3bw6c7dmg4e3khboj%7s7439z9#ky(' DEBUG = True ALLOWED_HOSTS = [] INSTALLED_APPS = [ 'django.contrib.admin& ...
Are there any tools or suites that can minify HTML, JavaScript, and CSS all at once? Ideally, these tools should be able to: Identify links from the HTML document and minify the associated JavaScript and CSS. Remove any unused JavaScript functions and CS ...
Running main.js in the console using node works perfectly fine for me. However, when I attempt to run it through a browser by implementing an HTML file, I do not see anything printed to the console. Interestingly, if I remove any mentions of Vector.ts fro ...
I seem to be encountering an issue with the auto play functionality of the owl carousel. I have uploaded and included all the necessary files, and it is functioning properly when initially loaded. The auto play feature works perfectly, but when I hover ove ...
I have a total of 12 divs that are configured to display a thumbnail along with some text dynamically retrieved from a database query. When displayed individually, they appear fine in a column format with a border around them showcasing the thumbnail and t ...