Annoying layout problem

Ive got a problem where im working and previewing my little project site on my PC and the layout of my picture page seems fine

I decided to see what it looks like on my laptop and theres a horrible border down the right hand side of the thumbnails :nono:

Im guessing its something to do with it being widescreen but how do i fix it so it displays the same on everything?

Thanks

I REALLY appreciate the help, i really do. This is the best answer I have had EVER in regards to this subject. it’s just not working!! I will now give you what I did and some codes I have and see if someone can figure out what I’m doing wrong all this time!!

I downloaded fancybox and put all the files in my website folder.
The top of my photos page looks like this:

<!DOCTYPE html PUBLIC "-//WC3//DTD XHTML 1.0 Strict//EN"
     "http://w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">      
     <head>
          <title>photos</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<meta http-equiv="Content-Type"
               content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
     </head>
<div id="header">
<div id="sitebranding">....

my jquery fancybox pack looks like this:

$(document).ready(function() {
	
	$("a.grouped_elements").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	700, 
		'speedOut'		:	300, 
		'overlayShow'	:	true,
		'overlayColor'	:	'#000',
		'overlayOpacity':	0.4,
		'padding'		:	5,
		'opacity'		:	true,
		'changeFade'	:	'fast',
	});
	
});

 $(document).ready(function() {
	
	$("a.grouped_elements_right").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	700, 
		'speedOut'		:	300, 
		'overlayShow'	:	true,
		'overlayColor'	:	'#000',
		'overlayOpacity':	0.4,
		'padding'		:	5,
		'opacity'		:	true,
		'changeFade'	:	'fast',
	});
	
});de",speedIn:300,speedOut:300,changeSpeed:300,changeFade:"fast",
easingIn:"swing",easingOut:"swing",showCloseButton:true,showNavArrows:true,enableEscapeButton:true,onStart:null,onCancel:null,onComplete:null,onCleanup:null,onClosed:null};b(document).ready(function(){aa()})})(jQuery);

I put one of my photos in the code you gave me. it looks like this:

...<a class="grouped_elements" rel="group1" href="Europe 2010!! 001.jpg"><img src="thumb/Europe 2010!! 001.png"alt="me at the airport"/></a>
<a class="grouped_elements" rel="group1" href="images/0004b.jpg"><img src="images/0004s.jpg" alt="Heat 6 Prostock Stafford TORC 2009"/></a>...

The rest of my pictures (thumbnails were made using TGG thumbnail converter @ http://www.bullion-investor.com/freeware/tgg
and they look like this:

......<tr><td><a href='Europe 2010!! 019.jpg'><img src='thumb/Europe 2010!! 019.png' alt='pic'></img></a></td><td><a href='Europe 2010!! 020.jpg'><img 

src='thumb/Europe 2010!! 020.png' alt='pic'></img></a></td><td><a href='Europe 2010!! 021.jpg'><img src='thumb/Europe 2010!! 021.png' 

alt='pic'></img></a></td><td><a href='Europe 2010!! 022.jpg'><img src='thumb/Europe 2010!! 022.png' alt='pic'></img></a></td><td><a href='Europe 2010!! 

023.jpg'><img src='thumb/Europe 2010!! 023.png' alt='pic'></img></a></td></tr>
<tr><td><a href='Europe 2010!! 024.jpg'><img src='thumb/Europe 2010!! 024.png' alt='pic'></img></a></td><td><a href='Europe 2010!! 025.jpg'><img 

src='thumb/Europe 2010!! 025.png' alt='pic'></img></a></td><td><a href='Europe 2010!! 026.jpg'><img src='thumb/Europe 2010!! 026.png' 

alt='pic'></img></a></td><td><a href='Europe 2010!! 027.jpg'><img src='thumb/Europe 2010!! 027.png' alt='pic'></img></a></td><td><a href='Europe 2010!! 

028.jpg'><img src='thumb/Europe 2010!! 028.png' alt='pic'></img></a></td></tr>
<tr><td><a href='Europe 2010!! 032.jpg'><img src='thumb/Europe 2010!! 032.png' alt='pic'></img></a></td><td><a href='Europe 2010!! 033.jpg'><img 

src='thumb/Europe 2010!! 033.png' alt='pic'></img></a></td><td><a href='Europe 2010!! 034.jpg'><img src='thumb/Europe 2010!! 034.png' 

alt='pic'></img></a></td><td><a href='Europe 2010!! 035.jpg'><img src='thumb/Europe 2010!! 035.png' alt='pic'></img></a></td><td><a href='Europe 2010!! 

036.jpg'><img src='thumb/Europe 2010!! 036.png' alt='pic'></img></a></td></tr>
<tr><td><a href='Europe 2010!! 038.jpg'><img src='thumb/Europe 2010!! 038.....

So what am I doing wrong? THANK YOU SO MUCH FOR TRYING TO HELP!!! :smiley:

You need to put the fancybox files in your sites directory. Then in the <head> of the page you have to link it to those files.

http://fancybox.net/howto

Turns out someone had zoomed the view to 125% on the laptop :rolleyes:

I looked at it in IE and FF, on my laptop (widescreen) and it looks just fine.

The same version of IE?

Please help! I have absolutely 0 experience with jquery! :confused: I am pretty sure I can figure this out… except for these 2 questions:

  1. What is the site directory? The page my photo gallery is on?

  2. How do I link the fancybox files into my homepage? with the

<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

or the

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />

or neither?
i looked at the page you gave me but I don’t really understand how to set this up! I really need this photo gallery! please help! :frowning:

Ok ill tell you how i did it but im no expert :rofl:

The very first folder that contains all the content of your site, upload the whole fancybox folder that you have downloaded to it.

This is what i have in my <head> of my pictures page regarding fancybox…

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>

</head>


This is the html for the thumbnails and links to the bigger pictures…



<a class="grouped_elements" rel="group1" href="images/0005b.jpg"><img src="images/0005s.jpg" alt="Watching Tokyo Drift live at Stafford ;)"/></a>
<a class="grouped_elements" rel="group1" href="images/0004b.jpg"><img src="images/0004s.jpg" alt="Heat 6 Prostock Stafford TORC 2009"/></a>
<a class="grouped_elements" rel="group1" href="images/0003b.jpg"><img src="images/0003s.jpg" alt="My Schumacher Mi3"/></a>
<a class="grouped_elements" rel="group1" href="images/0002b.jpg"><img src="images/0002s.jpg" alt="Me &amp; Russell Wynn-Smith at Broxtowe TORC 2009"/></a>
<a class="grouped_elements_right" rel="group1" href="images/0001b.jpg"><img src="images/0001s.jpg" alt="My awesome touring car rocking the C final... ouch :|"/></a>


This is the code i put into the file ‘jquery.fancybox-1.3.1.pack.js’ (my own personal preferences for how i wanted it to act)…

$(document).ready(function() {
	
	$("a.grouped_elements").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	700, 
		'speedOut'		:	300, 
		'overlayShow'	:	true,
		'overlayColor'	:	'#000',
		'overlayOpacity':	0.4,
		'padding'		:	5,
		'opacity'		:	true,
		'changeFade'	:	'fast',
	});
	
});

 $(document).ready(function() {
	
	$("a.grouped_elements_right").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	700, 
		'speedOut'		:	300, 
		'overlayShow'	:	true,
		'overlayColor'	:	'#000',
		'overlayOpacity':	0.4,
		'padding'		:	5,
		'opacity'		:	true,
		'changeFade'	:	'fast',
	});
	
});

I hope thats of some help mate :slight_smile:

Thanks, was drivin me nuts :headbang: Bit crazy that when you set IE back to default settings that it doesnt put the view back:nono:

http://fancybox.net/

If you get stuck check out his forum on Google, hes very helpful :slight_smile:

how you deciding the right margin of the thumbnail table/div?

No :slight_smile:
Without seeing the site and the code, I was just guessing what might cause a different view on two machines with the same browser. I have no idea…

Its in pixels, should i change it to %?

Hey guys! I’m just a beginner and I want to make a photo gallery for my photos just like mixtapesuk has on his screen shot on the 1st post! maybe you can tell me how you did it? If you could that would be wonderful!! thanks!:smiley: Oh also, exactly like that, but with captions for each of the photos!

Sorry for bothering you! But you need to be a member of the fancybox forums to post stuff and I thought since I was already a member of this…anyway, I tried another jQuery called Slimbox and it was pretty much the same I think but I had no idea how to run it! So, I wanted to try this becasue I have to get a gallery in my website. Anyway, upon download of Fancybox, do you have to put the files they give you directly into your HTML or save them all in a folder (which is what the person helping me on slimbox told me to do). If you do the latter, what kind of link do you put in your HTML to these files? Also, I have a lot of image files like “fancy_shadow_se and fancy_loading”. Do I need these? I’m guessing I do but where do I put them? I’m asking such easy questions so it shouldn’t be much work to answer them, eh? :wink:

:lol:
This kind of thing can drive a person crazy. I’m glad you found it.

Is the width of that dark grey box fixed, or is it a percentage?

I just put Firefox onto the laptop and the layout is perfect so it must be something crazy with internet explorer but ive no idea what :shifty:. I reset it back to default settings and its still the same :confused:.

Even the rollover images jump slightly on mouseover and they dont on laptops of the same size.

Is no one else getting the big border on the right?

http://www.ritch.pwp.blueyonder.co.uk/pictures.html


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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>&amp;&amp;&amp;&amp; - pictures</title>
<link href="proj.css" rel="stylesheet" type="text/css" />

<style type="text/css"> 
#fancybox-outer {background: #000;} 
</style>

</head>

<body>

<div id="wrapper">
<div id="headerimage"><a class="pictures" title="pictures" href="pictures.html"></a></div>
<a class="logoroll" title="&amp;&amp;&amp;&amp;" href="index.html"></a>
<div id="main">
<div id="sidebar">

<ul>
<li><h1><a href="gmracing.html" title="GM Racing">GM RACING</a></h1></li>
<li><h1><a href="hobbywing.html" title="Hobbywing">HOBBYWING</a></h1></li>
<li><h1><a href="speedpassion.html" title="Speed Passion">SPEED PASSION</a></h1></li>
<li><h1><a href="teamwave.html" title="Team Wave">TEAM WAVE</a></h1></li>
<li><h1><a href="tekin.html" title="Tekin">TEKIN</a></h1></li>
<li><h1><a href="contact.html" title="Contact">CONTACT</a></h1></li>
</ul>

<div id="content">

<h1>Happy snaps!</h1>
  <hr />
  <a class="date">Updated: 17:58 Friday 20th August 2010</a>
  <p>Please click an image to enlarge. You can scroll through the gallery by using your mouse wheel or by clicking the arrows at the left and right hand sides.</p>

<a class="grouped_elements" rel="group1" href="images/0030b.jpg"><img src="images/0030s.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="images/0029b.jpg"><img src="images/0029s.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="images/0028b.jpg"><img src="images/0028s.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="images/0027b.jpg"><img src="images/0027s.jpg" alt=""/></a>
<a class="grouped_elements_right" rel="group1" href="images/0026b.jpg"><img src="images/0026s.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="images/0025b.jpg"><img src="images/0025s.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="images/0024b.jpg"><img src="images/0024s.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="images/0023b.jpg"><img src="images/0023s.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="images/0022b.jpg"><img src="images/0022s.jpg" alt=""/></a>
<a class="grouped_elements_right" rel="group1" href="images/0021b.jpg"><img src="images/0021s.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="images/0020b.jpg"><img src="images/0020s.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="images/0019b.jpg"><img src="images/0019s.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="images/0018b.jpg"><img src="images/0018s.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="images/0017b.jpg"><img src="images/0017s.jpg" alt=""/></a>
<a class="grouped_elements_right" rel="group1" href="images/0016b.jpg"><img src="images/0016s.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="images/0015b.jpg"><img src="images/0015s.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="images/0014b.jpg"><img src="images/0014s.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="images/0013b.jpg"><img src="images/0013s.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="images/0012b.jpg"><img src="images/0012s.jpg" alt=""/></a>
<a class="grouped_elements_right" rel="group1" href="images/0011b.jpg"><img src="images/0011s.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="images/0010b.jpg"><img src="images/0010s.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="images/0009b.jpg"><img src="images/0009s.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="images/0008b.jpg"><img src="images/0008s.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="images/0007b.jpg"><img src="images/0007s.jpg" alt="My 416X"/></a>
<a class="grouped_elements_right" rel="group1" href="images/0006b.jpg"><img src="images/0006s.jpg" alt="Nick Priest &amp; the worlds smallest TV"/></a>
<a class="grouped_elements" rel="group1" href="images/0005b.jpg"><img src="images/0005s.jpg" alt="Watching Tokyo Drift live at Stafford ;)"/></a>
<a class="grouped_elements" rel="group1" href="images/0004b.jpg"><img src="images/0004s.jpg" alt="Heat 6 Prostock Stafford TORC 2009"/></a>
<a class="grouped_elements" rel="group1" href="images/0003b.jpg"><img src="images/0003s.jpg" alt="My Schumacher Mi3"/></a>
<a class="grouped_elements" rel="group1" href="images/0002b.jpg"><img src="images/0002s.jpg" alt="Me &amp; Russell Wynn-Smith at Broxtowe TORC 2009"/></a>
<a class="grouped_elements_right" rel="group1" href="images/0001b.jpg"><img src="images/0001s.jpg" alt="My awesome touring car rocking the C final... ouch :|"/></a>

</div>
</div>
</div>
</div>

</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

p {
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#CCC;
}

h1 {
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:18px;
}

hr {
    background-color:#FFF;
    height:1px;
    border:none;
    margin-bottom:3px;
}

a:link, a:visited {
    color:#CF0;
    text-decoration: none;
}

a:hover {
    color:#FFF;
}

a:active {
    color:#FFF;
}

img {  
    border-style: none;
}

body {
    margin: 0;
    padding: 0;
    background-color:#bab9b1;
    background-image:url(images/background.gif);
    background-repeat:repeat-x;
}

#wrapper {
    margin:auto;
    padding:0px;
    width:600px;
    margin-top:20px;
    margin-bottom:5px;
}

#main {
    width: 100&#37;;
    position:relative;
}

#headerimage {
    background-color:#333;
    float:right;
    width:470px;
    height:124px;
}

#content {
    position:absolute;
    top:0;
    right:0;
    width:460px;
    background-color:#333;
    height:600px;
    padding-left:5px;
    padding-right:5px;
    margin:0;
    border:0;
}

#sidebar {
    width: 125px;
    padding:0;
    margin-top:5px;
    border:0;
}

#sidebar ul {
    list-style:none;
    padding:0;
    margin:0;
    text-align:center;
}

#sidebar li a{
    background-color:#333;
    height: 35px;
    display:block;
    text-decoration: none;
    background-repeat:no-repeat;
}

#sidebar li h1{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    margin:0 0 5px 0;
    line-height:34px;
}

a.logoroll {   
display: block;   
width: 124px;   
height: 124px;   
background: url(images/fibre9roll.png) no-repeat 0 0;
}
  
a:hover.logoroll {
background-position: 0 -124px;   
}

a.pictures {  
display:block;
margin:73px 0 0 425px;
width: 36px;   
height: 37px;   
background: url(images/camera.png) no-repeat 0 0;
}

a:hover.pictures {
background-position: 0 -37px;   
}

#table{
    margin:0;
    border-collapse:collapse;
}

th{
    border: 1px solid black;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#FFF;
    background-color:#666;
}

td{
    border: 1px solid black;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align:center;
    background-color:#FFF;
    color:#333;
}

td a:link{
    color:#CC0000;
}

.date{
    font-family:Arial, Helvetica, sans-serif;
    font-size:9px;
    color:#FFF;
}

.grouped_elements{
    margin:0;
    border:0;
    padding:0;
}

.grouped_elements img{
    border-style:solid;
    margin-right:1px;
    margin-bottom:1px;
}

.grouped_elements_right img{
    border-style:solid;
    margin-right:0;
    padding:0;
    margin-bottom:1px;
}


Yes IE8 16385