Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Photo gallery problems

Status
Not open for further replies.

poporacer

Programmer
Oct 2, 2007
53
US
I am a newbie to CSS but have a solid background in other languages. Here is my attempt so far...I got pretty far but I am running accross a couple of issues and hopefully I (you) can get them resolved (with all the wisdom there is on this board!!!).

Issue #1 Is it possible to put the thumbnail images in a separate div (framecontentRight) and have that section able to scroll but the remainder of the page to stay stationary?

Issue #2 It looks like I have some compatability issues. When this page is viewed in IE 6.0 and 7.0.6 the background image in the #content div does not show up. When viewed in Firefox 3.0.5 the thumbnail images don't show up.

Issue #3 I cant figure out where I need to change the background color for the DIVs. I want all the background to be black but the few places I was able to change the background it covered everyting else. ie. the thumbnails were no longer vivible and able to be selected.I have heard of layers but is that like Photoshop and I need to set the layer level? If so, How??? The background will need to be changed in the DIV for Content and the div behind??? also the background for the images when they pop up.

Now I am so close...I will am sure I will have a few more questions and I am sure I will have to manipulate the images in sizing and resolution to decrease the file size.


THANKS so much for all your help!
 
I suspect your thumbnails are not showing up in Fx because you are not escaping the brackets in the filename, and so it is getting confused as to where the background url CSS property ends. So perhaps change this:

Code:
#container a.slidee {background:url(thumbnails/tattoo[!]([/!]5[!])[/!].jpg); height:60px; width:93px;}

to this:

Code:
#container a.slidee {background:url(thumbnails/tattoo[!]%28[/!]5[!]%29[/!].jpg); height:60px; width:93px;}

In fact, this and a few other errors show up if you run CSS validation:


Hope this helps,
Dan




Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Thanks...The program I am using normally changes that type of thing but I guess it didn't...I changed those and fixed the other errors that the css-validator caught. Thanks...[thumbsup] That fixed the FF issue but it didn't take care of the IE background issue. [mad] I thought I applied all the "hacks" but I guess I missed one. Any suggestions on the other issues...I keep poking around I did find a place to change one of the DIV background color to black, but it only worked in FF. I will keep poking around....
Thanks again!
 
UPDATE...It looks like I only have two issues now...the one with the IE bug with the background image and the issue with putting the thumbnails in a seperate DIV...I have tried moving them but then the hover doesn't work...any ideas?
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top