Ul list centered alignment appears misaligned to the left in Safari browser exclusively

I'm experiencing an issue with my menu alignment. It appears perfectly centered in FF, Chrome, and IE, but shifts to the left in the Safari browser.

I'm not sure if there is a specific CSS property I need to use to correct this alignment.

<div class="wrapper">
    <div class="header-row2">
      <div id="cssmenu">
        <ul>
          <li><a href="/">Home</a></li>

          <li><a href="/Page1.aspx">Page One</a></li>
          <li><a href="/Page2.aspx">Page Two</a></li>

        </ul>
      </div>
    </div>
  </div>

http://codepen.io/anon/pen/NxmrBQ

I am using Safari browser 5.1.7 on Windows 7. https://i.sstatic.net/zwW3Y.jpg

htmlcss

Answer №1

Unfortunately, Safari 5.1 does not support the justify-content property, which caused me some trouble in the past. Here's a workaround you can try:

#cssmenu {
  display: -webkit-box;
  -webkit-box-pack: center; /* this simulates justify-content */
  -webkit-box-align: center; /* align-items */
}

Answer №2

To update the style of list items, you can modify the code from li { display:block;}

to

ul { font-size: 0; text-align: center; } li { display: inline-block; vertical-align: top; font-size: 16px; }

Alternatively, you can utilize Flexbox for enhanced layout capabilities.

flexbox-guide

Answer №3

Give this a shot

#cssmenu ul{display:table; margin:0 auto;}

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

Ways to access large h5p files

My understanding is that h5p files cannot be accessed on a local device in offline mode (although there is an option like h5p-standalone, it requires setting up a local webserver). To view h5p content, a webserver that supports h5p is necessary, such as th ...

html

What is causing my link to be clickable beyond the designated linked text area?

https://i.sstatic.net/RZPaw.png Displayed above is the current image. By clicking anywhere inside the black border, you will be directed to the provided URL. However, I specifically want only the text "RANKINGS" to be clickable. Here is the HTML code: &l ...

htmlcsshyperlink

How can I use jQuery to identify the numerical range within class/td/div elements and modify their CSS styles?

1# I need assistance in changing the CSS properties of a TD, Class, and div using a selector that specifies a specific number range. Specifically, I am looking to modify the css of torrent results with a seed count between 250-25000. Any torrents with a se ...

javascriptjquerycssselector

The Window.print() function may experience compatibility issues across different browsers

When attempting to utilize the Window.print() function, I encountered an issue where it works perfectly in Google Chrome but not in Mozilla Firefox. Attached are screenshots displaying the problem at hand. What could be causing this discrepancy? Furthermor ...

javascriptcss

Using Bootstrap and CSS to style a div element and fill it

I'm struggling with a div that splits in two, where I've placed an image on the left side. However, the image doesn't seem to fill the entire space and there are empty spaces on the sides. I'm using bootstrap, but any CSS solution would ...

htmlcssbootstrap-4

Expanding the axes using Google Charts

Seeking to Expand Y-Axis I am attempting to stretch the Y-axis so that it counts up to 300 instead of just 100. The issue arises when I adjust the Y-axis to reach 300, as the values remain in the same position as they did when counting to 100. Fo ...

htmlcssgoogle-visualization

Social media platform displaying visual content organized by likes and showcasing the number of images

Hey there, I'm in need of a jQuery image gallery plugin that doesn't load all the images at once when the page loads. Just to give you an idea: If there are 25 images in the menu, I would like to display only four images with a "+21 more" option ...

jquerycsshtmlimage-gallery

Are There Other Ways to Replicate the Actions of an Anchor Link/Target Pseudo-Class?

New Inquiry: Can the onclick attribute within an <a> tag function the same way as the href attribute? In the code snippet below, I have applied <a href="#view"> to all images, and <a id="close-customlightbox" class="lb-animate" href="#!"&g ...

jqueryhtmlonclickanchorhref

Flashing on objects, Chrome-exclusive, utilizing background-blend-mode exclusively

Our website, www.desirio.com, utilizes a background-image on the body with the following CSS property: background-blend-mode: luminosity An issue we have noticed in Chrome is that when hovering over elements, strange white lines randomly flash on the scr ...

cssgoogle-chromebackground-blend-mode

Are there any JavaScript functions available that can navigate to a different HTML page?

Here is an example of the functionality I am attempting. Can it be implemented? function CloseHTML(){ ApplyCSSClosingTransition(); setTimeout(function() { RedirectToAnotherPage(); }, 2000); } <div onClick='CloseHTML()'&g ...

javascripthtmlhttp-redirecthyperlink

When using WYSIWYG editors, be on the lookout for empty paragraphs and incorrect code in CSS, JavaScript, and

I am currently in the process of redesigning a website for a client. The site is already built using Joomla 1.7, but I am facing an issue with the articles section that was created by the client using a WYSIWYG editor. The problem lies in the messy code st ...

javascripthtmlcssjoomlawysiwyg

Ways to conceal #div element from displaying in the href attribute within the anchor tag

My anchor tag has an href attribute that looks like this: <a onclick='loadReview(\"" + strexternalURL + "\");' href='#productName1'. When clicking on it, the URL appears as http://localhost:54986/Dealerlist.aspx#productName ...

javascriptjqueryhtmlasp.netcss

How can I manage file input within a Vue.js application?

After attempting to open a file input with a button, I encountered an issue. When clicking the button, the client reported: “this.$refs.image.click”. Below is my code snippet: <v-btn height="50" ...

javascripthtmlvue.js

Save React code as a single HTML file

My current project involves creating one-page websites for a specific service that only accepts single inline HTML files. To make these webpages as modular as possible, I am utilizing React to create ready components. The challenge is exporting the final R ...

javascripthtmlreactjswebpacknext.js

Creating a menu with items and listeners from a kmllayer - a step-by-step guide

Currently, I am working with a map that includes a kmllayer. This layer has been added using the following code: ctaLayer = new google.maps.KmlLayer('http://www.npd.no/engelsk/cwi/pbl/en/aFactGlobe/disc/ActivityStatus_Producing_labels.kml'); ...

javascripthtmlkml

jQuery.get() function is limited to specific types of webpages

I have successfully combined multiple weather APIs on my website, which can be found here. Recently, I started using the weather.gov API and it has been quite effective. However, there are certain data points that I need to extract which the weather.gov A ...

javascripthtmljqueryajaxget

Problems arose when attempting to adjust the size of the container function

I've been working on a Joomla 2.5 template that consists of three main sections: top, container, and footer. While trying to set the "container" section to have a minimum height of 100%, I faced various challenges which led me to use jQuery for assist ...

jquerycssjoomla2.5

The child's styling is conflicting with the parent's styling

Issue with Parent and Child Component Margins import "../src/App.css"; import CardComponent from "./components/CardComponent"; function App() { return ( <div className="App"> <div className="card"></div> <CardCompon ...

javascriptcssreactjs

How can I store a value or text to track view counts or a counter efficiently?

Recently, I've been trying to implement a view counter on my website, similar to what you see on YouTube. Currently, the number of views stands at 23. I managed to find some code that allows me to increment the view count every time I click on an imag ...

javascriptphphtml

Restore the initial content of the div element

Currently, I am utilizing the .hide() and .show() functions to toggle the visibility of my page contents. Additionally, I am using the .HTML() function to change the elements inside a specific div. $('#wrap').html(' <span id="t-image"> ...

javascriptjqueryhtmlcssdom