Safari is displaying CSS in a completely unique way

Working on my very first webpage using just HTML and CSS has been an interesting experience.

After creating the first 2 pages and checking in Chrome and IE, I decided to test in Firefox and Safari. To my surprise, Safari rendered my CSS differently than expected, requiring a few tweaks.

The part I'm struggling with the most is the navigation and header section. Here is the HTML snippet for that:

<div id="logo">  <img src="images/logo no name.jpg" style="width: 50px">           </div>

<div id="jlc">   James Lucas Coaching    </div>

<div id="menu">     <nav>

                    <ul>
                    <li class="here">Home</li>
                    <li class ="coming"><span title="Coming soon!"><a>The Coach</a></li>
                    <li class="coming"><span title="Coming soon!"><a>The Process</a></li>  
                    <li class="coming"><span title="Coming soon!"><a>Packages</a></li>
                    <li><a href="Ccontact.html">Contact</a></li> 
                    </ul>
        </nav> </div>

</div>

And here is the corresponding CSS:

#top {
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
min-width: 688px;
height: 10%;
padding-left: 1%;}

#logo {
padding-top: 2%;
margin-top: none; 
width: 100%;
min-width: 45px;
-webkit-box-align: center;}

#jlc {
font-family:'Amatic SC', cursive;
font-size: 6.5vh;
color: #4c5d71;
width: 33%; 
min-width: 260px;
margin: none !important;}

#menu {
display: flex;
display: -webkit-flex;
-webkit-box-align: center;
align-items: center;
align-self: flex-end;
justify-content: flex-end;
width: 60%;
min-width: 800px;
float: right !important;
padding: 0% 0% 0% 0%;
margin: 0% 0% 0% 0%;}

ul {

float: right;
width: 100%;
padding-left: 9%;
padding-right: none !important;}


nav {
display: flex;
justify-content: flex-end;
float: right;}

li {

font-family: 'Cabin Sketch', cursive;
font-weight: 700;
font-size: 28px;
padding: 0vh 2vh 0vh 2vh;}

It seems like I've made a rookie mistake somewhere, but I can't figure out where. I attempted using -webkit- prefixes, but they didn't solve the issue. I also tried adding display: -webkit-flex; to #top, but it made things worse.

One solution I'm considering is creating a separate style sheet specifically for Safari to address these bugs. However, I'm aware that browser sniffing is not recommended.

Additionally, I have another flexbox element further down the homepage misbehaving in Safari. Your suggestions for the header section might help me tackle that as well. Any help would be greatly appreciated!

htmlcsssafariflexboxvendor-prefix

Answer №1

Remember to close your span tags with </span>. Also, there is an extra </div> at the end. Additionally, ensure that your jpeg logo name does not contain spaces. Insert "-" or remove the spaces.

#top {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
  min-width: 688px;
  height: 10%;
  padding-left: 1%;
}

#logo {
  padding-top: 2%;
  margin-top: none;
  width: 100%;
  min-width: 45px;
  -webkit-box-align: center;
}

#jlc {
  font-family: 'Amatic SC', cursive;
  font-size: 6.5vh;
  color: #4c5d71;
  width: 33%;
  min-width: 260px;
  margin: none !important;
}

#menu {
  display: flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  align-items: center;
  align-self: flex-end;
  justify-content: flex-end;
  width: 60%;
  min-width: 800px;
  float: right !important;
  padding: 0% 0% 0% 0%;
  margin: 0% 0% 0% 0%;
}

ul {
  float: right;
  width: 100%;
  padding-left: 9%;
  padding-right: none !important;
}

nav {
  display: flex;
  justify-content: flex-end;
  float: right;
}

li {
  font-family: 'Cabin Sketch', cursive;
  font-weight: 700;
  font-size: 28px;
  padding: 0vh 2vh 0vh 2vh;
}
<div id="logo"> <img src="http://static1.squarespace.com/static/5473473ce4b01917866e9a9e/t/5474e24ce4b082d9d5ec8b04/1416946372557/Logo+C+Final.png" alt="coach"> </div>

<div id="jlc"> James Lucas Coaching </div>

<div id="menu">
  <nav>
    <ul>
      <li><a href="#"><span>Home</span></a></li>
      <li><a href="#"><span>The Coach</span></a></li>
      <li><a href="#"><span>Process</span></a></li>
      <li><a href="#"><span>Packages</span></a></li>
      <li><a href="Ccontact.html">Contact</a></li>
    </ul>
  </nav>
</div>

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

Create a basic chart using JavaScript

I am looking to replicate a specific chart using JavaScript. The red point in the chart is variable. So far, I have attempted to create it using the flot library: var d3 = [[7,7]]; $.plot("#placeholder", [{ data: d3, points: { show: true } }], { ...

javascripthtmlplotchartsdraw

CrossBrowser - Obtain CSS color information

I'm attempting to retrieve the background color of an element: var bgcolor = $('.myclass').first().css('background-color') and then convert it to hex function rgbhex(color) { return "#" + $.map(color.match(/\b(\d+ ...

javascriptjqueryhtmlcss

What could be the reason for the absence of the CSS destination folder being generated by

My colleague has the exact same code and can run gulp without any issues, but I'm struggling to compile the css files using Gulp. Gulp isn't creating the css destination file or the css files themselves. However, it works perfectly fine for build ...

cssnode.jsnpmgulp

Is there a glitch or a misinterpretation of the specifications concerning the use of relative padding

VIEW DEMO At times, I like to create a square (or any rectangle) that maintains its ratio regardless of size, using a technique similar to this method. My Objective: To prevent the square from extending beyond the viewport on devices with limited heigh ...

cssviewport-units

implementing a delay after hovering over a CSS hover effect before activating it

I'm trying to achieve a specific effect using JavaScript or jQuery, but I'm struggling to figure it out. I have created a simple CSS box with a hover effect that changes the color. What I want is for the hover effect to persist for a set amount o ...

javascriptjquerycss

What are some creative ways to customize the appearance of a PHP email form body?

I need assistance in creating a PHP form that will generate an email with visually appealing formatting. Currently, when I receive the submitted form via email, it lacks aesthetic presentation. After implementing the following code snippet, this is how th ...

phphtmlcssemail

Adaptable Website Design (Without Header)

Check out my current website layout on codepen. I'm looking for a more responsive way to code this with CSS, so that the text doesn't get pushed over when the window is resized. Also, I want to improve the efficiency of coding the CSS for this l ...

htmlcsslayoutpositionresponsive

Unable to display PHP response in a div using AJAX - issue persisting

Hey there! I'm currently working on a project where I want the form submission to load a response into a div without refreshing the page. I've looked at various examples of ajax forms with PHP online, but haven't been able to solve my issue ...

javascriptphpjqueryhtmlajax

Unexpected activation of Internet Explorer media queries causing display issues

Check out my CSS code below: @media all and (max-width: 500px){ .calendar_head{ height: 120px; line-height: 60px; } } .calendar_head{ width: 100%; font-weight: 700; color: #6a7783; text-align: center; line-heigh ...

htmlcssinternet-explorermedia-queries

Purge the cache of CSS and JavaScript in your browser

Is there a way to clear JavaScript and CSS cache in ASP MVC without having to clear browser history? ...

javascriptcssasp.net-mvc

Discovered two instances of duplicate IDs within the elements

When using the same id names in two different form tags, I am encountering the following warnings: [DOM] Found 2 elements with non-unique id Below is a portion of my HTML code: <div class="modal-dialog"> <form action="" ...

javascripthtmljquerybootstrap-4html5-video

Locating HTML snippets within a document

I am trying to extract all HTML <p>...</p> elements from a document. I have been attempting to use regular expressions (Regex) with the following pattern: Regex regex = new Regex(@"\<p\>([^\>]*)\</p\>" ...

c#.nethtmlregex

How to efficiently handle data binding for multiple users sharing common inputs within a table on an ASP.NET Razor Page?

I am currently working on a project that involves populating a table with member information such as name and email. Within this table, there are columns where a "warning" can be entered for each member, along with a textbox for additional information rega ...

c#htmlasp.net-corepostrazor

Every time I employ window.location, the Iframe becomes nested

I am experiencing an issue with my HTML structure: <html> <body> This is the container of the iframe <iframe src="/foo.html"> </iframe> </body> </html> (/foo.html) <html> <script type="text/javascript"> $( ...

phpjavascriptjqueryhtmliframe

How are these background images able to remain in a fixed position like this?

Trying to name this question correctly was a bit tricky. Hopefully I got it right. I have a new client and they want their website to have a similar feel to . If you check out the index page and scroll down, there's this cool 'smooth animation& ...

htmlcssbackground-imagebackground-attachment

What is the correct way to submit a formarray in an angular application following the specified format?

When submitting a form in Angular, I'm facing an issue where only the data from the first index inside the role menu is being passed. How can I ensure that all index data is passed on submit? { "roleMenu":[{ "menu":{ "menuId": 1 }, ...

htmlangulartypescriptangular8angular11

Angular: Radio button groups are not responding correctly when populated within a loop using ng-repeat

My goal is to populate multiple sets of radio buttons in a loop by combining the group name and index to ensure each set is uniquely grouped. However, I am facing an issue where only the last group in the loop has a checked radio button, while all other gr ...

javascripthtmlangularjsradio-buttonangularjs-ng-repeat

Tips for directing to access a directory in RShiny

I'm trying to figure out how to use an actionButton to link to open a folder in a new tab within my shiny app. I attempted to achieve this by using the "file:" tag, but it seems that the folder only opens if the user right-clicks on the actionButton ...

htmlrfileshiny

Instead of modifying the selected class, jQuery generates inline styles

Utilizing the following code to dynamically create a class: $("head").append('<style type="text/css"></style>'); var newStyleElement = $("head").children(':last'); newStyleElement.html('.move{transform: translateX(1 ...

javascriptjqueryhtmlcss

Converting a table into JSON format

I'm working on developing a live application that will showcase data in a table format like the one below: Machine Production Scanned Delta Mach 1 2500 1000 1500 Mach 2 1500 1300 200 Mach 3 6500 5000 1500 Mac ...

pythonhtmlsqljson