I need a Guru's Help

[scootermcq]

I figured out that the Jquery code I was trying to use would report too many errors if the user had a slower connection, older IE or my server was slow. Obviously I don't want that, so started over. I have found code for a different (but similar) gallery, but I have run into problems.

Landscape orientation images center properly, but portrait does not and is off set to the left.

Anyone have any tips for a blundering fool?

Code as it pertains to this part of the page:

CSS for page:

#contentc
{
margin-top: 10px;
margin-bottom: 0;
margin-left: auto ;
margin-right: auto;
width: 800px;
padding: 0px;
background-color: #FFF;
color: #000;
text-align: center;
}

CSS for Gallery:

.photoslider {
}
.photoslider_nav {
position: relative;
border: white 1px;
overflow: hidden;
height: 90px;
width: 800px;
margin: auto;
}
.photoslider_thumbBar {
position: absolute;
left: 0px;
top: 0px;
display: block;
margin: 0px;
padding: 0px;
}
.photoslider_thumb {
position: relative;
border: #6D7B8D 1px;
width: 50px;
height: 50px;
float: left;
padding: 5px;
margin: 5px;
cursor: pointer;
}
.photoslider_clear {
clear: both;
}
.photoslider_main {
position: relative;
height: 600px;
padding-bottom: 5px;
}
.photoslider_main img {
position: relative;
border: solid #6D7B8D 2px; display: block; margin: auto;
}
.photoslider_caption {
font-weight: bold;
text-align: center;
}
.photoslider_control {
display: none;
text-align: center;
font-weight: bold;
padding-top: 10px;
margin: auto;
height: 30px;
width: 52px;
}
.photoslider_play, .photoslider_stop {
width: 18px;
height: 19px;
margin: auto;
padding: 3px;
cursor: pointer;
text-align: center;
border: solid #fff 1px;
float: left;
}
.photoslider_play {
background: url('/images/play_pause.gif') no-repeat 0px 0px;
}
.photoslider_stop {
background: url('/images/play_pause.gif') no-repeat -25px 0px;
}
.slideshow_disabled {
border-bottom: solid #919191 2px;
}

HTML:

*

******** type="text/**********">
$(document).ready(function(){

FOTO.Slider.baseURL = 'index_htm_files/';
FOTO.Slider.bucket = {
'default': {
0: {'thumb': 'wt1.jpg', 'main': 'w1.jpg'},
1: {'thumb': 'wt2.jpg', 'main': 'w2.jpg'},
2: {'thumb': 'wt3.jpg', 'main': 'w3.jpg'},
3: {'thumb': 'wt4.jpg', 'main': 'w4.jpg'},
Etc. Etc.
}
};


FOTO.Slider.reload('default');
FOTO.Slider.preloadImages('default');
});
***********

Any help would sure be appreciated!

[OsmosisStudios]

Here's the code im using for centering stuff with CSS.

#Container {
position:absolute;
left: 50%;
width: 1000px;
margin-left: -500px; /*set to a negative number 1/2 of your width*/
}

This is used as a div to contain the entire site, basically. So, you're pushing the div 50% of the width of the page, then backspacing it back half the pixel width of the div. It ends up centering things nicely.

[Rentham]

Originally Posted by OsmosisStudios

This is used as a div to contain the entire site, basically. So, you're pushing the div 50% of the width of the page, then backspacing it back half the pixel width of the div. It ends up centering things nicely.

Margin: Auto; does the same thing when the element has a specified width.

[scootermcq]

Originally Posted by OsmosisStudios

Here's the code im using for centering stuff with CSS.

#Container {
position:absolute;
left: 50%;
width: 1000px;
margin-left: -500px; /*set to a negative number 1/2 of your width*/
}

This is used as a div to contain the entire site, basically. So, you're pushing the div 50% of the width of the page, then backspacing it back half the pixel width of the div. It ends up centering things nicely.

Thanks Adam... I will give it a shot this evening and see if that works

[OsmosisStudios]

The other thing you could do, which is likely easier and doesnt really increase size that much, is just make your vertical shots the right size with extra blank canvas space. Only really works if you're working with a flat-colour background.

[SwissJon]

Download Firebug for Firefox. Start it then load your page. Now click on the HTML tab, abd on the right hand side, choose "Layout"

You'll then be able to click on any code elements and see how each of them effect your code visually.

I suggest you also use separate CSS for older versions of IE, and then import the code that breaks it for the newer versions. Here's a page discussing how to do that.

CSS Guides: Separate style sheet for old browsers, SSI-Developer.net

[Biomech]

I use margin: auto like Rentham :P

[OsmosisStudios]

Originally Posted by Rentham

Margin: Auto; does the same thing when the element has a specified width.

Not from experience. It's hit or miss on certain things, especially when you've got, as I do, divs within divs. Margin: Auto; tends to apply in subdivs, which isnt what I wanted. The code I showed is actually the "Container" that holds the entire site centered.

Margin: Auto; may work better for individual divs, though.

[Rentham]

Originally Posted by OsmosisStudios

Not from experience. It's hit or miss on certain things, especially when you've got, as I do, divs within divs. Margin: Auto; tends to apply in subdivs, which isnt what I wanted. The code I showed is actually the "Container" that holds the entire site centered.

Margin: Auto; may work better for individual divs, though.

It's possible you have some coding errors or specificity problems in your CSS. I've found margin: auto to be very reliable. Check out the source on this simple test.