Safari is having trouble showing the webpage, although it is working fine on Internet Explorer, Chrome, and Firefox

After updating a client's website, I encountered rendering issues in Safari. Here is the link to the website:

When testing the file on my Linux server with various browsers like Chrome, IE, and Safari, everything looked great without any font or layout issues.

However, after uploading the files to her host site, I noticed that when viewed on Safari 5 and 8, most of the site pages were missing. The content was there but the style sheet wasn't rendering properly. It seems like the server her site is hosted on is running Apache. Does anyone have any suggestions or solutions regarding this issue?

  1. Could there have been an error during the upload process?
  2. Is this a server-related problem?
htmlcsssafarirenderingserver

Answer №1

Your MuseoSans_500-webfont.ttf file appears to be corrupted. While the Woff format is rendering correctly, Safari on OS X relies on the ttf format.

Answer №2

After investigating, it appears to be functioning properly on my end.

The issue could potentially be related to a cache problem or something similar.

However, this problem may also arise from the server not having the same configuration as your local WAMP/MAMP setup.

Answer №3

There seems to be a problem with the font, I removed MuseoSans from the stylesheet and that resolved the issue. It was strange that Safari wasn't using the fallback option. For example, in IE, Chrome, and Firefox, I could see Helvetica or Arial, but not in Safari.

p {
font-family: 'museo_sans500', helvetica, arial, sans-serif;
font-size: 14px;
line-height: 22px;
font-weight: normal;
padding: 10px 0px 15px 0px;

}

When trying to upload the Museo fonts again, I received an error message from the server stating "FTP error: Cannot create folder MuseoSansItalic. 550 can't create directory, disk quota exceeded."

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

Passing Parameters to Razor Pages Controller

Within my controller, there exists a function as follows: public ActionResult AddSubSub(int? idOfSubsub) { return RedirectToAction("Index", new { searchword = "" }); } I am able to invoke this function without providing any parameter. I attempted the ...

javascripthtmlasp.net-corerazor

Bottom of the page features a crisp white strap

Can someone assist me with the white strap at the bottom of this site found on website? It seems to be powered by wordpress. ...

htmlwordpresscss

The information submitted through a Django form is being beautifully displayed in an HTML table

I'm having trouble displaying variable values in an HTML table after submitting form data using the fetch API. The form data is successfully fetched in views.py, but I can't seem to send it back to the HTML file to show the data on a table. If I ...

javascriptpythonhtmldjangofetch-api

Why does my jQuery IMG center script not work in Chrome and Safari, but it works perfectly in IE?

I am experiencing an issue with centering the thumbnails of products on my e-commerce website. Despite successful centering in IE, FF, and Opera, Chrome and Safari are not aligning the thumbnails properly – they remain at the top of the div instead of be ...

phpjqueryhtmlcss

Safari not centering element with justify-self in CSS grid

My challenge involves adjusting the alignment of a div (mobile menu) that is currently centered using css grid and the justify-self property in chrome. However, when viewed in Safari, it appears on the left side of the screen behind the Instagram icon: ht ...

htmlcssvue.jssafariwebkit

Creating a horizontal scrolling section for mobile devices using CSS

Looking to create a horizontal scroll area specifically for mobile devices, similar to the design seen here: https://i.sstatic.net/oSNqL.png Additionally, I want to hide the scrollbar altogether. However, when attempting to implement this, there seem to ...

javascripthtmlcssbootstrap-4

The alignment of the JQuery Mobile tabs is off

As I work on developing a Cordova app, I've noticed that the tabs on my Android phone display in an unusual way. Here's what they look like: The image above was created in JSFiddle using JQuery 2.1.0 and JQM 1.4.2 selected with the following co ...

javascriptjqueryhtmlcssjquery-mobile

Firefox allows for the HTML to render even if CSS links are included in the head section

I've been struggling with a persistent issue for some time now. From what I've gathered, including <link> tags in the <head> of a Firefox page is supposed to halt rendering until those resources are fully loaded. To test this, I inser ...

htmlcssfirefoxdrawing

Tips for verifying the presence of a 3D model from Spline API within the DOM using Next.js

I am in the process of developing a brand new website and I have integrated a 3D model from spline, although it is taking quite some time to load. To improve user experience, I decided to implement a loader/Spinner. However, I'm facing the challenge o ...

cssreactjsnext.js3dspline

What's the reason for the align-self: flex-end CSS property not working as expected on a flex div element?

I am trying to align the "Click me" button to the left of the div that contains it. Here is my code: render = () => { return ( <Wrapper> <Body> <span>Title</span> <Desc ...

cssreactjs

The text-decoration is here to stay

Currently, I am facing an issue with the customization of a wordpress theme related to the styling of links within posts. Although I have tried to change the color and remove underlining using CSS rules, I am unsuccessful so far: a, .entry-meta a, entry-c ...

htmlcsswordpresshyperlinktext-decorations

Transforming hexadecimal color codes into spans

I've been experimenting with regex patterns to transform hexadecimal colors into spans. Take this example: #FF0000Hello#00FF00There <span style="color: #FF0000">Hello</span><span style="color: #00FF00">There</span> ...

phphtml

Passing data from a card component to a tab component in ReactJS

Just starting out with react and facing an issue. I want to transfer props from the child component to the parent component tabs that include favorite tabs. My plan was to pass the values through the handleClickOpen method where I click the favorites icon. ...

javascripthtmljsonreactjsredux

Using jQuery .css({}) is not causing negative margin to function as expected

$('#thankYouMessage').css({"height": textHeight, "margin-top:": "-52px", "padding-left": "19px"}); The CSS property 'padding-left:' will be applied as expected, but the negative margin will not take effect. The 'margin-top:' ...

javascriptjquerycss

troubles with compatibility between bootstrap.css and IE11

I am currently developing a web application using AngularJS and bootstrap.css. While everything appears fine on Chrome, I am facing some formatting issues on both Firefox and IE11. HEAD <head> <meta charset="utf-8"> <meta http-equi ...

javascriptangularjshtmltwitter-bootstrap-3

The HTML file's script tag does not function properly

I am facing an issue with using the script tag in my HTML files. For example, I am trying to create a photo gallery using HTML, CSS, and JS but the script part of my code doesn't seem to work. Here is the code snippet, can anyone spot any syntax or l ...

javascriptphpjqueryhtmlcss

Display MySQL data in a sequential order using PHP

I need help with displaying data fetched from a MySQL database using PHP. The data consists of 15 rows, but I want to show only 5 rows at a time to the user. I also want to include links for the user to navigate between different sets of 5 rows (3 sets in ...

phphtmlajax

Toggle the display of two div elements

I'm looking to easily switch visibility between two different divs on my webpage. The default display should be div id2, but when a user clicks a link, I want div id1 to replace it. I've tried various methods and even tinkered with it on jsfiddle ...

javascriptcsshtmltoggle

Creating a dynamic dropdown list populated with Jinja templates

I am currently working on a Flask application where one of the routes generates a list of data that I intend to display in a dropdown menu on the front-end. The challenge lies in the fact that each list may vary in length, with different users having diffe ...

htmlcssflaskjinja2dropdown

Concealing an Element solely on the Front Page of a WordPress Website using PHP

Within my footer.php file, there is a specific segment of code located towards the end: <?php wp_footer(); ?> <div class="website-by"> <br> Website by <a href="https://gatewaywebdesign.com/" target="blank">Gateway Web Design</ ...

phpjqueryhtmlwordpresswordpress-theming