0

Hi,
I'm having issues with the current page I'm working on. It works fine in IE, Chrome and Safari but not so much in Firefox.

The problem I'm having is that the slideshow is positioned all the way off the screen (towards the right). It's supposed to be straight below the logo. Someone please help!

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title></title>

    <link rel="stylesheet" href="css/style.css">

    <!-- This is the start of the slideshow stuff -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
    <script src="js/slides.min.jquery.js"></script>
    <script>
        $(function(){
            $('#slides').slides({
                preload: true,
                preloadImage: 'img/loading.gif',
                play: 5000,
                pause: 2500,
                hoverPause: true
            });
        });
    </script>


    <!-- This is the end of the slideshow stuff -->


    <!-- This is the start of the lightbox stuff -->



        <script>
        !window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
    </script>
    <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
    <link rel="stylesheet" href="style.css" />

    <script type="text/javascript">
        $(document).ready(function() {
            /*
            *   Examples - images
            */

            $("a#example1").fancybox();

            $("a#example2").fancybox({
                'overlayShow'   : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic'
            });

            $("a#example3").fancybox({
                'transitionIn'  : 'none',
                'transitionOut' : 'none'    
            });

            $("a#example4").fancybox({
                'opacity'       : true,
                'overlayShow'   : true,
                 'overlayColor'          :       '#FFF',
                'transitionIn'  : 'elastic',
                'transitionOut' : 'none'
            });

            $("a#example5").fancybox();

            $("a#example6").fancybox({
                'titlePosition'     : 'outside',
                'overlayColor'      : '#000',
                'overlayOpacity'    : 0.9
            });

            $("a#example7").fancybox({
                'titlePosition' : 'inside'
            });

            $("a#example8").fancybox({
                'titlePosition' : 'over'
            });

            $("a[rel=example_group]").fancybox({
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'titlePosition'     : 'over',
                'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            });

            /*
            *   Examples - various
            */

            $("#various1").fancybox({
                'titlePosition'     : 'inside',
                'transitionIn'      : 'none',
                'transitionOut'     : 'none'
            });

            $("#various2").fancybox();

            $("#various3").fancybox({
                'width'             : '75%',
                'height'            : '75%',
                'autoScale'         : false,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'type'              : 'iframe'
            });

            $("#various4").fancybox({
                'padding'           : 0,
                'autoScale'         : false,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none'
            });
        });

    </script>

    <!-- This is the end of the lightbox stuff -->

</head>
<body>

    <div id="container">

    <div id="logo">
    <img src="img/logo.png" width="200" height="109">
    </div>


        <div id="example">

        <div id="slides">
<div class="slides_container">
<img src="img/1.jpg" width="800" height="532" alt="Slide 1">
<img src="img/2.jpg" width="800" height="532" alt="Slide 2">
<img src="img/3.jpg" width="800" height="532" alt="Slide 3">
<img src="img/4.jpg" width="800" height="532" alt="Slide 4">
<img src="img/5.jpg" width="800" height="532" alt="Slide 5">
<img src="img/6.jpg" width="800" height="532" alt="Slide 6">
<img src="img/7.jpg" width="800" height="532" alt="Slide 7">
<img src="img/8.jpg" width="800" height="532" alt="Slide 8">
                </div>

            </div>

        </div>




       <div id="footer">


        <a id="example4" href="#contact"><span class="contactcolor">CONTACT ME</span></a>


 <div style="display:none"><div id="contact">
If you'd like to get a quote or see more of my work you can use the following: <p></p> 

Email:  <p></p>
Phone: 

    </div>
    </div>



    </div>  



    </div>



</body>

</html>

CSS

body {
background:black;   



}
#logo {
float:left;
height:109px;
width:850px;
margin-bottom:50px;
margin-top:20px;    
}

#container {
    width:850px;
    margin:0 auto;

}

#example {
    width:800px;



}

#frame {
    z-index:0;
    width:830px;
    height:552px;
    top:100px;
    margin-left:0px;

}

/*
    Slideshow
*/

#slides {

}

/*
    Slides container
    Important:
    Set the width of your slides container
    Set to display none, prevents content flash
*/

.slides_container {
    width:800px;
    overflow:hidden;
    display:none;
    margin-top:50px;
    border:20px white solid;
}

/*
    Each slide
    Important:
    Set the width of your slides
    If height not specified height will be set by the slide content
    Set to display block
*/

.slides_container a {
    width:900px;
    height:270px;
    display:block;
}

.slides_container a img {
    display:block;
}

/*
    Next/prev buttons
*/

#slides .next,#slides .prev {
    position:absolute;
    top:107px;
    left:-39px;
    width:24px;
    height:43px;
    display:block;
    z-index:101;
}

#slides .next {

}

/*
    Pagination
*/

.pagination {
    margin:26px auto 0;
    width:150px;
}

.pagination li {
    float:left;
    margin:0 1px;
    list-style:none;
}

.pagination li a {
    display:block;
    width:12px;
    height:0;
    padding-top:12px;
    background-image:url(../img/pagination.png);
    background-position:0 0;
    float:left;
    overflow:hidden;
}

.pagination li.current a {
    background-position:0 -12px;
}

/*
    Footer
*/

#footer {
    text-align:center;
    width:800px;
    color:white;
    margin-top:70px;
    font-family:Arial, Helvetica;


}

#footer p {
    margin:4.5px 0;
    font-size:1.0em;
}

/*
    Anchors
*/

a:link,a:visited {
    color:#09F;
    text-decoration:none;
}

a:hover,a:active {
    color:#599100;

}


#contact {
font-family:arial;
height:150px;
color:#FFF;
background:black;
border:0px;
padding:20px;
padding-top:100px;


}

.contactcolor {
color:white;    
font-weight:bold;   

}
3
Contributors
2
Replies
4
Views
5 Years
Discussion Span
Last Post by buddylee17
0

It's probably the float attribite on the logo. Try taking it out and see if all browsers get the same result (even if not the way you want it), with all the same, you can work on an alternative. Or you could add Float on the #slides

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.