Is it possible to specifically focus on Google Chrome?

Can anyone help me with positioning the update button on www.euroworker.no/order? The button works fine in Firefox and Internet Explorer, but it's not displaying correctly in Chrome or Safari. I've tried targeting Safari and Chrome specifically, but it hasn't worked. Is there a way to fix this?

Here is the CSS and HTML(Smarty) code:

HTML(Smarty):

    {capture assign="cartUpdate"}

     <div id="cartUpdate"><!--<input type="submit" class="submit" value="{tn _update}" />-->
     <button type="submit" class="submit" id="oppdatersubmit" name="saveFields" title="Oppdater" value="">&nbsp;</button> </div>
    {/capture}
    {assign var="cartUpdate" value=$cartUpdate|@str_split:10000}
    {php}$GLOBALS['cartUpdate'] = $this->get_template_vars('cartUpdate'); $this->assign_by_ref('GLOBALS', $GLOBALS);{/php}

    {form action="controller=order action=update" method="POST" enctype="multipart/form-data" handle=$form id="cartItems"}

CONTENT

{/form}

And the CSS:

#oppdatersubmit {
 background-image:url(../../upload/oppdater.png);
 background-repeat:no-repeat;
 background-position:left;
 background-color:none;
 border:none;
 overflow:hidden;
 outline:none;
    white-space: nowrap;
 width:77px;
 height:25px;
 cursor:pointer;
 position:absolute;
}

#cartUpdate {
 position:absolute;
 width:160px;
 height:30px;
 left:580px;
 bottom:130px;
}

I need help changing these codes to make it work in Chrome and Safari.

Thank you.

Answer №1

@media screen and (-webkit-min-device-pixel-ratio:0) {

    /*Chrome specific CSS code*/

    #cartUpdate {
        position:absolute;
        width:160px;
        height:30px;
        left:660px;
        bottom:40px;
    }
}

Successfully tackled the issue :)

UPDATE

This link offers a helpful solution: CSS browser/OS selectors with JS.

Answer №2

Discover various browser hacks that can target specific browsers; some work across all versions while others may not.

Take a look at some of Google Chrome's hacks:

WebKit hack:

.selector:not(*:root) {}
  • Google Chrome:All versions
  • Safari:All versions
  • Opera :14 and Later
  • Android:All versions

Supports Hacks:

@supports (-webkit-appearance:none) {}

Applies to Google Chrome 28 and later, as well as Opera 14 and newer.

  • Google Chrome:28 and Later
  • Opera :14 and Later

Property/Value Hacks:

.selector { (;property: value;); }
.selector { [;property: value;]; }

Targets Google Chrome versions 28 and below, Opera 14 and later, and Safari 7 and earlier. - Google Chrome:28 and Before - Safari:7 and Before - Opera :14 and Later

JavaScript Hacks:1

var isChromium = !!window.chrome;
  • Google Chrome:All versions
  • Opera :14 and Later
  • Android:4.0.4

JavaScript Hacks:2 {Webkit}

var isWebkit = 'WebkitAppearance' in document.documentElement.style;
  • Google Chrome:All versions
  • Safari:3 and Later
  • Opera :14 and Later

JavaScript Hacks:3

var isChrome = !!window.chrome && !!window.chrome.webstore;
  • Google Chrome:14 and Later

Media Query Hacks:1

@media \\0 screen {}
  • Google Chrome:22 to 28
  • Safari:7 and Later

Media Query Hacks:2

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
  • Google Chrome:29 and Later
  • Opera:16 and Later

For further details, check out this website

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

Applying a gradient overlay to an image using CSS

Feeling a bit frustrated with this issue. I'm working on my Joomla website utilizing Phoca Gallery, and the code it generates includes the following: <img class="pg-image" src="/images/phocagallery/other/thumbs/phoca_thumb_m_something.jpg" alt="So ...

Is there a way to place my searchbox in the top right corner of the page?

I am currently working on creating a search function for my list of products. However, I have encountered an issue where the searchBox is not appearing in the top right corner as intended. Despite trying various solutions, I have been unsuccessful in movin ...

What are the steps to implementing PNG masking using PixiJS?

I am currently working on incorporating a png sprite as a mask for another layer. I found a demo on the pixi.js official website and created this fiddle: https://jsfiddle.net/raphadko/ukc1rwrc/ The code snippet below is what I am using for the masking fu ...

The attempt to remove the ajax-loaded page while preserving the original div is proving to be

I have a function that is triggered when a link is clicked. This function uses ajax to load a new page over a div. <pre><code> function displayContent(id) { loadPage_signup = "register.php"; loadPage_info = "userinfo.php"; $.aj ...

Creating a multiline centered navigation bar item using Bootstrap 4

My navigation bar is functioning properly with single-line items, but encounters alignment issues when dealing with multi-line items: <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> ...

implementing jquery typewriter plug-in for a responsive bootstrap image

I am using Bootstrap and my image response dynamically, but I am having trouble adding text to it. I would like to use a jQuery typewriter plugin for the text on the image, which should resize according to screen size. Here is my HTML code and I have used ...

Ways to align an image and text vertically next to each other within a div

After coming across the solution for ''Vertical Align in a Div ", I decided to implement Adam's answer. However, my challenge lies in figuring out how to display both an image and text side by side with the text centered vertically. View My ...

How can I apply an underline effect when hovering over navigation links in a responsive menu?

I've successfully added an underline effect on hover for the navigation menu. However, I encountered an issue with the responsiveness of the menu. When viewed on screens smaller than 600px, the underline effect covers the entire width of the block ins ...

Showing no background color until the user lifts their finger

I am currently in the process of developing a website. The navigation on the website starts off as transparent (background: transparent) when opened, but as soon as you start scrolling, it should transition to a colorful state with shades like grey, midnig ...

Aligning two items to the right along the vertical axis, even if they have different heights (Bootstrap

I am facing an issue with aligning two links (one text and one image) to the right and ensuring that the bottom of each is vertically aligned. Currently, they appear like this: (vertically aligned with each others' tops) Here's the relevant HT ...

What's the best way to arrange a series of images in a horizontal line using html and css?

Looking for a way to display a list of images in a straight line with just the right amount of spacing between them? Check out my fiddle and see the challenge I'm facing. https://i.sstatic.net/ZvICc.png I've been experimenting with HTML c ...

Using SASS variables in JavaScript: A guide

My JavaScript file contains a list of color variables as an Object. export const colors = [ { colorVariable: "$ui-background" }, { colorVariable: "$ui-01" }, { colorVariable: "$ui-02" }, ... ] The Object above is derived from a scss file whic ...

What is the most effective method for showcasing HTML content in a recyclerView?

Within the recyclerView, I showcase comments that are stored in HTML format. My attempt to display the comments in a webView was successful, allowing me to use custom *.css, but it caused significant lag in the recyclerView when scrolling. Additionally, m ...

Creative CSS spinners design

Seeking assistance to modify my spinner design. I want one end to be thicker and the other end to be thin. My attempts so far have been unsuccessful. <div id="data-loader"> <div class="loader"> <div class="blue"></div& ...

Can I increase the top margin by more than mt-5?

Seeking help to align elements on my website. I've applied mt-5 in the HTML, yet require additional margin space. Any suggestions on how to achieve this? ...

Web browsers such as Chrome and Internet Explorer, along with the AngularJS framework, and the Access

In the process of creating a web application using AngularJS that I plan to distribute via CDs, I encountered a major obstacle related to the same origin policy in Chrome and IE. Specifically, I received the following error message: XMLHttpRequest cannot ...

Is it possible to extract the CSS path of a web element using Selenium and Python?

I am working with a collection of elements using find_elements_by_css_selector, and my next task is to extract their css locators. I attempted the following approach: foo.get_property('css_selector') However, it seems to be returning None. ...

Using jQuery to locate text and apply a specific class

Explaining My HTML Structure: <div id="test-listing"> <article> <a>Some URL</a><h3>Some Text</h3> <p>Drink this coffee</p> </article> <article><a>Some URL</a><h3>Some Text</h ...

What could be causing the absence of a background image in CSS?

When I try to view my local desktop file, the CSS background image isn't showing up. Here's the code I'm using: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" text="type/css" href="dis ...

"Creating a CSS3 animation for changing the background image source - a step-by-step

Unfortunately, the background-image cannot be animated with keyframes in the following way: @keyframes kick{ 0%{background-image: url(images/img-man-1.png);} 25%{background-image: url(images/img-man-2.png);} 50%{background-image: url(images/im ...