Safari is having trouble displaying the tab content background properly, while Chrome is not experiencing any

I am currently facing an issue with the CSS tab content on a website. The client requested to add an image in the background, which I have successfully implemented and tested on Chrome and IE. However, Safari seems to be cutting off the image. You can view the problem at http://jsfiddle.net/j9Ftx/11/. It seems like there might be some CSS styling for the tabs affecting the width, but I am unable to pinpoint the exact issue.

Appreciate any assistance!

    .tabs {
    position: relative;
    margin: 40px auto;
    width: 810px;
    background-color:#FFFFFF;
    background-image:url(http://creationdev.co.uk/expressiveprint/images/parrot.png);
    background-repeat:no-repeat;
}

.tabs input {
    position: absolute;
    z-index: 1000;
    height: 40px;
    left: 0px; 
    top: 40px;
    opacity: 0;
    cursor: pointer;
}
...
htmlcsstabs

Answer №1

Let's establish the style for .tabs background-size: 25% 100% like this:

.tabs {
    background-size: 25% 100%; // include this line and adjust the background size to fit your layout
}

See Demo

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

Adjust size of container div once ajax call is complete

I am currently facing an issue with a webpage where I am using ajax to load a Twitter feed. Below is my HTML and jQuery setup: <body> <div class="document-wrapper"> <div class="document"> <div class="content"> ...

jquerycssajax

Tips for utilizing javascript to reset the heightline of the preceding keyword during a keyword search

Using JavaScript, I have implemented a search keyword function that highlights specific words in a paragraph. However, I am facing an issue. Currently, when searching for the next keyword, the previously highlighted text remains in red instead of reverting ...

javascripthtmljquerycss

The justification feature in HTML CSS does not seem to be functioning as intended

<table > <tbody> <tr> <th colspan="1">FrisBar:</th> <th > <p style="color:#111;">00</p> </th> </tr> ...

htmlcsstext-alignmenttext-align

Identify the specific button that triggers a JavaScript function

Currently, I am working on an admin page that displays a list of posts using EJS for template rendering engine. <table> <tr> <th>Name</th> <th>Description</th> </tr> <% projects.for ...

javascripthtmlnode.jsexpressejs

Adjust the size of images that are aligned horizontally using HTML

I am facing a simple issue that I just can't seem to solve. My problem involves two images aligned horizontally within a div container. Each image has specified width, minimum and maximum widths, while the parent div's width is set to 100%. How c ...

htmlcssimage

My JavaScript/Jquery functions are not running as expected

I need some help creating a simple image rotation feature. I have a folder named comics where the images are stored locally with names like comic_(number). However, when I click my buttons, nothing happens. The previous button doesn't even get disable ...

javascriptjqueryhtml

Tips on eliminating extra whitespace in cards

I have created a card with an image and some content, but there seems to be unwanted space between the two elements. How can I remove this space so it looks consistent across all devices? Here is the HTML code: <div class="project-card hidden" ...

htmlcss

What is the method for importing .scss files throughout a Next.js application?

I'm looking to transform my React app into a Next.js app. In the current React setup, I have .scss CSS files being imported in various components. However, once I transfer the code to a Next.js environment, I encounter an error: Global CSS cannot be ...

cssreactjsnext.jssass

Obtaining the scene's coordinates in Three.js

Struggling with a coding issue, I've scanned various discussions that don't quite address my specific problem. Any assistance would be greatly appreciated. In my HTML document, I am using the three.js library to create a scene titled scaledScene ...

javascripthtmlthree.jscoordinatesscene

Steps to designing 3 div elements containing portrait images in a row that are responsive using bootstrap

I'm facing a bit of a challenge trying to display 3 images in a row with a responsive layout using bootstrap. It seems like it should be easy, but I find it tricky. My goal is to create a page on my website that looks similar to this example - https: ...

htmlcssbootstrap-4responsive-design

analyzing information from an online source

I'm currently developing a program that displays the maximum daily temperature for a specific city by utilizing data retrieved from the National Weather Service website. I have all the necessary data, however, whenever I attempt to create the actual g ...

javahtmlloopsgraph

Having trouble retrieving the updated values from form textfields using innerHTML in an Angular project

I'm struggling with using innerHTML this.html = this.sanitizer.bypassSecurityTrustHtml( '<iframe width="100%" height="800" src="assets/template_forms/registration_form.html"></iframe>', ...

javascripthtmlangular

Solving the Color Change Mystery in Your Dash Application

My goal is to design a sleek black dashboard, so I acquired a CSS stylesheet that should give my dashboard a black theme. Following the instructions, I created an assets folder in the root directory of my app and added my CSS and JavaScript files there. Da ...

pythoncssplotly-dash

Safari is unable to display the button text, while Chrome has no problem showing it

In Safari, the text of the button is not showing up properly. I am able to retrieve the text using jQuery in the console though. However, there seems to be an issue with recognizing the click event. <div class="btn-group btn-group-lg"> <button ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using custom class instances or objects within Angular controllers is a simple process

Using three.js, I have created a class called threeDimView that houses my scene, camera, and other elements. In my JavaScript code, I instantiate a global object of this class named threeDimView_. threeDimView_ = new threeDimView(); Now, I wish to displa ...

javascripthtmlangularjsthree.js

Tips for preventing an element from scrolling horizontally along with the page body

This is the structure of my HTML: <div class='header-wrapper'> <div class='title'>Title</div> </div> <div class='some-wide-content'> </div> Let's imagine a scenario where the br ...

htmlcss

navigating through a specific section of a data chart

I need the first column of a table to stay fixed while the rest of the columns scroll horizontally. Here's the code I have: <div id="outerDiv"> <div id="innerDIv"> <table> <tr><td>1</td><t ...

javascriptjquerycss

Encountered an error in React where the declaration file for a module could not be located

New to Typescript and trying to incorporate a splitter into my project. I'm utilizing SplitPane from "react-split-pane/lib/SplitPane" and Pane from "react-split-pane/lib/Pane" in my Typescript project, but encountering an error: Could not find a de ...

javascriptcssreactjstypescriptmaterial-ui

Having difficulty locating the identification number of an item within the HTML coding

I'm currently trying to locate the ID of the "proceed to checkout" button for a bot that I am developing for my mother on the Best Buy website. However, it seems like the button's ID is hidden and I'm unable to determine how to uncover it. A ...

htmlselenium

The fixed position seems to be malfunctioning and behaving more like absolute

I have a simple question. I am currently designing a mobile version of a page, and we are trying to keep the "snag it" yellow button fixed at the bottom. However, the 'position: fixed' property is not working as expected; it's behaving like ...

css