S.O.S. Need CSS help!

[jayrob]

Okay, I've messed with this for so long that I've dug myself in to a bigger mess and wound up more confused. I am in the process of building my site, it's not open to the public yet. But I'm having one heck of a time balancing the background picture, banner, and slideshow on my main page. They are all up but I can't get them situated correctly. And they always view differently in firefox, then they do in IE. I assume most people will view the site using IE so that one will be most important, but the descrepencies are strange. Also, when changing the screen resolution the layout changes, it doesn't stay constant. I'm sure these are rookie problems but I went from thinking I had this all figured out, to having a messed up main page and being thoroughly confused on how this all works together. I tried changing the width and height "px" to a "%" because I heard IE likes that better. But bottom line is I'm not sure, and I'm not sure how the margin and header and background px or % work in conjuction. God bless the person who can shed some light on this for me...

My site is www.justtoremember.com (http://www.justtoremember.com)

and my CSS code is:

#my_banner {
width: 900px;
height: 400px;
margin: 0%;
background: url(http://JustToRemember.smugmug.com/photos/189210872-O.jpg) no-repeat;background-position: center; 30% 30%; }
#feeds {
display:none;
}
/* turn off the cart link on the minifooter */
.cartlink_footer {
display: none;
}
/* turn off the login link on the minifooter */
.loginLink {
display: none;
}
.homepage #galleryTitle {
display: none;
}
/* hides your name (including any 's) */
#userName {
display: none;
}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 2em;
color: #FFFFFF;
background-color: #000000;
}
#navcontainer ul li a:hover {
color: #FFFFFF;
background-color: #669900;
}

.homepage #featuredBox {display:none;}
.galleries #categoriesBox {display:block !important;}
.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox {
display: none;
}
.galleries #bioBox {
display: none;
}
.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}


/* hides the word home */
#userHome {
display: none;
}

#footer, #footer a {
color:#888888;
}


Body { background-image: url('http://justtoremember.com/photos/189757311-O.jpg');background-repeat: no-repeat;background-position: center; }


My Java script box:

function AddReferralCode() {
var links = this.getElementsByTagName("A");
if (links && (links.length != 0)) {
var smugLink = links.item(0);
smugLink.href = "http://www.smugmug.com/?referrer=Vu5ncuxhBZAcs";
}
}
YE.onAvailable('footer', AddReferralCode);
rightClickWarning = "All photos are property of Just To Remember Photography, LLC. All rights reserved. Unauthorized use is prohibited.";

function hasPath(sPath)
{
re = new RegExp("\/" + sPath + "(\/|$)");
return re.test(window.location)
}
function hasPath(sPath)
{
re = new RegExp("\/" + sPath + "(\/|$)");
return re.test(window.location)
}
// fix the pesky pipes
YE.onAvailable("cobrand_footer", function() {this.innerHTML = this.innerHTML.replace(/\||what are feeds\?/gi, '');});



/*=========================*/
/*== SLIDE SHOW ==*/
/*== version 0.58 ==*/
/*== Updated 15 Mar 2007 ==*/
/*=========================*/
var SLIDE_SHOW = 0;
var RANDOM_PHOTO = 1;
var slideshowContainer;
var sSlide;
var sCaption;
var ssSlides;
var ssSlideTotal;
var ssSlideTimer;
var ssOldSlide;
var ssFadeTimer;
var ssFade;
var ssTimerId;
var blank;

function PrepSlideEnvironment() {
tmpCookie = getCookie("Template");
blank = new Image();
blank.src = "/img/spacer.gif";
if (typeof(slideshowType) == "undefined" || (slideshowType != SLIDE_SHOW && slideshowType != RANDOM_PHOTO)) {
slideshowType = SLIDE_SHOW;
}
if (slideshowType == RANDOM_PHOTO) {
randomSlides = true;
}
if (typeof(slideshowContainerId) == "undefined") {
return false;
} else if (typeof(slideshowContainerId) == "string") {
slideshowContainer = YD.get(slideshowContainerId);
}
if (!slideshowContainer) {
return false;
}
if (typeof(slideshowUrl) == "undefined" || typeof(slideshowUrl) != "string") {
return false;
} else {
slideshowUrl = /(?:http:\/\/[^\/]+)?(\/\S+)/.exec(slideshowUrl)[1];
}
if (/\/gallery\/[0-9]+/.test(slideshowUrl)) {
slideSourceIsGallery = true;
} else {
slideSourceIsGallery = false;
}
if (typeof(slideHeight) == "undefined" || isNaN(slideHeight)) {
slideHeight = "450";
}
if (typeof(slideWidth) == "undefined" || isNaN(slideWidth)) {
slideWidth = "750";
}
if (typeof(photoHeight) == "undefined" || isNaN(photoHeight)) {
photoHeight = slideHeight;
}
if (typeof(photoWidth) == "undefined" || isNaN(photoWidth)) {
photoWidth = slideWidth;
}
if (typeof(slideDuration) == "undefined" || isNaN(slideDuration)) {
slideDuration = 3;
}
if (typeof(firstSlideUrl) == "undefined" || typeof(firstSlideUrl) != "string") {
firstSlideUrl = blank.src;
}
if (typeof(showSlideTransition) == "undefined" || typeof(showSlideTransition) != "boolean") {
showSlideTransition = true;
}

if (typeof(resizeToPhoto) == "undefined" || typeof(resizeToPhoto) != "boolean") {
resizeToPhoto = false;
}
if (typeof(quickStart) == "undefined" || typeof(quickStart) != "boolean") {
quickStart = true;
}
if (typeof(randomSlides) == "undefined" || typeof(randomSlides) != "boolean") {
randomSlides = false;
}
if (typeof(slideControls) == "undefined" || typeof(slideControls) != "boolean") {
slideControls = false;
}
if (typeof(slideCaptions) == "undefined" || typeof(slideCaptions) != "boolean") {
slideCaptions = false;
}
if (typeof(slidesClickable) == "undefined" || typeof(slidesClickable) != "boolean") {
slidesClickable = false;
}
return true;
}

function loadSlideshow() {
if (!PrepSlideEnvironment()) {
return false;
}
slideshowContainer.innerHTML = '<img src="http://www.smugmug.com/img/spacer.gif" alt="" id="ssSlide" height="' + slideHeight + '" width="' + slideWidth + '" style="opacity: .99; background-image: url(' + firstSlideUrl + '); background-repeat: no-repeat; background-position: center;" />';
if (slideCaptions) {
slideshowContainer.innerHTML += '<div id="ssCaption"></div>';
}
if (slideControls) {
slideshowContainer.innerHTML += '<div id="ssControl"><a title="Previous Slide" id="ssPrev" class="ssBtn" href="javascript: void(0);" onclick="prevSlide();"><img src="/img/spacer.gif" border="0" /></a><a title="Next Slide" id="ssNext" class="ssBtn" href="javascript: void(0);" onclick="nextSlide();"><img src="/img/spacer.gif" border="0" /></a><a title="Pause Slideshow" id="ssPause" class="ssBtn" href="javascript: void(0);" onclick="pauseSlideshow();"><img src="/img/spacer.gif" border="0" /></a><a title="Resume Slideshow" id="ssPlay" class="ssBtn" href="javascript: void(0);" onclick="resumeSlideshow();"><img src="/img/spacer.gif" border="0" /></a></div>';
}
sSlide = YD.get('ssSlide');
sCaption = YD.get('ssCaption');
if (slidesClickable) {
sSlide.style.cursor = 'pointer';

if (firstSlideUrl != blank.src) {
ssAddSlideClick(slideshowUrl);
}
}
ssSlides = [];
ssSlideTotal = 0;
ssSlideTimer = 0;
ssOldSlide = 0;
ssFadeTimer = 100;
ssFade = "out";
if (slideSourceIsGallery) {
ajax_query(slideshowHandler, '/photos/sspopup.mg?AlbumID=' + /\/gallery\/([0-9]+)/.exec(slideshowUrl)[1], null, true);
} else {
var postArray = [];
postArray['TemplateID'] = '8';
postArray['origin'] = slideshowUrl;
ajax_query(slideshowHandler, '/homepage/templatechange.mg', postArray, true);
}
}

function slideshowHandler(response)
{
if (!slideSourceIsGallery) {
if (tmpCookie && tmpCookie != "") {
setCookie('Template', tmpCookie, 30, '/', /(?:http[s]?:\/\/)?(?:\w+\.)?(\S+[^\/])/.exec(location.href)[1]);
} else {
deleteCookie("Template", "/", /(?:http[s]?:\/\/)?(?:\w+\.)?(\S+[^\/])/.exec(location.href)[1]);
}
}
var re = /imageID\[\d+\] = "\d+";/g;
var re2 = /width\[\d+\] = "\d+";/g;
var re3 = /height\[\d+\] = "\d+";/g;
var re4 = /caption\[\d+\] = ".*";/g;
s = response.match(re);
w = response.match(re2);
h = response.match(re3);
c = response.match(re4);
var oSlide;
for (i = 0; i < s.length; i++) {
oSlide = {};
temp = s[i].split(/"/);
oSlide.ImageId = temp[1];
oSlide.File = 'http://upload.smugmug.com/photos/toolthumbs.mg?ImageID=' + temp[1] + '&tool=slideshowXL&winHeight=' + photoHeight + '&winWidth=' + photoWidth;
oSlide.Gallery = slideshowUrl + '/1/' + oSlide.ImageId;
temp = h[i].split(/"/);
oSlide.Height = temp[1];
temp = w[i].split(/"/);
oSlide.Width = temp[1];
temp = c[i].split(/"/);
oSlide.Caption = temp[1];
oSlide.Loaded = false;

if ((oSlide.Width > photoWidth) || (oSlide.Height > photoHeight)) {
if (oSlide.Width >= oSlide.Height) {
oSlide.Height = Math.round((oSlide.Height / oSlide.Width) * photoWidth);
oSlide.Width = photoWidth;
} else {
oSlide.Width = Math.round((oSlide.Width / oSlide.Height) * photoHeight);
oSlide.Height = photoHeight;
}
}
ssSlideTotal = ssSlides.push(oSlide);
}
ssSlideTotal -= 1;
if (randomSlides) {
ssSlides.shift();
ssSlides.shuffle();
ssSlides.unshift(0);
}
if (quickStart) {
ssSlideTimer = (slideDuration * 1000);
}
ssPrepSlide(1);
window.setTimeout("ssPrepSlide(2);", 0);
window.setTimeout("ssPrepSlide(ssSlideTotal);", 0);
if (slideshowType == SLIDE_SHOW) {
ssPlaySlideshow();
} else {
ssSlideSwap(1);
}
}

function ssPauseSlideshow()
{
window.clearTimeout(ssTimerId);
ssTimerId = null;
}

function ssResumeSlideshow()
{
if (!ssTimerId) {
ssTimerId = window.setTimeout("ssPlaySlideshow()", 10);
}
}

function ssPrepSlide(prep)
{
if (ssSlides[prep].Loaded == false) {
ssSlides[prep].Image = new Image();
ssSlides[prep].Image.src = ssSlides[prep].File;
ssSlides[prep].Loaded = true;
}
}

function ssMoveSlide(i) {
ssSlideTimer = 0;
ssFadeTimer = 100;
ssTransition(ssFadeTimer);
ssFade = "out";
ssSlideSwap(i);
}

function ssPlaySlideshow()
{
if (ssSlideTimer >= (slideDuration * 1000))
{
if (ssFade == 'out') {
ssTransition(ssFadeTimer -= 10);
}

if (ssFadeTimer == 0) {
ssSlideSwap(1);
ssFade = 'in';
}

if (ssFade == 'in') {
ssTransition(ssFadeTimer += 10);
}

if (ssFadeTimer == 100) {
ssSlideTimer = 0;
ssFade = 'out';
}
} else {
ssSlideTimer += 10;
}

ssTimerId = window.setTimeout("ssPlaySlideshow()", 10);
}

function ssTransition(opacity)
{
if (showSlideTransition)
{
if (opacity != 100) {
YD.setStyle(sSlide, 'opacity', (opacity / 100));
} else {
YD.setStyle(sSlide, 'opacity', '.99'); // to prevent flashing in mozilla browsers
}

// only affects Win IE
YD.setStyle(sSlide, 'filter', 'alpha(opacity=' + opacity + ')');
if (sCaption) {
YD.setStyle(sCaption, 'opacity', sSlide.style.opacity);
YD.setStyle(sCaption, 'filter', sSlide.style.filter);
}
}
}

function ssSlideSwap(i)
{
var newSlide = ssOldSlide + i;

if (newSlide > ssSlideTotal)
newSlide = 1;

if (newSlide < 1)
newSlide = ssSlideTotal;

if (ssSlides[newSlide].Loaded != false)
{
document.images['ssSlide'].src = blank.src;
YD.setStyle(sSlide, 'backgroundImage', 'url(' + ssSlides[newSlide].File + ')');
if (resizeToPhoto)
{
document.images['ssSlide'].height = ssSlides[newSlide].Height;
document.images['ssSlide'].width = ssSlides[newSlide].Width;
}
if (slidesClickable) {
ssAddSlideClick(ssSlides[newSlide].Gallery);
}

if (slideCaptions) {
YD.get('ssCaption').innerHTML = ssSlides[newSlide].Caption;
}
ssPrepSlide(newSlide < ssSlideTotal ? newSlide + i : 1);
ssOldSlide = newSlide;
} else {
ssPrepSlide(newSlide);
ssSlideSwap(i);
}
}

function ssAddSlideClick(sUrl) {
YE.purgeElement(sSlide, false, 'click');
YE.addListener(sSlide, 'click', function() {
location.href = sUrl;
})
}

Array.prototype.shuffle = function()
{
var len = this.length;
var rand, temp, i;
for (i = 0; i < len; i++)
{
rand = Math.floor(Math.random()*len);
temp = this[i];
this[i] = this[rand];
this[rand] = temp;
}
}

function pauseSlideshow()
{
YD.setStyle('ssPause', 'display', 'none');
YD.setStyle('ssPlay', 'display', 'inline');
ssPauseSlideshow();
}

function resumeSlideshow()
{
YD.setStyle('ssPause', 'display', 'inline');
YD.setStyle('ssPlay', 'display', 'none');
ssResumeSlideshow();
}

function prevSlide()
{
pauseSlideshow();
ssMoveSlide(-1);
}

function nextSlide()
{
pauseSlideshow();
ssMoveSlide(1);
}

function getCookie(name) {
var start = document.cookie.indexOf(name + "=");
var len = start + name.length + 1;

if ((!start) && (name != document.cookie.substring(0, name.length))) {
return null;
}
if (start == -1) {
return null;
}
var end = document.cookie.indexOf(";", len);
if (end == -1) {
end = document.cookie.length;
}
return unescape(document.cookie.substring(len, end));
}

function setCookie(name, value, expires, path, domain, secure) {
var today = new Date();
today.setTime( today.getTime() );
if (expires) {
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date(today.getTime() + (expires));
document.cookie = name + '='+escape(value) +
((expires) ? ';expires=' + expires_date.toGMTString() : '') +
((path) ? ';path=' + path : '') +
((domain) ? ';domain=' + domain : '') +
((secure) ? ';secure' : '');
}

function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie = name + "=" + ((path) ? ";path=" + path : "") + ((domain) ? ";domain=" + domain : "") + ";expires=Thu, 01-Jan-1970 00:00:01 GMT";
}
}


My Header box:

<div align="center">

<div id="my_banner"><a href="<A href="http://justtoremember.com"><img">http://justtoremember.com"><img src="/img/spacer.gif" width="100" height="200" border="0" /></a></div>

<div id="navcontainer">
<ul>
<li><a href="<A href="http://justtoremember.com">Home</a></li">http://justtoremember.com">Home</a></li>
<li><a href="<A href="http://justtoremember.com/gallery/3347056">About">http://justtoremember.com/gallery/3347056">About Me</a></li>
<li><a href="<A href="http://justtoremember.com/galleries">Galleries</a></li">http://justtoremember.com/galleries">Galleries</a></li>
<li><a href="<A href="http://justtoremember.com/gallery/3347352">Popular</a></li">http://justtoremember.com/gallery/3347352">Popular</a></li>
</ul>
</div>

[ivar]

Okay, I've messed with this for so long that I've dug myself in to a bigger mess and wound up more confused. I am in the process of building my site, it's not open to the public yet. But I'm having one heck of a time balancing the background picture, banner, and slideshow on my main page. They are all up but I can't get them situated correctly. And they always view differently in firefox, then they do in IE. I assume most people will view the site using IE so that one will be most important, but the descrepencies are strange. Also, when changing the screen resolution the layout changes, it doesn't stay constant. I'm sure these are rookie problems but I went from thinking I had this all figured out, to having a messed up main page and being thoroughly confused on how this all works together. I tried changing the width and height "px" to a "%" because I heard IE likes that better. But bottom line is I'm not sure, and I'm not sure how the margin and header and background px or % work in conjuction. God bless the person who can shed some light on this for me...
Hi Jayrob :wave

Using %, px, pt, em, etc. are different things. IE doesn't like one better than the other, as they are all totally different tools.

Also, '0' doesn't need a unit. 0px == 0% == 0em == 0pt == 0cm == 0in == 0pc. It is all nothing :D

What do you want your site to look like? Where do you want the things located? Do you have a mockup that you can show us by any chance?
It is hard to say what the code should be, if we don't know what your pages should look like in the end.

Let us know if you have any questions!

PS, I've put your code in boxes so your post was a little more readable.

[jayrob]

Thank you Ivar! I am still playing with exactly what I'll have the site look like, but I thought if I understood what exactly did what, I wouldn't have to come to the forum to have it fixed everytime, but would know how to do it myself. However, I've attached a jpeg of something I may choose. A big problem I have is that the banner and background shift location depending what resolution I looked at it with. Is there a way to lock it so it will all be placed the same regardless of screen resolution? Also the difference between the way it was viewed on IE and Firefox was weird. I've heard this problem in other forums, but not sure what the issue is in my case. I know 0 doesn't equal anything in any language :D . I tried changing the numbered values though. So if it does matter if they're px, or % etc. then I know I've got some of those values messed up because I have changed them back and forth. Strangely enough, it moves stuff around regardless of whether it's % or px, but was unpredictable in what did what. I was able to go through and Center everything, which helped with a portion of my problem, but I'm still left with a bit of a mess, and want a better understanding for how all of this works together so I can make a seamless site and hopefull help others down the road...a ways down the road it looks like. :huh

Thanks again, this forum has been so helpful!
Jason

[Allen]

Thank you Ivar! I am still playing with exactly what I'll have the site look like, but I thought if I understood what exactly did what, I wouldn't have to come to the forum to have it fixed everytime, but would know how to do it myself. However, I've attached a jpeg of something I may choose. A big problem I have is that the banner and background shift location depending what resolution I looked at it with. Is there a way to lock it so it will all be placed the same regardless of screen resolution? Also the difference between the way it was viewed on IE and Firefox was weird. I've heard this problem in other forums, but not sure what the issue is in my case. I know 0 doesn't equal anything in any language :D . I tried changing the numbered values though. So if it does matter if they're px, or % etc. then I know I've got some of those values messed up because I have changed them back and forth. Strangely enough, it moves stuff around regardless of whether it's % or px, but was unpredictable in what did what. I was able to go through and Center everything, which helped with a portion of my problem, but I'm still left with a bit of a mess, and want a better understanding for how all of this works together so I can make a seamless site and hopefull help others down the road...a ways down the road it looks like. :huh

Thanks again, this forum has been so helpful!
Jason
Rather then forcing any item to center I've found it better if you centered it
using margin: 0 auto; in the CSS then apply margin-left or margin-right to
tweak if needed. This should work for the background, banner and nav, they
all move together then relative to the center of the view.

[jayrob]

Can anyone help me with this?

[Mike Lane]

So I'm curious, why does your background on the page look different than your markup? http://justtoremember.com/photos/189757311-O.jpg Also why did you add so much black space below it?

I'm not sure what you're trying to do with the red here:

#my_banner {
width: 900px;
height: 400px;
margin: 0 auto;
background: url(http://JustToRemember.smugmug.com/photos/189046881-O.jpg) no-repeat;background-position: center; 30% 30%; }

Also I'm not sure why you have your banner set to be 900px by 400px. That is the biggest problem with your page layout afaict.

[DeeRich]

Can anyone help me with this?

Jayrob, I am not qualified to answer your questions, but I notice that on your site in the "about me" link, you typed "how much can I write here....." (or something like that). I read somwhere that a (SmugMug) Caption area will hold 63,000 CHARACTERS. If you divide this by 5, you get the approximate number of words, which would be 12,600. That's a LOT of text.

Good luck!

DeeRich