Geek Answers Handbook

Unknown fields on my jquery slider?

I have an unknown margin on the left and the top of the jquery slide show ... can you figure out what is going on? please help !!! Below is the code and screenshot

    %@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>

    <script src="js/jquery-1.3.2.js" type="text/javascript"></script>

    <script src="js/cycle.js" type="text/javascript"></script>

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

$('#slideshow').before('<ul id="nav">').cycle({
    fx:     'turnDown',
    speed:  'fast',
    timeout: 0,
    pager:  '#nav',

    // callback fn that creates a thumbnail to use as pager anchor
    pagerAnchorBuilder: function(idx, slide) {
        return '<li><a href="#"><img src="' + slide.src + '" width="198" height="93" /></a></li>';

    }

});

  $('li:lt(3)').wrapAll('<div class="wrapper" />');
 $('li:gt(2)').wrapAll('<div class="wrapper2" />');

});

    </script>

    <style type="text/css">
        #slideshow
        {
            height: 300px;
            width: 469px;
            padding: 0;
            margin-top: 0px;
            position: absolute;
            left: 267px;
            top: 25px;
        }
        #slideshow img
        {
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #eee;
            width: 449px;
            height: 290px;
        }
        .wrapper
        {
            width: 217px;
            float: left;
        }
        .wrapper2
        {
            width: 217px;
            float: right;
        }
        #nav
        {
            width: 920px;
            float: left;
        }
        #nav li
        {
            width: 198px;
            margin-top: 0px;
            float: left;
            margin-bottom: 5px;
            margin-left: 0px;
            list-style: none;
        }
        #nav a
        {
            width: 198px;
            height: 93px;
            padding: 3px;
            display: block;
            border: 1px solid #ccc;
            background-color: #eee;
        }
        #nav a.activeSlide
        {
            background: #88f;
        }
        #nav a:focus
        {
            outline: none;
        }
        #nav img
        {
            border: none;
            display: block;
        }
    </style>
</head>
<body>
    <div id="slideshow" class="pics">
        <img src="http://farm2.static.flickr.com/1429/1252247669_5f014e7dc1_b.jpg" />
        <img src="http://farm1.static.flickr.com/153/332584527_bd5efc0197_o.jpg" />
        <img src="http://farm4.static.flickr.com/3031/2744217176_33eeeef93a_b.jpg" />
        <img src="http://farm2.static.flickr.com/1429/1252247669_5f014e7dc1_b.jpg" />
        <img src="http://farm1.static.flickr.com/153/332584527_bd5efc0197_o.jpg" />
        <img src="http://farm4.static.flickr.com/3031/2744217176_33eeeef93a_b.jpg" />
    </div>
</body>
</html>

here is the link to the screenshot

http://img337.imageshack.us/img337/9043/sliderb.jpg

+5
source share
4 answers

OK, if I crossed out your javascript and commented on the "left" and "top" styles from your CSS and added the CSS rule below, then I get all the images vertically from the top left corner (without ghost fields).

body {margin: 0;}

jQuery (v1.4.2). , angular Page Language = "VB" , , ? ...

CSS , - , cycle.js script.

+1

0 body {}?

0

@jackocnr, cycle.js , , , . , /, . "" Chrome, , , .

0

make sure that the fields html, body, ul and li and padding are equal to 0. If any P-tags are generated in your slider or things are wrapped, add margin and padding 0 to them as well. For testing, you can try to put a red frame for your pics class to see if it really sits on top and left 0 in relation to the body. I would recommend you use something like Firebug for firefox to launch each element and see if any of your 1st DIV container is full.

0
source

More articles:


All Articles