Issues with Flexbox not being rendered correctly on Safari 5.1 for Windows

My goal is to design a straightforward box for questions, with the question number on one side and the text on the other. To ensure that the texts are aligned vertically and dynamic, I am experimenting with using flexbox.

I have researched both the old and new syntax and attempted to cover all possible scenarios by including necessary prefixes:

  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */

For reference, here's a fiddle: http://jsfiddle.net/alkaithil/NW3QZ/5/

Unfortunately, I am encountering an issue where the box is not displayed in Safari for Windows (5.1).

Any suggestions or alternative approaches for achieving this layout?

htmlcssflexbox

Answer №1

To truly grasp the potential of flex, we need to understand its practical applications.

In this scenario, it is necessary to implement display:table-cell with 

.question-text p, .question-text span

Keep in mind that the optimal use of flex lies in Column Re-Ordering

To find a solution, examine this code snippet and also check out the corresponding FIDDLE

html,
body {
margin: 0 auto;
padding: 0;
}
body {
background: #222;
font-family: 'HelveticaNeueThin', Helvetica, Arial, sans-serif;
font-size: 62.5%;
position: relative;
}
.slide-wrapper {
text-align: center;
}

.boxed {
background: #314353;
border-color: #1c89e8;
color: #e8e8e8;
border-radius: 0 20px 20px 0;
border-style: solid;
border-width: 1px;
display: inline-block;
font-size: 2.2em;
margin:0px;
}

.question-text {
color: #1c89e8;

margin: 2em auto 0 auto;
max-width: 80%;
text-align: left;
}

.question-text:before,
.question-text:after {
content: "";
display: table;
}
.question-text:after {
clear: both;
}
.question-text p,
.question-text span {
vertical-align:middle;
display:table-cell;
padding: 0.5em;
}

.question-text span {
background: #1c89e8;
color: #FFF;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
font-size: 4em;
}

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

The $mdSticky feature in AngularJS Material seems to be malfunctioning

It's been a challenge for me to get the md-toolbar to stay in the top position. I decided to create a custom directive using the $mdSticky service in AngularJS. var app=angular.module('app',['ngMaterial']); app.controller(&apos ...

javascriptcssangularjsangular-materialsticky

Encountering challenges with web scraping certain data that is not being captured after a line break tag using Python's

I've been attempting to scrape a public web directory in order to retrieve contact information for companies. While my code is functioning properly, it seems to be having trouble extracting information that comes after the br tag. For example, it fai ...

pythonhtmlpandasweb-scrapingbeautifulsoup

Is it possible to obtain the index of a table row using querySelector?

Is it possible to find the rowIndex of the first occurrence of a table row within the #myTable using JavaScript? http://jsfiddle.net/bobbyrne01/fmj6np6m/1/ html .. <table id="otherTable"></table> <table id="myTable"></table> js ...

javascripthtml

What is the best way to display only a specific container from a page within an IFRAME?

Taking the example into consideration: Imagine a scenario where you have a webpage containing numerous DIVs. Now, the goal is to render a single DIV and its child DIVs within an IFrame. Upon rendering the following code, you'll notice a black box ag ...

javascripthtmlcssiframe

The header section on a website not behaving as expected in the Chrome browser

For my website, I want it to look like this in Internet Explorer: https://i.stack.imgur.com/hSkVM.png ^^ This is the IE view However, in Chrome, it displays like this: https://i.stack.imgur.com/noQw8.png The issue is with the Top bar on Chrome showing co ...

htmlcssinternet-explorergoogle-chrome

Trouble ensues with integrating Magic CSS3 animations via jQuery due to malfunctioning

I've been experimenting with some magical CSS classes from a source I found online (http://www.minimamente.com/magic-css3-animations/) and trying to apply them using jQuery on mouseenter and mouseleave events. Unfortunately, it's just not working ...

jquerycssaddclassremoveclass

What is the best method for choosing a div element using JavaScript and altering its background color?

On my website, I have a pop-up modal with a form that contains 5 divs, each with a picture and description. I came across this JS code on w3schools that allows me to style a selected div. However, when the modal is opened, one of the divs is already pre-se ...

javascripthtmlcss

Utilizing Selenium to Click and Drag on the Browser Window in Order to Select Text on the Website

I am attempting to mimic the action of highlighting text on the screen by moving the cursor to a specific element and clicking and dragging. However, my current code does not seem to be replicating this behavior as expected. Despite defining the element, ...

pythonhtmlselenium-webdriverdrag-and-dropselenium-chromedriver

When I retrieve a URL from PHP, I receive XY data in JSON format. The output appears as [{"status":"ok","data":{"latitude":0.625,"longitude":0.855}}], but the final outcome is reported as "undefined"

When I try to retrieve XY coordinates from a URL in JSON using PHP, the returned result looks like [{"status":"ok","data":{"latitude":0.625,"longitude":0.855}}]. However, the end result shows as "undefine ...

htmljqueryjson

JavaScript for Verifying Phone Numbers

After extensive research and tutorials, I am still unable to figure out what is going wrong with my work. I have a button that looks like this: Despite Stack Overflow causing some trouble for me, please ignore the missing class as it is there. This is no ...

javascripthtmlcss

Steps for Deactivating HTML Links

I am facing an issue with a link button inside a <td> that needs to be disabled. It is working fine on Internet Explorer but not functioning properly in Firefox and Chrome. I have tried various methods, but nothing seems to work on Firefox (using ve ...

javascriptjqueryhtmlcss

Styling the footer to sit at the bottom of the page with a wider width, overlapping the content

I've encountered an issue where the footer of my webpage overlaps the content when the main content is long and users cannot scroll properly. Additionally, I've noticed that the width of the footer is larger than the header of the website. Below ...

csslayoutfooter

Singularize button/solo in the center

How can I make this button align perfectly center on both PC and Mobile as a container? I have attempted the following CSS and HTML code: <section id="jour"> <div class="container"> <button class="btn1">Jeudi 12</button> ...

htmlcss

What is the best way to set the tab as "active" in the first iteration of a PHP while loop?

When using a while loop to populate tabs with PHP, maintaining only one active tab at a time can be tricky. I have grasped that assigning the 'active' class within the loop causes all tabs to become active. So, how should I modify the script if I ...

phphtmlmysqlbootstrap-5

Adjusting the color of an HTML slider button as it moves

In my setup, I have a straightforward slider that I plan to use for controlling the movement of a stepper motor based on the slider's position. I wanted to give the website where this will be hosted a professional look, so I've spent quite some t ...

javascripthtmlcss

Switch between two fields using just one animation

I've been experimenting with creating an information tag that slides out from behind a circular picture. To achieve this effect, I created a block and circle to serve as the information field placed behind the image. However, I'm facing a challe ...

javascriptjqueryhtmlcss

Is there a way to prevent continuous repetition of JavaScript animated text?

I'm working on a code that displays letters and words one by one, but I can't figure out how to stop it from repeating. Can someone help me with this? <div id="changeText"></div> <script type="text/javascript"> var te ...

javascriptjqueryhtml

Guide to integrating react-phone-number-input into material-ui TextField

Would it be possible for me to use a Material UI TextField component as the inputComponent prop for the PhoneInput component from react-phone-number-input? I am facing an issue where I am unable to apply the ref successfully. Even though I can see the Mat ...

javascripthtmlreactjsmaterial-ui

Browser prioritizes Bootstrap over custom CSS styles

I've organized my stylesheet directory like this: stylesheets bootstrap.min.css style.css Within my style.css file, I've made adjustments to the pre tag styling: pre { background-color: #d9edf7; border: #d9edf7; color: navy ...

htmlcsstwitter-bootstrapgoogle-chromestylesheet

Adjusting the amount of rows and columns in a fluid manner with CSS grid (updated)

After conducting my research, it seems that the most effective way to set the final value of a CSS grid is either by directly specifying it or by creating/manipulating the css :root value. A similar query was previously raised here, although the answers p ...

javascriptcsscss-grid