Troubleshooting FireFox with TinySlideShow

I'm encountering an issue with my TinySlider on FireFox. The image is appearing partially inside the slider area and partially outside to the left, which is quite bothersome. When I tried to fix it for FireFox, it ended up breaking in other browsers.

Below is the HTML code for the Slider:

    <div id="FrontPageSlideshow">
    <ul id="slideshow">
            <li>
                <h3>TinySlideshow v1</h3>
                <span>assets/imgs/photos/1.jpg</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
                <img class="thumber" src="assets/imgs/thumbnails/1.jpg" alt="" />
            </li>
            <li>
                <h3>Sea Turtle</h3>
                <span>assets/imgs/photos/2.jpg</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
                <img class="thumber" src="assets/imgs/thumbnails/2.jpg" alt="" />
            </li>
            <li>
            <h3>Red Coral</h3>
                <span>assets/imgs/photos/3.jpg</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
                <img class="thumber" src="assets/imgs/thumbnails/3.jpg" alt="" />
            </li>
            <li>
                <h3>Coral Reef</h3>
                <span>assets/imgs/photos/4.jpg</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
                <img class="thumber" src="assets/imgs/thumbnails/4.jpg" alt="" />
            </li>
            <li>
                <h3>Blue Fish</h3>
                <span>assets/imgs/photos/5.jpg</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
                <img class="thumber" src="assets/imgs/thumbnails/5.jpg" alt="" />
            </li>
            <li>
                <h3>TinySlideshow v.2</h3>
                <span>assets/imgs/photos/6.jpg</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
                <img class="thumber" src="assets/imgs/thumbnails/6.jpg" alt="" />
            </li>
            <li>
                <h3>Small Fish</h3>
                <span>assets/imgs/photos/8.jpg</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
                <img class="thumber" src="assets/imgs/thumbnails/8.jpg" alt="" />
            </li>
        </ul>
        <div id="wrapper">
            <div id="fullsize">
                <div id="imgprev" class="imgnav" title="Previous Image"></div>
                <div id="imglink"></div>
                <div id="imgnext" class="imgnav" title="Next Image"></div>
                <div id="image"></div>
                <div id="information">
                    <h3></h3>
                    <p></p>
                </div>
            </div>
            <div id="thumbnails">
                <div id="slideleft" title="Slide Left"></div>
                <div id="slidearea">
                    <div id="slider"></div>
                </div>
                <div id="slideright" title="Slide Right"></div>
            </div>
        </div>
    <script type="text/javascript" src="js/compressed.js"></script>
    <script type="text/javascript">
        $('slideshow').style.display='none';
        $('wrapper').style.display='block';
        var slideshow=new TINY.slideshow("slideshow");
        window.onload=function(){
            slideshow.auto=true;
            slideshow.speed=5;
            slideshow.link="linkhover";
            slideshow.info="information";
            slideshow.thumbs="slider";
            slideshow.left="slideleft";
            slideshow.right="slideright";
            slideshow.scrollSpeed=4;
            slideshow.spacing=5;
            slideshow.active="#fff";
            slideshow.init("slideshow","image","imgprev","imgnext","imglink");
        }
    </script>
  </div>
  </div>

And here's the CSS for the slider:

#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:506px; margin:0px 0px 30px 30px; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:auto;}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(../assets/imgs/images/left.gif) left center no-repeat}
#imgnext {right:0; background:url(../assets/imgs/images/right.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(../assets/imgs/images/link.gif) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(../assets/imgs/images/scroll-left.gif) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(../assets/imgs/images/scroll-right.gif) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:50px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}
htmlcssslideshow

Answer №1

#image img {position:absolute; z-index:25; width:auto}

Your issue may lie in the positioning of your images within the #image div. It seems like you haven't specified the "left:x;" or "top:y;" coordinates yet.

You might want to consider trying this approach:

#image img {position:absolute; left:0; top:0; z-index:25; width:auto}

This adjustment could potentially align your pictures to the top and left within the parent div. If this doesn't resolve the issue, then it's possible that your parent div (#image) is misaligned, and you may need to continue troubleshooting upwards (for example, checking #fullsize or #wrapper).

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 single-page anchor link is positioned just below a few pixels, connecting with the #link

Hey there! I'm currently working on a single-page website and running into an issue. When I click on the anchor link in the menu, it seems to go slightly below the intended area, just like in this image https://i.sstatic.net/3hAvO.jpg I want the beha ...

javascriptjqueryhtmlcssanchor

HTMLMediaElement does not have the setSinkId method

I am currently in the process of developing a WebRTC application using Angular, with the goal of managing audio output through the setSinkId() method within HTMLMediaElement. However, when attempting to use this method, I am encountering an error message s ...

javascripthtmlwebrtc

Inconsistent CSS3 transitions behavior in Firefox 4

I have been playing around with some css3 transitions and created a slider test. It works perfectly in webkit browsers, but I have noticed an issue in Firefox 4. When clicking on the left link for the first time, the slider is supposed to slide to the left ...

javascriptjquerycssfirefox4

I am currently facing a challenge with Bootstrap, as I am trying to design a webpage for small devices using a 1:4:1 format, but I am struggling to get it right

column 1 and column 3(left and right cols) have successfully passed the test case, but not column 2 (the middle one) that I have commented on in the code. Please help. Thank you. The problem has certain conditions that would have been easier to understa ...

htmlcssbootstrap-4

Suggestions for automatically adjusting the height and width of a div containing z-indexed content

I'm attempting to automatically adjust the height and width of the parent div that contains three stacked images, but the parent is not adjusting to the dimensions of the content. Even when the div and the last image are on the same z-index, it's ...

htmlcssz-index

Ways to apply background to a div element

I attempted to place an image as the background of a div, but it seems to have vanished! I would like the background image to cover the entire page. Thank you for your assistance. <!DOCTYPE html> <html> <head> <title></title& ...

htmlcss

The HTML component fails to acknowledge width settings

I seem to be having trouble identifying an issue or perhaps I am misunderstanding something (I am using daisyui + nx + tailwind css + angular). To simplify my problem, let's consider the following scenarios: In the first scenario, I have: <div cl ...

htmlcssangulartailwind-cssdaisyui

MUI: Issue with pseudo element appearing cropped outside of Paper container

I am facing an issue where a red arrow pseudo element '::before' is partially cut off outside its container '.MuiPaper-root'. I need the arrow to remain visible, any suggestions on how to fix this? Here is the relevant code snippet and ...

javascriptcssreactjsmaterial-ui

Identifying when the mouse cursor changes on a website

Is there a way to detect when the mouse cursor changes as it hovers over different page elements? An event similar to this would be ideal: window.onmousecursorchange = function(e) { // e would provide information about the cursor // for example, ...

javascripthtmlnode.jsdom-events

Is it possible for a navbar in CSS to collapse based on its width?

At the moment, I am utilizing Bootstrap v3.3.6 and jQuery v1.9.1. My current project involves a horizontal navbar that collapses once it reaches a specific screen resolution. I am pleased with how this feature operates and wish to maintain the same breakpo ...

htmlcsstwitter-bootstrap

Center the text in links at the bottom of the screen using Flexbox

It feels too early on a Monday morning for this. I have successfully used flexbox to align the overall page, but I am facing trouble aligning the individual link items. Specifically, I want to align the text of the links to the bottom. I tried using verti ...

htmlcssflexbox

The background image and svgs are not displayed on laravel localhost/public/index.php, but they appear when using "php artisan serve"

I've created a beautiful Laravel project on my PC. The welcome.blade.php file in the project has a background image located in the: public/images/ directory. To display the images, I've used the following CSS: html, body { color: #f4f6f7; ...

phpcsslaravellaravel-artisan

Tips for integrating Shopify CDN into Bootstrap

Hello everyone, I'm a beginner in web development and recently got a project to create an ecommerce website for a client. The client wants something similar to www.gallerydept.com. However, when I inspected the site, I noticed that it uses Shopify&apo ...

htmlcssbootstrap-4shopifye-commerce

I am having trouble getting this code to display divs in two separate columns. How can I go about achieving that?

Having trouble getting the divs to split into columns properly. Not sure why it's not working? For example, col-lg-8 and col-lg-4 should be splitting into two for larger screens. <!DOCTYPE html> <html> <head> <link href="h ...

htmlcssbootstrap-4

Can JSON data be moved in Django without relying on JS or JQuery?

I am currently exploring how to manage JSON files within Django and have successfully unpacked JSON data. My next goal is to display this data inside a table. Is there a way to accomplish this using only HTML and the so-called "tornado brackets" {{ }}, wi ...

pythonhtmldjango

Connect jQuery's resizable controls

Check out this jSFiddle. I am attempting to add event handlers for resizing $('oWrapper_'+num). However, the resizing does not occur. This is because $('#oWrapper_'+num) has not been added to the dom at the time of execution, so the se ...

javascriptjqueryhtmlcssjquery-ui

Tips for displaying all 'ul li' lists in media queries to ensure responsiveness in design

When I view my navigation bar snippet on desktop mode, it displays all the list items. However, when I adjust the browser width to fit my media queries, only the Home list is shown in the nav bar. Here's an example of the issue: Before Clicking the ...

jqueryhtmlcssmedia-queriesmedia

Trouble with ASP.NET Master Page CSS Rendering Incorrectly

My CSS seems to be causing some trouble as the DIVs are not aligning as they should. Instead, they are just wrapping around the text and not adjusting the page layout properly. Here is an example of my CSS: body { height: 95%; width: 100%; ma ...

htmlcssasp.net

What is the proper way to add process.env.PORT to the script declarations string within my package.json file?

I am facing an issue while trying to upload my file on Heroku that requires including the PORT specification. Unlike my previous projects, this project consists of only html, js, and css files instead of an index.js file. To run it, I am using "live-server ...

htmlnode.jsheroku

What strategies can I use to include multiple spans within div elements without causing the code to become overly lengthy?

I'm working with 20 spans representing movie genres, each accompanied by another span that "closes" the genre when selected. The closing span has an .active class, similar to this example: https://i.sstatic.net/7CuuX.png My version currently looks li ...

htmlcss