What is causing Safari to block styling for <em> elements in RESET.CSS only?

I am utilizing Eric Meyer's reset.css file, which can be found at this link:

Interestingly, my <em> definition in my main stylesheet is working perfectly fine on all browsers except Safari. Somehow, only in Safari, the styling for italics is not being applied as expected.

The temporary solution I have discovered is to remove the "em" from the reset.css file. Surprisingly, removing it doesn't cause any issues with other browsers and successfully resolves the <em> display problem in Safari.

Has anyone else encountered a similar issue with Safari, and does anyone have a better suggestion to fix this rather than just deleting "em" from the reset.css?

SOURCE CODE FOR TESTING

Below is the content of a file that references three CSS files. The font definitions are displayed correctly in all browsers except for Safari. It seems that only by removing the em definition from RESET.CSS will italic fonts show correctly in Safari. Why is that?

[index.php]

<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="fonts.css" />
<link rel="stylesheet" type="text/css" href="site.css" />
<p>This should be Muli Roman</p>
<p><em>This should be Muli Italics</em></p>
<p><strong>This should be Open Sans Bold</strong></p>
<p><em><strong>This should be Open Sans Italics</strong></em></p>

[reset.css]

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, 
img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{display:block;}
body{line-height:1;}
ol, ul{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

[fonts.css]

@font-face{font-family:'Roman';font-weight:400;font-style:normal;src:url('http://fonts.gstatic.com/s/muli/v7/BkuZCUxEYxRfSu-XBj9_CA.eot');src:url('http://fonts.gstatic.com/s/muli/v7/BkuZCUxEYxRfSu-XBj9_CA.eot?#iefix') format('embedded-opentype'),
local('Muli'),
local('Muli-regular'),
url('http://fonts.gstatic.com/s/muli/v7/zscZFkjVRGyfQ_Pw-5exXPesZW2xOQ-xsNqO47m55DA.woff2') format('woff2'),
url('http://fonts.gstatic.com/s/muli/v7/minRpKQdEvXRRS8oAbAtWvesZW2xOQ-xsNqO47m55DA.woff') format('woff'),
url('http://fonts.gstatic.com/s/muli/v7/BfQP1MR3mJNaumtWa4Tizg.ttf') format('truetype'),
url('http://fonts.gstatic.com/l/font?kit=5laWPvb-IgmGJk9r92y1Hw#Muli') format('svg');}
@font-face{font-family:'Italic';font-weight:400;font-style:italic;src:url('http://fonts.gstatic.com/s/muli/v7/vurWTAYiHMPVScIey50dUQ.eot');src:url('http://fonts.gstatic.com/s/muli/v7/vurWTAYiHMPVScIey50dUQ.eot?#iefix') format('embedded-opentype'),
local('Muli Italic'),
local('Muli-italic'),
url('http://fonts.gstatic.com/s/muli/v7/YxNEAWILjDc466nftZdqXuvvDin1pK8aKteLpeZ5c0A.woff2') format('woff2'),
url('http://fonts.gstatic.com/s/muli/v7/DSOyST5zmfghBgRIogdupevvDin1pK8aKteLpeZ5c0A.woff') format('woff'),
url('http://fonts.gstatic.com/s/muli/v7/AQQ1r0_czneVCtTD9ckSEA.ttf') format('truetype'),
url('http://fonts.gstatic.com/l/font?kit=Ok1ULmeTg1kfss3jIu3xZQ&skey=f22af9a5d2e9fc47#Muli') format('svg');}
@font-face{font-family:'Bold';font-weight:600;font-style:normal;src:url('http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnZ2MAKAc2x4R1uOSeegc5U.eot');src:url('http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnZ2MAKAc2x4R1uOSeegc5U.eot?#iefix') format('embedded-opentype'),
local('Open Sans Semibold'),
local('Open-Sans-600'),
url('http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2') format('woff2'),
url('http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSqRDOzjiPcYnFooOUGCOsRk.woff') format('woff'),
url('http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSonF5uFdDttMLvmWuJdhhgs.ttf') format('truetype'),
url('http://fonts.gstatic.com/l/font?kit=MTP_ySUJH_bn48VBG8sNSllIn5tFQcqMuf-jhyJP0ps#OpenSans') format('svg');}
@font-face{font-family:'BoldItalic';font-weight:600;font-style:italic;src:url('http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxo8mkAiYpFywqG2RvpzBnTU.eot');src:url('http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxo8mkAiYpFywqG2RvpzBnTU.eot?#iefix') format('embedded-opentype'),
local('Open Sans Semibold Italic'),
local('Open-Sans-600italic'),
url('http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxsiAiQ_a33snTsJhwZvMEaI.woff2') format('woff2'),
url('http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxuw_rQOTGi-AJs5XCWaKIhU.woff') format('woff'),
url('http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxi8cqLH4MEiSE0ROcU-qHOA.ttf') format('truetype'),
url('http://fonts.gstatic.com/l/font?kit=PRmiXeptR36kaC0GEAetxuVmfClkf66xvxL1SWm4y8M#OpenSans') format('svg');}

[site.css]

p {line-height:1.875;padding:0 0 0.75em 0;}
body, .roman{font-family:'Roman', Arial, sans-serif;}
em, i, .italics{font-family:'Italic', Arial, sans-serif;}
strong, b, .bold {font-family:'Bold', Arial, sans-serif;}
em strong, strong em, ib, bi, .italics .bold, .bold .italics {font-family:'BoldItalic', Arial, sans-serif;}
cssfontssafarigoogle-webfonts

Answer №1

I have encountered the issue and found a simple solution by explicitly defining the font-style property in your site.css like this:

p {line-height:1.875;padding:0 0 0.75em 0;}
body, .roman{font-family:'Roman', Arial, sans-serif;}
em, i, .italics {
  font-family:'Italic', Arial, sans-serif;
  font-style:italic; /* added */
}
strong, b, .bold {font-family:'Bold', Arial, sans-serif;}
em strong, strong em, ib, bi, .italics .bold, .bold .italics {font-family:'BoldItalic', Arial, sans-serif;}

In Safari, it seems to be interpreting the font:inherit; part of the reset.css you are utilizing as overriding the browser's default font-style:italic; setting for em elements with a resulting computed value of font-style:normal;.

To fix this issue, one must either reintroduce the font-style in the reset.css or within their own site.css files. It is unclear if this is a flaw in Safari's WebKit implementation. Interestingly, Chrome also appears to calculate the final result as font-style:normal, raising questions about why theirs displays as italic.

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

Having trouble with jQuery's recursive animation functionality

I have developed a function to scroll multiple images horizontally in the header of my website. Inside my header, I have implemented code that looks like this: <div class='images'> <!-- this div is 150% wide with overflow hidden --> ...

jquerycssanimation

Tips for resizing a chartjs within bootstrap columns to accommodate various web browsers

I am using chartjs charts within bootstrap rows and columns. The number of columns per row can be dynamically changed. For example, I could rebuild my rows with the following markup: const twoColumn = spacerColumn + "<div class=&ap ...

cssbrowserchart.jsresize

The Angular checked functionality is not working as expected due to the presence of ngModel

Just getting started with Angular here. I’m working on a checkbox table that compares to another table and automatically checks if it exists. The functionality is all good, but as soon as I add ngModel to save the changes, the initial check seems to be ...

htmlcsstypescriptwebangularjs-digest

Tips for showcasing overflowing text in a menu list by rotating the item text

Imagine you have a TextMenuItem component, using MenuItem from the Material-UI library, that is part of a chain consisting of DropDownSearch > SimpleListMenu > FixedSizeList > TextMenuItem. In simple terms, this creates a searchable dropdown eleme ...

javascriptcssmaterial-uitext-styling

Every time Tailwind compiles, it seems to generate a glitchy class

There was a time when I accidentally wrote 2 classes without a space max-w-[412px]mb-[36px]. This caused an error, so I added a space between the classes. However, the error persisted even after making this correction. In a last attempt to resolve the issu ...

cssreactjsnext.jstailwind-css

When using jQuery to select elements of a specific class, make sure to exclude the element that triggered the

A dynamic number of divs are generated from a data source. Each div contains an image button and another div with text. While the actual scenario is more complex, we can present a simplified version: <div id="main"> <div id="content_block_1" ...

javascriptjqueryhtmlcss

Guide to collapsing all menus in an Angular 4 Accordion

I am a beginner with Angular 4 and I have implemented an accordion with the structure of Categories, Groups, and Subgroups. When I click on a category, it displays all the groups within that category. Similarly, when I click on a group, it shows all the s ...

jqueryhtmlcssangularbootstrap-4

What are the steps to design a versatile gallery page that can serve various projects?

Allow me to get straight to the point. What is my goal? I am aiming to develop galleries for various projects. Each project's thumbnail on the main page should open a gallery as a new page. These galleries will all have the same layout but different ...

javascriptphphtmlcssgallery

When hovering, the <a> element does not fully encompass the background color

I am currently working on a navigation bar that changes the background color of the links when hovered. However, I encountered an issue where the dropdown menu in the navigation bar does not cover the entire area. body { margin: 0; font-family: Aria ...

css

Guide to activating animation on one element when hovering over another element?

I am setting up an HTML 5 range element and looking to enhance the user experience. Specifically, I want to implement a feature where when the user hovers over the range, the height and width of the thumb should increase to 12 pixels. CSS .myrange::-webk ...

javascriptjquerycsshtmlcss-transitions

Using jQuery or Javascript to enclose every character in a given string with an HTML tag

I am trying to create a function that can take a string of text and wrap each letter within that string with an HTML tag such as <i> or <span>. Although I have made some progress, the current solution is not working as expected. The issue I a ...

javascripthtmljquerycsssplit

Solve the issue with the horizontal scrollbar in Internet Explorer 7

The appearance of a horizontal scroll on this site in ie7 is quite puzzling. It functions perfectly in all other browsers, so I'm at a loss as to why this issue specifically arises in Internet Explorer 7. Any help in solving this problem would be grea ...

htmlcssinternet-explorer-7

What is the best way to ensure that the buttons remain in place once they have been clicked to reveal a drop-down menu?

Is there a way to keep 3 buttons inline and prevent them from moving when clicked to open a submenu? Changing their positions results in them stacking on top of each other. Any help or suggestions would be greatly appreciated, thank you! Here is the code ...

javascriptjqueryhtmlcss

Concealing a Specific Element with Text using jQuery

Is there a way to conceal the section that includes the element labeled as "Product Tags" on a webpage? ...

javascriptjqueryhtmlcss

Is there a way to adjust the SVG level so that it aligns with the center of the polygon instead

Looking to align a simple svg icon for a dropdown button with the text in the button so that the centers match up. Currently, the icon is aligned with the bottom of the text instead. Here's the code for the svg: <svg xmlns='http://www.w3.org ...

cssreactjssvg

Why is the outline buttons class only displaying gray colors for me?

I'm having trouble with the outline buttons class (btn btn-outline-primary) in Bootstrap. For some reason, all the buttons appear gray instead of colored as they should. Here's an example of how the buttons should look: https://ibb.co/ChKf83y, bu ...

htmlcssbootstrap-4

What is a sophisticated method to hide an element from view?

My dilemma involves a dropdown menu and a list of elements that are initially set to hidden using CSS. When an item is selected from the dropdown, it becomes visible. However, I am struggling with finding a way to revert the previously selected element b ...

javascriptjqueryhtmlcssdisplay

Position the previous and next buttons next to the thumbnail images

I've implemented the cycle2 jQuery plugin on my website successfully, but I'm facing an issue with positioning the prev and next buttons next to my thumbnails. I want them to be aligned with the first and last thumbnail without relying on absolut ...

javascriptjqueryhtmlcss

Can someone explain how I can use Selenium and Python to choose an available date using a calendar picker?

Having a class named .calendarCellOpen: table.calendario .calendarCellOpen input { } This is the CSS for the calendar: #calwrapper { min-height:230px; margin-top:10px; } #calendar{ float:left; marg ...

pythonhtmlcssseleniumtesting

Altering the dimensions of a <div> based on the retrieved data

I am currently retrieving data from an API and displaying certain properties using mapping. I would like to adjust the width of the component based on the value of these properties. <h5> <span className="viewcount" ref={boxSize}> ...

javascriptcssreactjs