unknown margins on my jquery slideshow?_问答_开发者

I have got unknown margin on left and the top of my jquery slideshow..cant figure out what's happening? please help!!! below is the code and the 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
    pagerAnch开发者_如何学PythonorBuilder: 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 a link to the screenshot

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

OK, if I strip out your javascript, and comment out the 'left' and 'top' styling from your CSS, and add the CSS rule below, then i get all the pictures stacked vertically, from the very top left corner (no ghost margins).

body {margin: 0;}

Also you should be using the newer version of jQuery (v1.4.2). Finally, you missed an opening angular bracket in the Page Language="VB" line at the top of your quoted code, but are you sure you need that line in there? You may want to try removing it...

If you apply those CSS changes, and remove that top line, and it still doesn't work, we will need to see your cycle.js script.

Have you tried resetting all margins and padding to 0 in body{}?

I agree with @jackocnr, if cycle.js is a plugin it most likely is building a stylesheet dynamically. The author's specs should explain how to adjust/customize, if such a thing is possible. Try using Chrome's Developer Tools' "Metrics" tab to identify the element that contains the space, as a diagnostic tool.

ensure html, body, ul and li margins and padding are 0. If there is any P tags being generated or wrapping stuff in your slider, add margin and padding 0 to that too. For testing you can try putting a red border for your "pics" class to see if it is really sitting top and left 0 in relation to body. I would recommend you use something like Firebug for firefox to run through each element and see if anything is overflowing from your 1st DIV container.