CSS vertical text not functional as expected

Trying to make some text vertical, here is the CSS I'm using:

h2.verticle{
color:#1a6455;
border:0px solid red;
writing-mode:tb-rl;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
white-space:nowrap;
display:block;
bottom:0;
width:20px;
height:20px;
font-size:20px;
font-weight:normal;
border:none !important;}

Works in all browsers except for IE. Code source:

The site linked works fine on the same version of IE, any thoughts on why it's not working?

css

Answer №1

Here is a new version to try:

<style>
.flipvertical
    {
        writing-mode: tb-rl;
        filter: flipv fliph;
    }
 </style>

<div class="flipvertical">
    Test-1</div>
<div class="title">

You can find more information about this technique on this site: 

vertical-text {
-moz-transform: rotate(90deg);
border: 0 solid red;
bottom: 0;
color: #333333;
display: block;
font-family: ‘Trebuchet MS’,Helvetica,sans-serif;
font-size: 24px;
font-weight: normal;
height: 20px;
text-shadow: 0 0 1px #333333;
white-space: nowrap;
width: 20px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

apply full width styling to bootstrap select dropdown

<div align="center" class="form-group"> <select v-model="subject" class="form-control"> <option v-for="n in papertypes" class="">{{ n.type }}</option> </select> <br> By default, Bootstrap makes the s ...

cssbootstrap-4

Mastering the alignment of Material-UI Menu items

When using the menu and menu item components of material-ui to create a select dropdown menu, I encountered an unusual issue where the dropdown menu always expands to the left side of the box, as shown in the image below: https://i.stack.imgur.com/ykRrp.jp ...

javascriptcssreactjsmaterial-ui

The default setting for the calendar picker indicator should be enabled

Whenever I hover my mouse over it, an indicator pops up, but I want to make it the default <input type="date" class="form-control" name="Date" [(ngModel)]="opening_date" (ngModelChange)="Operating()" style="width:550px" required> inp ...

htmlcss

What is the process for editing or importing CSS within a React project?

I'm a beginner in React and I am encountering an issue with CSS not loading properly. I followed the tutorial for importing it, but it seems like there might be a better way to do it now as the tutorial is outdated. Below is my code, I would appreciat ...

cssreactjs

Troubleshooting a problem with CSS Matrix animations

Lately, I've been working on creating some matrix animations. However, I noticed an unusual issue. The code below seems to function differently across Firefox, Safari, and Chrome: @-moz-keyframes matrix { from { -moz-transform: matri ...

cssmatrix

Unable to locate the element within the specified div using xpath or css selector

I have attempted to retrieve the output "January 27" using this code: task_offer_deadline = driver.find_element_by_xpath('//*[@id="table"]/div[2]/div/a/div[1]/span[2]/div/em').text The xpath was obtained from Google Chrome Console. Here is a sn ...

pythoncssseleniumxpathelement

switching the image source by selecting different options from a dropdown menu and leveraging JavaScript

I have been attempting to change the src of an image using JavaScript's addEventListener, but for some reason it is not working. Here is an example to illustrate my issue: let bulbImage = $.querySelector(".bulb-image"); let turnOnOption = $.querySele ...

javascripthtmlcssfrontend

JQuery's attempt to disable the 'hover' feature fails to function as intended

I have a styled table where rows change background colors based on odd and even indexes, with a hover effect included. However, I want to disable the hover effect when a row is selected. Here's the current code snippet: .odd{ background: #f7f7f7 ...

jqueryhtmlcss

Can both Bootstrap 5 scroll-spy methods be utilized simultaneously on a single webpage?

I have a requirement for my website to have 2 navigation bars and also 2 sets of navigation links. I would like to implement scroll-spy functionality on both navigation bars, even though only one will be visible at a time. The issue I am facing is that w ...

htmlcssbootstrap-4bootstrap-5scrollspy

Learning the ins and outs of HTML5 and CSS3

Does anyone have recommendations for high-quality HTML5 and CSS3 tutorials? ...

htmlcss

css - design your layout with floating div elements

I used to design layouts using tables, but now I'm trying it out with divs. However, I'm still struggling to get the layout right. It's not as straightforward as using tables. For instance, my code looks like this: var html_output = "< ...

jquerycsshtml

I am looking to dynamically assign CSS classes to elements in my HTML document. Additionally, my project utilizes Angular 5 and Bootstrap version 3.3.7

I am currently in the process of generating a table using data obtained from a JSON. Due to the potential for a large amount of data, I have implemented a loop to create all the rows within the table. My goal is to enable users to click on any specific row ...

htmlcssangulartwitter-bootstrap-3

Is there a way to automatically activate the "Add" button when I hit the enter key in the text box?

Being someone who relies on to-do lists, I implemented a system where you can input tasks into a textbox and click the add button to see them listed below. However, I found it cumbersome to keep clicking the add button every time I wanted to quickly add mu ...

javascripthtmlcss

"Dynamic navigation bar that remains in place even while scrolling past Adsense advertisements

Looking to implement a sticky menu for my blog using jQuery. The menu is functioning as desired, however, the issue arises when I scroll down on a page that contains adsense - the menu ends up going under the ad. What could be causing this problem? Below ...

jqueryhtmlcss

Does SCSS have a specific 'self' identifier?

I am looking to incorporate SCSS styles on the body by default, and then reapply them specifically to the P and LI tags (since I do not have complete control over the site and want to prevent plugins from interfering with my p's and li's). To ac ...

csssass

Allocating the remaining container space to a lone flex item

Imagine a scenario where I have a flex container with children that completely fill the container. .container { display: flex; width: 150px; } .item { flex: 1 1 50px; border: 1px solid blue; } <div class="container"> <div class="item ...

htmlcsslayoutflexbox

Switching the background image of a div when hovering over a particular list item

Here is my HTML: <li><a href=""><div class="arrow"></div>List Item</a></li> I'm looking to change the background image of the "arrow" class when hovering over the "List Item" with a mouse. The "arrow" class repres ...

javascriptjqueryhtmlcsshover

Issue with React MUI V5 causing theme not to display properly within shadow-root element

After trying to attach the shadow root using the MUI createTheme function, I encountered rendering issues. Despite following the instructions in this helpful guide on the MUI website, my problem persists. // App.js const cache = createCache({ key: ' ...

cssreactjsmaterial-ui

Customize the default classes for DataGrid in Material UI

Attempting to customize the CSS properties in the "DataGrid" Material UI, specifically adjusting font weight and overflow of the header. Below is the JSX code snippet: import React, {useState, useEffect} from 'react'; import {DataGrid, GridToolb ...

htmlcssreactjsmaterial-ui

Seamless movements to the exact midpoint

I am trying to find a method to create a smooth transition when removing the center class from p.title.class, allowing it to smoothly move to its new position. JSfiddle Here is an excerpt of my HTML: <body> <div class="wrapper-top"> ...

jqueryhtmlcss