I am currently designing a website for a friend, and I have encountered an issue with an image that I have masked using CSS border-radius.
The image is larger and taller than its container, so I used JavaScript to center it correctly. However, it appears that Google Chrome and Safari do not support this functionality like Firefox does.
I am looking for solutions to make it look right on Chrome and Safari as well.
At the moment, only one image is being displayed on the website.
Your img elements are absolutely positioned. To center them correctly in Chrome, make the parent figure relatively positioned.
To do this, update the CSS for figure:
<figure style="position: relative; opacity: 0; ">
<img src="img/pic001_thumb.jpg" title="work 1" style="top: 100px; left: 100px; ">
</figure>
It appears that different left and top values are being set by your JavaScript for different browsers, as pointed out by swatkins. I recommend finding a common solution using CSS first.
While I can't confirm in Firefox at the moment, setting position: relative may also work for that browser.
There seems to be an issue with your JavaScript code.
When I checked in Firebug, Chrome displayed the following:
<article class="thumb-container"
style="width: 200px; height: 200px; margin-top: 10px;
background-color: rgb(216, 228, 125);
overflow-x: hidden; overflow-y: hidden; ">
<figure style="opacity: 1; ">
<img src="img/pic001_thumb.jpg" title="work 1" style="top: 100px; left: 100px; ">
</figure>
</article>
Meanwhile, Firefox showed me this:
<article class="thumb-container"
style="width: 200px; height: 200px; margin-top: 10px;
background-color: rgb(216, 228, 125);">
<figure style="opacity: 1;">
<img title="work 1" src="img/pic001_thumb.jpg" style="top: -78px; left: -25px;">
</figure>
</article>
The main difference lies in the style attributes of the img tags. While I briefly investigated the JavaScript code and didn't notice any obvious issues, it would be wise to start there to address the problem.
I am currently utilizing moment.js for date formatting and storing it in the database This is the schema code that I have implemented: const Schema = new mongoose.Schema({ transactionTime: { type: Date, default: moment().toDate(), ...
Consider the following scenario: <div id="addNewMenuElementPart2"> Numerous elements with a name attribute are present here. </div> <div id="addNewMenuElementPart3Optional"></div> Additionally, t ...
Is there a way to remove the brief black background that appears when loading an HTML5 video? I have tried using CSS without success. The HTML: <div id="start-screen"> <video id="video-element"> <source src="video-mp4.mp4" type="vide ...
After using the provided code to create a channel, I'm having trouble locating the channel ID needed for the next step in my function. This function is meant to move to a specific category and send a message to it. const buyid = generateID message. ...
I've received a token from the backend axios.post(process.env.VUE_APP_LOGIN, payload) .then(response => { const {access_token, token_type, user} = response.data; this.token = access_token this.$store.commit(&a ...
While diving into the world of next.js, I encountered an interesting challenge. In my project, I came across this puzzling error. The culprit seemed to be a module called Typed.js, which threw me off with a peculiar message: Server Error ReferenceError: d ...
I am currently in the process of developing an application that empowers users to generate new items, modify existing items, or delete items by utilizing corresponding icons located adjacent to each item. When it comes to existing items, the action icon d ...
Can VueJs handle a scenario like this? Html: <div class="someStaticClass {{someDynamicClass}}">...</div> JS: var app = new Vue({ data: { someDynamicClass: 'myClassName' }, mounted: function() { ...
Looking to add a button for expanding child rows within a datatable, with each group in the table having the same child elements.... The provided CSS currently displays the icon on every row throughout the entire table. td.details-control { backg ...
I recently had to customize the jqueryui modal dialog in order to meet the standards set by my company. Currently, I am facing a cross-browser issue with the float and width of the input labels. You can view the sample website here: http://inetwebdesign. ...
I am facing an issue with my gtag (analytics plugin) where I can access it on my components but not on my store. Any suggestions are welcome. Thank you. plugins/vue-gtag.js import Vue from "vue" import VueGtag from "vue-gtag" export d ...
Looking for assistance with Express routing. I want users to only see localhost:3000/page2 when they go to /page2, instead of localhost:3000/page2.html I have three HTML pages - page1.html, page2.html, and page3.html. I've created a server using Expr ...
I've almost completed setting up a dynamic page in Next.js using getStaticPaths(), but I'm running into an issue with the getStaticProps() function not referencing the URL query correctly to load the relevant information. Here is my code: //Get ...
I'm having trouble getting my React app to properly style divs using Tailwind CSS. The intellisense feature doesn't suggest any styling options for me either. import './App.css'; function App() { return ( <div className="t ...
Is it possible to link the ng-model of a button with the ng-repeat loop? <a ng-repeat="x in [1,2,3,4]" ng-model="myButton[x]">{{myButton[x]}}</a> In the Controller: var id = 4; $scope.myButton[id] = ' :( '; I am interested in crea ...
Utilizing footable in conjunction with Boostrap Responsive Tabs leads to an issue post-resize. When the page is initially loaded on a desktop, everything functions properly until the screen is resized. Once the screen is resized, the tables within the tabs ...
www.mywebsite.com www.mywebsite.com/ www.mywebsite.com/1 I need my website to show the same content for each of the links above. Currently, it is not displaying anything for www.mywebsite.com and www.mywebsite.com/ function App() { return ( <Rout ...
How can I implement virus scanning for the files uploaded in my Node.js Express project? I have a feature that allows users to upload CSV files and it's important to protect against viruses. Currently, I am using Multer for file uploads. ...
Having trouble with this issue for 48 hours straight. Every time I attempt to click a button in the top bar, there is no animation. The intended behavior is for the width to increase and the left border color to change to green, but that's not what&ap ...
Here is how my counter function is structured: function count() { var value = ids.val(); return (value == '') ? 0 : value.replace(/\s,?|,$/g, '').split(',').length; } After checking the returned value, data is ...