Is there a reason for specifying a CSS parameter twice, with an asterisk on the second declaration?

Similar Question:
CSS reset - purpose of asterik within a style

While going through the CSS styles for HTML5BoilerPlate, I stumbled upon an unfamiliar code snippet:

button, input, select, textarea { 
  font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; 
}

I am particularly confused about the second ****vertical-align*** part. Why is it included twice and prefixed with an asterisk?

If anyone has insights into this technique or its purpose, I would greatly appreciate your input.

Thank you!

-Adrian

csscss3pie

Answer №1

Desperate measures like using a tricky workaround may work for older versions of IE, but it's not recommended. It's much more effective to utilize IE conditional stylesheets or other proven techniques.

Answer №2

Here's a clever trick for styling elements in Internet Explorer:

*property: value

If you prepend a non-alphanumeric character like an asterisk (*) before a property name, that property will be recognized by IE but not by other browsers. While this method works differently from using hyphens or underscores, it's worth noting that the CSS specification does not officially support the asterisk as a prefix. As a result, there may be unexpected outcomes as CSS standards continue to evolve.

The usage of 'property: value' style declaration applies specifically to IE 7 and older versions. Its effectiveness in future releases is uncertain. Caution: this technique involves invalid CSS syntax.

source: here

Answer №3

This trick in CSS specifically targets the Internet Explorer 7 browser.

To learn more, check out How to Specifically Target IE6, IE7, and IE8 with Just 4 Characters

Answer №4

Using the * before a CSS attribute is an old trick specifically targeting Internet Explorer 6. This hack was commonly used in the past when IE6 had a larger market share, but now that its usage has dropped to just 1% globally, it is safe to disregard this technique (unless your target audience is primarily in China).

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

Unable to interpret data from the API

{ id: 8, customerName: "xyz", customerMobileNumber: "123456789", customerBillingAddress: "xyz address", customerShippingAddress: "xyz address", customerProductPurchasedDate: "2021-11-09T09:07:00.000Z", cust ...

javascripthtmlcssmysqlreactjs

The lines intersecting with the ethereal image in the background

I'm trying to achieve button links with an image overlay, but so far I've only been able to do it using CSS: section a:link, section a:visited { width: 150px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: ...

cssimagehtmlmargin

Personalized Navigation Bar Toggle (transitioning from dropdown to sliding from the left)

On larger screens, I would like the navigation/navbar to be positioned at the top. However, on mobile view or when collapsed, I want the toggle button to reveal the navigation menu by sliding from the left side, similar to this example: (source by David B ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to align my clip-path's text with the center of the viewport and ensure that all of the clip-path's text is visible?

Check out my React component demo: https://codesandbox.io/s/epic-brown-osiq1. I am currently utilizing the values of viewBox, getBBox, and getBoundingClientRect() to perform calculations for positioning elements. At the moment, I have hardcoded some values ...

javascripthtmlcssreactjssvg

What is the best way to showcase a half star rating in my custom angular star rating example?

component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { projectRating ...

javascriptcssangular

When using React Router, make sure to set the navigation tab's style class to "active" if you are

I'm currently working on a React and react-router application that uses 2 nested routes to create a total of 3 routes: /, /about, /contact. When I click on the Links to navigate to each route, the tab on my navigation bar - which is located in the par ...

javascriptcsstwitter-bootstrapreactjsreact-router

The appearance of the page varies when viewed on different computers using the same version of Firefox

Previously, I posed a question with a touch of irony regarding Firefox without providing an example. As a result, my question was downvoted and I had to request its removal. Now, I have an example illustrating the issue at hand. It took some time to clean ...

htmlcssfirefoxwindows-7

Adjust the font size in Javascript to perfectly fit the width of the page

I'm currently developing a web-based clock intended for use on an embedded device. The concept involves displaying a full-screen clock with large digits, followed by the current temperature in Fahrenheit and Celsius, as well as a city name or code ben ...

javascripthtmlcssfont-size

Utilizing spans to adjust the formatting of text within list items

When it comes to shaping text inside li elements, I've encountered a few issues. One of the problems is that the float-right divs aren't floating to the top right corner but instead leaving a space at the top. Additionally, the text isn't &a ...

htmlcsscss-float

Highlighted top and bottom borders accenting a vertical list

I am working on a list that contains four items. Each item should have top and bottom borders set to 1px solid grey by default. There is a JavaScript rotator in place that adds a 'highlighted' class to the selected list element, which should have ...

jqueryhtmlcss

How can I modify the color of a hover button?

How can I change the color of a link on hover? The code I tried is not working properly. Below is the CSS snippet I have already added: a:hover {color: red;} ...

htmlcss

I am unable to click on items due to an obscure element blocking my

My selling webpage, created with Asp.net and CSS, is experiencing an issue where text boxes and hyperlinks are being overlaid, making it impossible to click on them when accessed via a mobile device. I've tried troubleshooting on my own without succes ...

cssasp.net

Changing the name of a specific attribute in a JSON Object for showcasing it in an HTML Table

Suppose I have fetched a list of objects from a database: [{ "id":0 ,"name":"John", "lastname":"Shell" },{ "id":1,...]; and want to display this data using the dynatable plugin: data : JSON.stringify(data) success: function(data,status){ $( ...

javascripthtmlcssjsondynatable

Troubleshooting the issue with form centering in Bootstrap

I've been attempting to center my form within a div, but the techniques I've applied are not yielding the desired result. I followed the bootstrap documentation and used the justify-content-center attribute, but it isn't aligning the form pr ...

htmlcssbootstrap-4

Tips for utilizing a variable within a variable containing HTML code

Is it possible to incorporate variables in a JavaScript function that includes HTML code? Let's consider the following example: function SetCFonts() { var Color = $('#CColor').val(); var Font = $('#CFont').val(); var S ...

javascripthtmlcssvariables

SwipeJS is not compatible with a JQuery-Mobile web application

I am currently attempting to integrate SwipeJS (www.swipejs.com) into my JQuery-Mobile website. <script src="bin/js/swipe.js"></script> <style> /* Swipe 2 required styles */ .swipe { overflow: hidden; ...

javascriptjqueryhtmlcssjquery-mobile

Bug in Angular: CSS encapsulation issue causing sibling grid components to inherit :hover styling from one another

Can anyone help me find the bug in my code? I am struggling to identify it. I have a grid container component that contains child grid item components generated by *ngFor. Each child component has two inputs: An object named rfpDoc featured: Boolean (I&a ...

cssangularsasscss-gridencapsulation

Nested div within another div, shifting position relative to scrolling (React)

My goal is to create a unique effect where an object falls from the sky as the user scrolls down the page. The concept involves having the object div remain stationary in the center of its parent container, positioned 50 pixels from the top. However, when ...

htmlcssreactjsanimationscroll

Specifying a zero margin on a Bootstrap container does not remove the margin

I am trying to make my right container elements fill the entire width of their column. After inspecting in Chrome, I noticed that my bootstrap container had default margins on both sides. To fix this, I set the margins to zero. Although the left margin di ...

htmlcssbootstrap-4

Basic HTML user interface elements

I'm struggling with some basic HTML/CSS and I'm looking for guidance on what I might be doing incorrectly or if there is a more efficient approach? I'm attempting to create a simple user interface, and while I have put this together, it doe ...

htmlcssuser-interface