Challenges with website design on Safari

When viewing the content under Chrome and IE, the two text blocks are displayed on the same line. However, in Safari 5.1.7, the text appears on different lines (above and below).

Could there be something missing in the CSS that needs to be added for Safari?

The HTML and CSS code can be found here - http://jsfiddle.net/Dano007/RKecc/

Here is a snippet of the HTML:


    <div class=" grid 6 cheese_people_l" id="cheese_people_l">
        <img id="cheese_people_l"src="img/cheese_expert.jpg">
        <p>Chief Cheese Taster <br/> Dave Le Conk</p>
        <p class="chesse_people">&ldquo;I've always had a passion for cheese. Now I get to taste it everyday! After nearly 20 years I'm still loving the job that I do. I can't actually see myself doing anything else.&rdquo;</p>
    </div>

    <div class=" grid 6 cheese_people_r" id="cheese_people_r">
        <img id="cheese_people_r" src="img/cheese_owner.jpg">
        <p>The Big Cheese Owner <br/> Sally Fiffle</p>
        <p class="chesse_people">&ldquo;I wanted to create an online store that I'd would trust. This has been done by our amazing staff and the products they produce. Nothing can replace dedication and pasion.&rdquo;</p>
    </div>

Answer №1

Seems like Safari 5 is not compatible with the vw value for widths.

It's treating these declarations as if there are no widths specified, resulting in elements with width:100%, causing them to appear on separate lines.

Check out this resource on using viewport units..

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

Combining an if-statement with an HTML button within a single function in JavaScript

I'm currently developing an HTML table that includes fields that must be filled, but I want to allow one of the fields to be optional. The structure of my code is as follows: name.html ... <table> <tr> <td>Number 1:</td& ...

JavaScript source control tool

Is there a Java-based version of GitHub? I am interested in developing a dynamic application using HTML5 and Javascript, and had the thought of integrating Git to monitor data changes. Therefore, I am curious if there exists a JavaScript adaptation of a G ...

The background-size is set to cover, but it does not completely cover the

New to HTML here, I'm attempting to utilize background-size: cover; to ensure an image covers the entire screen, but I am still noticing a gap. The issue may be related to this section: body { background-image: url("hexagon.gif"); ...

Adding dynamic elements to a pop-up window with the use of jQuery's .load() function

When implementing Javascript to create a modal, I have encountered an issue where the close button disappears. The modal opens and loads different HTML files dynamically using the jQuery load() method, but the close button vanishes. I suspect that the mod ...

Discover the process of utilizing doc.getElementbyClassName to determine if any of its elements are blank

On my HTML invoice table, I sometimes have empty elements that cause the row to misalign. To fix this, I want to add whitespace if an element is empty. Here is the structure of the table: <div class="invoiceTable"> <div class="titles2" style=" ...

Creating a Background Cutout Effect with CSS Using Elements instead of Images

I'm working on creating a unique visual effect that simulates a "window" where the div placed above all other elements acts like a window, allowing the background color to show through. Take a look at this example for reference. My goal is to make th ...

What are some strategies for accessing the original values of form components that have not been altered when using ngModel?

I am currently developing a form and I intend to utilize the previous values as "value" in the form. By employing ngModel dynamically, I am able to change some properties. However, I have encountered an issue where the field that remains unchanged by the u ...

What is the best way to update a specific section of my website by modifying the URL while keeping the menus fixed and the site functioning smoothly?

I am in desperate need of assistance as I search for a solution. Currently, I am working on a project involving music within a web browser or application. My goal is to utilize HTML, PHP, JS, and CSS to create this project. If I start with a website, I p ...

The size of table cells automatically adjusts when zooming in the browser

While trying to display my table in Chrome, I noticed that the cell sizes of the table change when zooming in. Additionally, the table is rendered incorrectly in other browsers like IE and Firefox. I attempted adjusting the sizes to percentage values but i ...

The table is refusing to align itself in the center

I've been struggling to center the text inside this table despite trying various solutions. Any help would be greatly appreciated. Here's the HTML code I have: <div id="paccount"> <table style="margin: 0 auto;"> <tr&g ...

Tips for altering CSS using the `:hover` pseudo-class

CSS Style for Navbar .navbar li { color: #B7B7B7; font-family: 'Montserrat', sans-serif; font-size: 14px; min-width: 70px; padding: 22px 16px 18px; } .navbar #menumain ul { width: 120%; } .navbar ul ul { display: none; } <div ...

Issue with overlay functionality after updating to jQuery version 1.12.1

Hey there! I'm currently in the process of upgrading my web application system's jQuery to version 1.12.1 and I've run into an issue with the overlay not functioning properly in the new jQuery version. My setup involves using ajax to displ ...

Image remains fluid within a static div without resizing

Any assistance would be greatly appreciated. I am currently facing an issue with a fixed div that is floating at the bottom of the screen, serving as ad space for the mobile version of a website. The problem arises when attempting to resize the browser win ...

Background gradients in versions of Internet Explorer 8 or earlier

For my website, I'd like to incorporate gradient backgrounds specifically for Internet Explorer. I am aware of a proprietary method for achieving this: filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#20799d', EndColorStr= ...

A step-by-step guide on utilizing img src to navigate and upload images

I would like to hide the input type='file' element with id "imgInp" that accepts image files from users. Instead, I want them to use an img tag to select images when they click on a specific img tag. How can this be achieved using jQuery? Here i ...

To ensure a rectangular image is displayed as a square, adjust its side length to match the width of the parent div dynamically

How can I make the images inside my centered flexbox parent div, #con, be a square with side length equal to the width of the parent div? The image-containing div (.block) is positioned between two text divs (#info and #links). I want the images to be squa ...

What is the best way to position a small image within a menu?

Is there a way to adjust the position of the arrow image within the <li> element without affecting the layout of the unordered list? Below is the code snippet for reference: body { margin: 0; padding: 0; } nav { width: 100%; background: # ...

Eliminate the standard cell padding in nested HTML tables

In my setup, there is a parent table where each td tag in the tr tag contains a child table. Specifically, as shown in the example with Data WS-C3.... in the picture. [![<table class="table table--bordered table--nostripes table-top"> <thead& ...

The timing of the RequestAnimationFrame function varies based on the dimensions of my canvas

In my application, I have a canvas that dynamically adjusts its CSS size based on the window size. The main gameplay loop in my code looks like this: run = function(){ console.log(timerDiff(frameTime)); game.inputManage(); game.logics(); ...

Tips for looping through a table and opening the tab that meets a specific criterion

I am looking to cycle through a table in order to extract the values of "GST Invoice No." and access the "View Invoice" section for only those invoices whose third digit is a 2. from selenium import webdriver from selenium.webdriver.common.by import By fro ...