Buttons show on top of picture

[PrairieGal]

I'm having a new problem. The site is up and running fine. On the jewelry pages you can view the slideshow and that works great, but if you scroll down the page and just select a particular piece, the enlargement shows up but the little "add to cart" buttons for the thumbnails remain, even on top of the selected photo. The thumbnail pics and descriptions disappear, but the buttons remain. They don't show up when the slideshow runs through all the pictures only when you try to enlarge just one. Is there a way to fix this? It happens in Safari, Firefox, and IE so I don't think it's a browser issue.

Here is the site:www.beaded-baubles.com

 

[angelwatt]

The HTML and JavaScript code is very hard to go through, but I think it's a z-index problem. The area where the buttons are have a z-index of 1, while I believe the image has a 0. It was hard to confirm this though because as I said the code was hard to read. So much embedded JavaScript. You should work on separating the style (CSS) and behavior (JavaScript) from the content because it makes it much easier to read and debug. Start with the z-index though to see if that works.

 

[ChicoWeb]

Yah, that's kinda messy. Like Angel said, guessing it's z:index since it's on top.

 

[PrairieGal]

Where do I find the Z index? I have the iWeb stuff uploaded to a folder then I FTP it up to my server. I'm a real novice when it comes to MAC stuff.

 

[zirkle2007]

Dunno how much you've dug into the raw code, thats where your z index is at. You have to open your page in Notepad or some other html editor then find it. You may have knew that but no one else has said anything. Just trying to help!

 

[angelwatt]

Where do I find the Z index? I have the iWeb stuff uploaded to a folder then I FTP it up to my server. I'm a real novice when it comes to MAC stuff.

I don't know that iWeb gives you the control you need to change it. iWeb and this much JavaScript really don't mix. You may want to switch to another development environment.

 

[SrWebDeveloper]

Not talking about iWeb but general development, to control z-index it done via CSS which can be done two ways, after surrounding the content in a div:

<div id="myclass">content</div>
<style>
.myclass {z-index: 1000}
</style>

or

<div style="z-index: 1000">content<div>

Think of z-index as stack of cards and you're looking DOWN from the top. The cards are numbered 1 through 52, #1 being on the bottom and #52 on top. The cards on top hide the ones below, so the higher the z-index value the more "on top" it becomes.

But there is a catch...

Form fields such as pulldown menus and even input buttons are created by the browser AFTER all other web content is parsed. So to ensure z-index affects form fields, put them in div's also and set z-index to 0 and/or disable visibility so it doesn't render "on top" of your desired content.

-jim

 

[PrairieGal]

Thank you! I'll see what I can do.

PS I didn't know about notepad - I'm a long way from geekdom.

 

[SrWebDeveloper]

All kidding aside about notepad, when you install programming IDE's you not only see different colors for functions vs. variables, etc., in a well organized manner in code view, you also have design view to help with layout. The better ones also have wizards and style dialogs, templates and ways to edit the CSS and various database connections, etc., all integrated. If you end up not coding and instead simply creating pages via a CMS, just use the editor built into the CMS which is much like Microsoft Word.

If it's a large project with complex database integration, get an IDE.

But for people familiar with code, i.e. a simple PHP page with basic database support, it's all text to them and notepad works just as well.

-jim

 

[PrairieGal]

I just can't figure out how to fix it. I've changed the z index numbers and nothing happens. Would someone be willing to work with me via email? I can send you the html script from the web server if you could show me where the problem is and how to fix it. I'm in way over my head.