tags:

views:

73

answers:

4

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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 a link to the screenshot

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

A: 

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

edl
i dont have any styles for body.its just a test page. no stylesheet, nothing. the code is working, its just these margins,i just cant figure them out why they are showing.
ravi
I'm saying you should try setting the body margins and padding to 0 as I believe they have default values when not explicitly set. Unless I'm misunderstanding the problem?
edl
i'v tried that after you mentioned,but still no luck.
ravi
top:25px; :) Delete that and that takes care of the top margin. Probably same for left:267px;
edl
nope! that just taking care of my #slideshow div,nothing else..problem is with my .wrapper div ,its just doesn't go to the extreme left and with the ul# nav for the top margin..i really cant understand why these margins are showing
ravi
hmm. can I see the full markup?
edl
+1  A: 

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.

jackocnr
A: 

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.

Isaac Lubow
A: 

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.

Brandon