I'm trying to add a line-through, in all browsers it works fine, except Safari.
It gets misalignment.
I'm not even using css, just an stag inside the html
<span class="price--old">
<s>{value}</s>
</span>
There is an issue with the line through and del
they both are't working in safari
I came up with an solution
.price--old {
width: 25px;
display: flex;
align-items: center;
}
.price--old::before {
content: "";
flex: 1 0 10px;
border-top: 1px solid #111;
}
.old-price {
margin-left: -25px;
}
<div class="price--old"><span class="old-price">200</span></div>
its working completely fine in safari and chrome
Every browser interprets CSS differently. I believe the reason it's not working is because the <s> tag "renders a horizontal line through the vertical center of the text," so I assume it's finding an odd "vertical center."
Per Apple's dev library:
s
Deprecated. Defines a block of text in strikethrough style. Use del to indicate document edits.
Discussion
The content inside the s element is rendered with a horizontal line through the center. The del element is more appropriate to show text that was removed. Styles should be more finely tuned using CSS instead of using HTML style elements when possible.
Availability
The s element has been deprecated in the HTML 4.01 standard.
Try using the <del> tag instead
<p>Let's try <del>this</del></p>
And let me know if that doesn't work. It looks ok on my computer in Safari, but I have some weird settings on my Safari for a work project rn.
A little more research shows that there is a semantic difference between del and s: What is the difference between <s> and <del> in HTML, and do they affect website rankings?
<s> and <del> both still exist in the HTML specification.
The <del> element represents a removal from the document.
The <s> represents contents that are no longer accurate or no longer relevant.
That is to say that they actually represent different things
semantically. Specifically would be used if you had an existing
document and wanted to indicate text that was in the document, but has
been removed. This would be different than text in a document that is
no longer accurate, but that has not been removed (you could use
for that).
You should not use or depend on either for styling even though most
browsers do have them strike-through by default. You should only rely
on CSS for presentation.
Site being developed here: http://new.brushman.com/about/
The CMS allows adding of in-line CSS on a page by page basis. This CSS is added to the page after all other .css files are loaded.
IE11 is ignoring the style, even-though it works in 8, 9, 10, Edge, and all the rest (Chrome, Firefox, Safari, etc)
The inline CSS is:
<style>
/* CMS Page about CSS */
main {background: #d70055;}
</style>
and is in the after all the css files are loaded
The interesting thing is that inspect element shows the background with a checkmark, and it's at the top of the list indicating it has the highest priority.
There are no opaque elements covering the element.
Some things I've tried:
!important
removing the comments
adding additional new lines
using rgba
Completely and thoroughly stumped.
This should work:
main {
display: block;
background: #d70055;
}
IE does not treat unknown types of elements as block elements - just like the <main> element in this case.
Unfortunatley IE11 does not support the new <main> html semantic element.
I'm working on a web page in Google Chrome. It displays correctly with the following styles.
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
It is important to note that I didn't define these styles. In Chrome developer tools, it says user agent stylesheet in place of the CSS file name.
Now if I submit a form and some validation error occurs, I get the following stylesheet:
table {
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-variant: normal;
font-style: normal;
color: -webkit-text;
text-align: -webkit-auto;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
The font-size from these new styles is disturbing my design. Is there a way to force my stylesheets and if possible, completely overwrite Chrome's default stylesheet?
What are the target browsers? Different browsers set different default CSS rules. Try including a CSS reset, such as the meyerweb CSS reset or normalize.css, to remove those defaults. Google "CSS reset vs normalize" to see the differences.
If <!DOCTYPE> is missing in your HTML content you may experience that the browser gives preference to the "user agent stylesheet" over your custom stylesheet. Adding the doctype fixes this.
Regarding the concept “user agent style sheet”, consult section Cascade in the CSS 2.1 spec.
User agent style sheets are overridden by anything that you set in your own style sheet. They are just the rock bottom: in the absence of any style sheets provided by the page or by the user, the browser still has to render the content somehow, and the user agent style sheet just describes this.
So if you think you have a problem with a user agent style sheet, then you really have a problem with your markup, or your style sheet, or both (about which you wrote nothing).
Marking the document as HTML5 by the proper doctype on the first line, solved my issue.
<!DOCTYPE html>
<html>...
A user agent style sheet is a ”default style sheet” provided by the browser (e.g., Chrome, Firefox, Edge, etc.) in order to present the page in a way that satisfies ”general presentation expectations.” For example, a default style sheet would provide base styles for things like font size, borders, and spacing between elements.
It is also common to use a CSS Reset to normalize or remove inconsistencies between browsers due to differences between which base styles are applied by each browser.
From the specification...
A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language. ~ The Cascade.
For more information about user agents in general, see user agent.
Answering the question in title, what is the user agent stylesheet, the set of default styles in the browser: Here are some of them:
Chromium (Chrome): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css
WebKit (Safari): https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Gecko (Firefox): https://searchfox.org/mozilla-central/source/layout/style/res/html.css
Serenity: https://github.com/SerenityOS/serenity/blob/master/Userland/Libraries/LibWeb/CSS/Default.css#L4
Mozilla Servo: https://github.com/servo/servo/blob/master/resources/user-agent.css#L9
Personal opinion: Don't fight with them. They have good default values, for example, in rtl/bidi cases and are consistent nowadays. Reset what you see irrelevant to you, not all of them at once.
Define the values that you don't want to be used from Chrome's user agent style in your own CSS content.
Some browsers use their own way to read .css files.
So the right way to beat this:
If you type the command line directly in the .html source code, this beats the .css file, in that way, you told the browser directly what to do and the browser is at position not to read the commands from the .css file.
Remember that the commands writen in the .html file is stronger than the command in the .css.
I had the same problem as one of my <div>'s had the margin set by the browser. It was quite annoying but then I figured out as most of the people said, it's a markup error.
I went back and checked my <head> section and my CSS link was like below:
<link rel="stylesheet" href="ex.css">
I included type in it and made it like below:
<link rel="stylesheet" type="text/css" href="ex.css">
My problem was solved.
I just wanted to expand on the response from #BenM based on what I read here from Ire Aderinokun. Because the user-agent stylesheet provides helpful default styling, think twice before overriding it.
I had a dumb error where a button element didn't look right in Chrome. I had partially styled it because I didn't want it to look like a traditional button. However, I left out style elements like border, border-color, etc. So Chrome was stepping in to supply the parts that it thought I was missing.
The problem went away once I added styles like border: none, etc.
So if anyone else is having this problem, make sure you are explicitly overriding all the applicable default user-agent styles for an element if you notice it looks wonky, especially if you don't want to reset the user agent styles completely. It worked for me.
Each browser provides a default stylesheet, called the user agent stylesheet, in case an HTML file does not specify one. Styles that you specify override the defaults.
Because you have not specified values for the table element’s box, the default styles have been applied.
I ran into this same issue, it was because I was working with non-semantic html
<!--incorrect-->
<ul class="my-custom-font">
<button>
<a>user agent styles applied instead of my-custom-font</a>
<button>
</ul>
<!--correct-->
<ul class="my-custom-font">
<li>
<a>now inherits from from my-custom-font</a>
</li>
</ul>
Once the HTML was updated, styles were applied correctly
Every browser will have a rendering engine responsible for converting HTML document to web page.
The rendering engine will have a stylesheet of its own for all the HTML elements, a kind of default stylesheet for all the HTML elements and this stylesheet is called user agent stylesheet.
The rules of user agent stylesheet can be overwritten by author stylesheet.
The rendering engine for google chrome browser is called 𝐛𝐥𝐢𝐧𝐤. And if you look through its source code you will be able to find the default stylesheet.
check this https://www.linkedin.com/posts/smruti-sagar-pattanaik-a3a000195_html-css-chrome-activity-7027888128115847168-USil?utm_source=share&utm_medium=member_desktop
I have a solution. Check this:
Error
<link href="assets/css/bootstrap.min.css" rel="text/css" type="stylesheet">
Correct
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
Put the following code in your CSS file:
table {
font-size: inherit;
}
i have seen some people in css write something like
.together
{
display:inline;
display:inline-block;
}
not just restricted to display style, but say background-size or background-image for an example
what is the purpose of this? i mean the second one is going to override the first one, so why bother?
Usually this type of behavior indicates a browser hack for compatibility. When browsers detect a property or value they do not know, they ignore it. Thus, if you place the most widely-accepted properties first, browsers will "fall back" to that behavior if none of the latter properties are compatible.
There's a possibility that it's written that way for browser-compatibility. They probably want the element to have a display value of inline-block, but not all browsers support it on all elements. Sitepoint has a good reference for compatibility of the display property.
The background property is a shorthand for all of the background-related properties, so it's common to set background on one selector and then only overwrite specific background properties later on other selectors. And again, you might have multiple background declarations for browser compatibility.
Lets take the following example.
<html>
<head>
<style>
.carlist
{
background-color: red;
height: 30px;
margin: 10px;
margin: 20px;
}
</style>
</head>
<body onload="loadCars()">
Check div style.
<div id="mydiv" class="carlist"></div>
</body>
</html>
In the above example we have 2 margins declared. I checked and found that the 2nd declaration is accepted by browser(FF,IE,Chrome). So I think if we use this for browser compatibility then the most browser specific style should be declared at last. But there are other ways to define browser specific styles. So its better to have single attribute defined.
While inspecting the Chrome Dev tools, I noticed the following CSS fragment:
img {
content: url(image-src.png);
}
which works perfectly in Chrome (see Screenshot below).
This allows me to define the src attribute of an <img> tag via CSS. Doesn't work in Firefox. Until now I thought that is not possible to directly modify the src attribute via css and I have not found anyone talking about this. So, is this just a proprietary addition in Chrome or is Chrome implementing a W3C draft or something comparable I am not aware of?
The content property as defined in CSS 2.1 applies to :before and :after pseudo-elements only. By CSS rules, you can specify any property for any element, but specifications have limitations on what properties “apply to” (i.e., have effect on) various elements.
The CSS3 Generated and Replaced Content Module, a Working Draft, describes the content property as applying to all elements. It has an example of replacing the content of an h1 element by an image, and surely the same could be done to an img element.
But it’s just a Working Draft. The usual resources on CSS implementation status, QuirksMode.org CSS info and Caniuse.com, do not indicate the situation; they only describe the support to content for :before and :after (which is rather universal except IE 7 and earlier.
Now you can do that: http://chabada.esy.es/tests/0004.html
<style>
.redcross {
background: transparent url('redcross.png') no-repeat;
display: block;
width: 24px;
height: 24px;
}
</style>
<img class="redcross">