Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question gap at the top and move 3 small squares on top?!

    hi,

    on my site: http://www.jbiddulph.com/fab there is a gap at the top, I'm not sure why, something to do with the large image fade gallery, there is also 3 small squares to the top right, these are clickable but I can't seem to click on them?! I have put z-inex on them but can't get them on top of the #hd

    here is my code

    HTML
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    <title>The Fabulous Experience Company</title>
    <meta name="description" content="xxx" />
    <meta name="keywords" content="xxx" />
    <meta name="Content-Language" content="en-gb" />
    <meta name="robots" content="FOLLOW,INDEX" />
    <meta name="revisit-after" content="2 days" />
    <meta name="distribution" content="Global" />
    <meta name="resource-type" content="document" />
    <link rel="stylesheet" href="css/basic.css" type="text/css" />
    <link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="css/reset-style.css" />
    <link rel="stylesheet" type="text/css" href="css/sitestyle.css" />
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="js/jquery.galleriffic.js"></script>
    <script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
    <!-- We only want the thunbnails to display when javascript is disabled -->
    <script type="text/javascript">
    	document.write('<style>.noscript { display: none; }</style>');
    </script>
    <script type="text/javascript" src="js/jquery.idTabs.min.js"></script>
    </head>
    <body>
    <div id="slider">
    	<div id="gallery" class="content">
    		<div class="slideshow-container">
    			<div id="loading" class="loader"></div>
    			<div id="slideshow" class="slideshow"></div>
    		</div>
    	</div>
    	<div id="thumbs" class="navigation">
    		<ul class="thumbs noscript">
    			<li>
    				<a class="thumb" name="Giraffes" href="images/giraffes.jpg" title="Title #0">
    					<img src="images/square-blue.png" alt="Title #1" />				</a>			</li>
    
    			<li>
    				<a class="thumb" name="Diver" href="images/diver.jpg" title="Title #1">
    					<img src="images/square-blue.png" alt="Title #1" />				</a>			</li>
    
    			<li>
    				<a class="thumb" name="Egypy" href="images/egypt.jpg" title="Title #2">
    					<img src="images/square-blue.png" alt="Title #2" />				</a>			</li>
    		</ul>
    	</div>
    	<div style="clear: both;"></div>
    </div>
    <div id="doc">
    	<div id="hd">
    		<h1>The Fabulous Experience Company</h1>
    		<ul>
    			<li><a href="#" class="menuselected" title="HOME">HOME</a></li>
    			<li><a href="#" title="ABOUT US">ABOUT US</a></li>
    			<li><a href="#" title="HOLIDAY TYPE">HOLIDAY TYPE</a></li>
    			<li><a href="#" title="DESTINATIONS">DESTINATIONS</a></li>
    			<li><a href="#" title="TAILOR MADE">TAILOR MADE</a></li>
    			<li><a href="#" title="CONTACT US">CONTACT US</a></li>
    		</ul>
    		<span><a href="#" title="Travel Insurance">Travel Insurance</a> | <a href="#" title="Useful Links">Useful Links</a></span>	
    		<h2>Not just a holiday...<br />
    		<strong>a fabulous experience.</strong></h2>
    	</div>
    	<div id="bd">
    		<div id="yui-main">
             <div class="yui-b">
    				<div id="tabs" class="usual"> 
    				  <ul> 
    					 <li><a class="selected" href="#tab1">MAP SEARCH</a></li> 
    					 <li><a href="#tab2">QUICK SEARCH</a></li> 
    				  </ul> 
    				  <div id="tab1">This is tab 1.</div> 
    				  <div id="tab2">More content in tab 2.</div> 
    				</div> 
    				 
    				<script type="text/javascript"> 
    				  $("#tabs ul").idTabs(); 
    				</script>
    			</div>
          </div>
    		<div class="yui-g">
    			<div class="topcontent"> hello my name is John</div>
    			<div id="leftcolumn" class="yui-u first">
    				<h2>Header 2</h2>
    				<p><a href="#" title="linky">Linky</a></p>
    				<p>Text</p>
    			</div>
    			<div class="yui-u" id="rightcol">
    				<h2>Right</h2>
    				<p>texty</p>
    			</div>
    		</div>
    	</div>
    	<div id="ft">
    		<p>All rights reserved &copy; Copyright 2010 fab.com</p>
    	</div>
    </div>
    <script type="text/javascript">
    			jQuery(document).ready(function($) {
    				// We only want these styles applied when javascript is enabled
    				$('div.navigation').css({'width' : '300px', 'float' : 'left'});
    				$('div.content').css('display', 'block');
    
    				// Initially set opacity on thumbs and add
    				// additional styling for hover effect on thumbs
    				var onMouseOutOpacity = 0.67;
    				$('#thumbs ul.thumbs li').opacityrollover({
    					mouseOutOpacity:   onMouseOutOpacity,
    					mouseOverOpacity:  1.0,
    					fadeSpeed:         'fast',
    					exemptionSelector: '.selected'
    				});
    				
    				// Initialize Advanced Galleriffic Gallery
    				var gallery = $('#thumbs').galleriffic({
    					delay:                    6000,
    					numThumbs:                 15,
    					preloadAhead:              10,
    					enableTopPager:            true,
    					enableBottomPager:         true,
    					maxPagesToShow:            7,
    					imageContainerSel:         '#slideshow',
    					controlsContainerSel:      '#controls',
    					captionContainerSel:       '#caption',
    					loadingContainerSel:       '#loading',
    					renderSSControls:          true,
    					renderNavControls:         true,
    					playLinkText:              'Play Slideshow',
    					pauseLinkText:             'Pause Slideshow',
    					prevLinkText:              '&lsaquo; Previous Photo',
    					nextLinkText:              'Next Photo &rsaquo;',
    					nextPageLinkText:          'Next &rsaquo;',
    					prevPageLinkText:          '&lsaquo; Prev',
    					enableHistory:             false,
    					autoStart:                 false,
    					syncTransitions:           true,
    					defaultTransitionDuration: 900,
    					onSlideChange:             function(prevIndex, nextIndex) {
    						// 'this' refers to the gallery, which is an extension of $('#thumbs')
    						this.find('ul.thumbs').children()
    							.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
    							.eq(nextIndex).fadeTo('fast', 1.0);
    					},
    					onPageTransitionOut:       function(callback) {
    						this.fadeTo('fast', 0.0, callback);
    					},
    					onPageTransitionIn:        function() {
    						this.fadeTo('fast', 1.0);
    					}
    				});
    			});
    		</script>
    </body>
    </html>
    CSS
    Code:
    html{
    	background-color:#000000;
    }
    p{
    	padding: 5px 0px 10px 0px;
    	line-height:20px;	
    }
    body{
    	font-family:Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	color: #333333;
    	
    }
    a{
    	font-size: 12px;
    	color: #333333;
    	text-decoration: none;
    }
    a:hover {
    }
    
    h1 { background-image:url(../images/logo.png); width:246px; height:78px; overflow:hidden; text-indent:-600px; color:#FFFFFF; position:absolute; top:30px; left:28px; }
    
    #slider{	
    	position: relative;
    top: 0;
    left: 0;
    	z-index:1;
    }
    #doc{
    	width:960px;
    	color: #333;
    	position: absolute;
    top: 0;
    left: 50%;
    margin: 0 0 0 -475px;
    z-index: 2;
    
    }
    
    
    /* HEADER */
    #hd{ height:560px; position: relative; background-image:url(../images/header-bg.png); background-repeat:no-repeat; z-index:1; }
    #hd ul{ position:absolute; top:78px; right:28px; }
    #hd li{	display:inline; color:#FFFFFF; padding-left:26px; }
    #hd li a{ color:#FFFFFF; }
    #hd span { position:absolute; top:20px; right: 28px; color:#FFFFFF; font-size:10px; }
    #hd span a{ font-size:10px; color:#FFFFFF; }
    #hd h2 { font-family:Georgia, "Times New Roman", Times, serif; text-transform:uppercase; font-size:36px; position:absolute; top:400px; left:0px; color:#FFFFFF; font-weight:normal; }
    #hd h2 strong { font-weight:bold; }
    /* END HEADER */
    
    /*  TABS  */
    #tabs ul{ padding: 5px 0px 10px 0px; border-bottom:groove 3px #9a9a9a; } 
    #tabs li{ display:inline; font-family:Georgia, "Times New Roman", Times, serif; padding:10px 18px 10px 18px; border-right:groove 3px #9a9a9a; }
    #tabs li a{ color:#9a9a9a; font-size:18px; }
    #tabs .selected{ color:#25aae1; }
    /* END TABS */
    #bd{  }
    
    .yui-g h2{ 
    font-size:24px; }
    .yui-b { background-color:#CCCCCC; -moz-border-radius: 8px 8px 0px 0px; }
    #ft{
    	}
    #ft p{
    	position:absolute; right:30px; font-size:10px; color:#cccccc; 
    }
    .yui-g{
    	padding:0px;
    }
    .topcontent { background-color:#FF0000; }
    #leftcolumn{
    	width:600px;
    }
    #leftcolumn h2{
    	font-size:24px;
    	margin-bottom:10px;
    }
    #rightcol{
    	width:274px;
    	position:relative;
    }
    
    
    div.slideshow-container {
    	clear: both;
    	height: 556px; /* This should be set to be at least the height of the largest image in the slideshow */
    }
    div.loader {
    	position: absolute;
    	top: 0;
    	left: 0;
    	background-image: url('loader.gif');
    	background-repeat: no-repeat;
    	background-position: center;
    	width: 1280px;
    	height: 556px; /* This should be set to be at least the height of the largest image in the slideshow */
    }
    div.slideshow {
    	border:none;
    	margin:0px;
    	padding:0px;
    }
    div.slideshow span.image-wrapper {
    	display: block;
    	position: absolute;
    	top: 0;
    	left: 0;
    	border:none;
    }
    ul.thumbs {
    	clear: both;
    	margin: 0;
    	padding: 0;
    	position:absolute;
    	top:200px;
    	right:300px;
    	z-index:2;
    }
    ul.thumbs li {
    	float: left;
    	padding: 0;
    	margin: 5px 10px 5px 0;
    	list-style: none;
    	z-index:2;
    }
    a.thumb {
    	padding: 2px;
    	display: block;
    }
    ul.thumbs li.selected a.thumb {
    	background: #000;
    }
    a.thumb:focus {
    	outline: none;
    }
    ul.thumbs img {
    	border: none;
    	display: block;
    }
    div.pagination {
    	clear: both;
    }
    div.navigation div.top {
    	margin-bottom: 12px;
    	height: 11px;
    }
    div.navigation div.bottom {
    	margin-top: 12px;
    }

  • #2
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    please help???

  • #3
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    HELP???! please

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Sorry I'm not seeing a gap and I'm not seeing three small squares like you are saying. Perhaps if you are more specific and descriptive in what your issues are. Maybe take a screen shot of it and upload here.

  • #5
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    ok, there are more than 3 squares now but there is still a 10px or so gap at the very top! I am viewing in FireFox on Mac

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jarv,
    I see the 11 small squares in the upper right that are the slide indicators for your slide show.
    They are in your absolutely positioned ul.thumbs

    I'm not seeing the 3 boxes you describe.

    Not seeing any gap at the top either.

    Is http://www.jbiddulph.com/fab/ your most current version?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Excavator View Post
    Hello jarv,
    I see the 11 small squares in the upper right that are the slide indicators for your slide show.
    They are in your absolutely positioned ul.thumbs

    I'm not seeing the 3 boxes you describe.

    Not seeing any gap at the top either.

    Is http://www.jbiddulph.com/fab/ your most current version?
    Thats exactly how I've been seeing it. 11 squares with NO space above your page whatsoever in IE8 and FF 3.6.

    Again, take a screenshot of what you are seeing and post it.

    Also as Excavator said, make sure you are viewing the most recent version of this page. Refresh your browser and upload the lastest file to your server.

  • #8
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Exclamation



    here is a screenie from my Mac Firefox 3.6.2 and is the same in Chrome!

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Your description was not very clear. I see more than 3 clickable because i'm a different resolution than you and your ul moves relative to something other than your slideshow.
    Like I said though, your boxes are in an absolute positioned ul. If they are unclickable, you just have the wrong z-index on them. They your layers are stacked now, the ul is under #hd.

    Try this instead -
    Code:
    ul.thumbs {
    	clear: both;
    	margin: 0;
    	padding: 0;
    	position:absolute;
    	top:140px;
    	right:200px;
    	z-index:10;
    }
    Still no gap at the top here. Usually that is a top margin on body but who knows what a mac sees. Try adding this bit in red -
    Code:
    html{color:#000;background:#FFF;margin:0;}body,div,dl,dt,dd
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    yay thanks! sorted the clickable squares!

    still a gap at the top though! oh well

    thanks for your help!

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Even when you set margin:0; on html? I ask because your reset is only directed at body - it left html out and like I said, I don't know that mac might need that.

    There is no gap at the top in FF4 or IE8
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •