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
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
