Banner on galleries page not right anymore

[R.Leonardo]

Can someone give me a hand here please?
I was up way too late last night poking about in my code trying to do something (place background image), as it turns out, somehow my banner on my galleries page is now centered / not stretching as like the other pages. On my browser, it is 100px in on left and right.
Any help would be appreciated.

Thanks,

Robert

[R.Leonardo]

*Bump*

[Allen]

Can someone give me a hand here please?
I was up way too late last night poking about in my code trying to do something (place background image), as it turns out, somehow my banner on my galleries page is now centered / not stretching as like the other pages. On my browser, it is 100px in on left and right.
Any help would be appreciated.

Thanks,

Robert
It stretches sided by side on every page here using Firefox, get it fixed?

[R.Leonardo]

Huh, I am getting something different in Google Chrome. Just that page. I have cleared cookies etc. and it is still showing as such. I just checked from work (using FireFox), and it is as you report.
Man I have had repeated issues with browsers not showing consistently how I want my site to look. Makes it tough to know what the end result really is!

Thanks for letting me know Allen!

[R.Leonardo]

Okay, I am at my wits end on this one! :twitch

I have been using Chrome mainly, and by preference, but I am having trouble with the stretch and page image consistency among browsers. I am not even sure how to phrase that better! Losing my perspicacity in communication too!

In Chrome, I get the desired amount of thumbnails horizontally across, on one row (up to 7), but the banner is not stretching to the edges any longer (as per original post). See here,

Chrome:
http://robart.smugmug.com/photos/485654931_LakGg-M.jpg




In FireFox and IE, I get the right banner stretch, but the thumbnails are only 2 across, see here,

FireFox:
http://robart.smugmug.com/photos/485654946_BMSt6-M-1.jpg


IE:
http://robart.smugmug.com/photos/485654964_PNyze-M-1.jpg



I have tried to communicate this for help prior on a couple of threads, but never able to get properly ask the questions, or get my issues across effectively!:cry

What I would like (if possible) is the banner to look as it does in FF and IE with all browsers, and the thumbs orientation as per how Chrome displays, across all browsers.


I am assuming I am missing something in my code, but am now cross eyed in frustration, and still steeped in ignorance.

Help please!

[R.Leonardo]

*bump*

[jfriend]

Okay, I am at my wits end on this one! :twitch

I have been using Chrome mainly, and by preference, but I am having trouble with the stretch and page image consistency among browsers. I am not even sure how to phrase that better! Losing my perspicacity in communication too!

In Chrome, I get the desired amount of thumbnails horizontally across, on one row (up to 7), but the banner is not stretching to the edges any longer (as per original post). !

To get good cross browser compatibility, there are much better ways to lay out the HTML/CSS for your header area. You basically NEVER want to rely on browser stretching of images for anything. What I would suggest for your layout is that you have a container div around your banner that naturally goes full width and has a white background. Then, put 180x390 version of just the left portion of your banner inside that. You currently have a 1280 px wide banner that you are trying to stretch full screen. This is not a good approach. Here's what I would suggest:

Change the banner part of your custom header to this:
<div id="my_banner_wrapper">
<div id="my_banner">
<a href="http://robart.smugmug.com"><img src="/img/spacer.gif" border="0" width="390" height="180"></a>
</div>
</div>


Then, change your banner CSS to this:

#my_banner_wrapper {
height: 180px;
background-color: #ffffff;
}

#my_banner {
height: 180px;
width: 390px;
background: url(http://robart.smugmug.com/photos/458119042_ibFsa-O-0.jpg) no-repeat;
}

Then, chop your banner image down to just 180x390 and put that new URL into your banner CSS.

At this point, you will have a 180px high DIV filled with white that spans across the top of your screen. You will then have a clickable banner image at the left edge of that. No reliance on a browser stretching any images.

[R.Leonardo]

:thumb Thank you SO much! :thumb

The banner is all good now!



Anyone care to take a stab at the thumbs layout? Again, what I see in Chrome, is what I was wanting for all browsers.

[jfriend]

:thumb Thank you SO much! :thumb

The banner is all good now!



Anyone care to take a stab at the thumbs layout? Again, what I see in Chrome, is what I was wanting for all browsers. First, you might want to fix your slideshow so that it works in IE. Delete the extra comma in red below from your slideshow definition in your bio:

var ssConfig = {
AlbumID: '6988963',
newWindow: 'false',
transparent: 'true',
showLogo: 'false',
clickUrl: 'http://www.robart.smugmug.com',
showThumbs: 'false',
showButtons: 'false',
crossFadeSpeed: '300',};

SM.flash.insertSlideshow(595, 500, ssConfig, 'transparent');

[jfriend]

First, you might want to fix your slideshow so that it works in IE. Delete the extra comma in red below from your slideshow definition in your bio:

Then, remove this from your CSS because it is does not belong here and is causing errors and preventing the category layout you want:

/* =====What the heck is this?========== */

YE.onContentReady('breadCrumbTrail', function() {this.innerHTML =
this.innerHTML.replace(RobArt', ' ')});
}

[R.Leonardo]

Wow, :bow
thank you again!

[meatloaf]

I had my banner up for years and yesterday i uploaded a new banner. I replaced the link in CSS with the new banner location and now the new one does not appear. I tried to put back the original banner link andthat doesnt appear either. Any ideas?

Also while i have you - I used to use the BZT and all that code is still in the customization boxes. Since i dont use that anymore (i only use the automatic version), can all that code be deleted?

Peace.

[jfriend]

I had my banner up for years and yesterday i uploaded a new banner. I replaced the link in CSS with the new banner location and now the new one does not appear. I tried to put back the original banner link andthat doesnt appear either. Any ideas?

Also while i have you - I used to use the BZT and all that code is still in the customization boxes. Since i dont use that anymore (i only use the automatic version), can all that code be deleted?

Peace.

CSS is a programming language. It requires perfect syntax in order to work consistently (computers are dumb that way).

You were missing the closing paren at the end of the URL:

#my_banner {
width: 801px;
height: 100px;
margin: 0 auto;
background: url(http://trphotography.smugmug.com/photos/507891953_scoKX-L.gif) no-repeat;
}


In the future, it's better to start a new thread for your new issue rather than post in a thread that is a month old and isn't related to your issue.