HTML HELP? z-index help?

Question

I'm working for a company: http://www.ivoog.com I need help with a Google Checkout icon. When you visit the home page in a browser other than Internet Explorer (like Firefox) you can see where it says "SHOP WITH CONFIDENCE." Click on the icon that says Google Checkout.

See how the pop-up appears under the other features on the page? How can I make it so that it will appear over. Please explain. Thanks.

Answer 1

Checked popup using Firefox and it is position identically to its position in IE.  Its not under any other feature that I can see.

Ron

Answer 2

You need to make sure that whatever element you want below has a lower z-index applied. Also note, that z-index only works on positioned elements. I.E. Anything else then the default static position.

I debugged your source code in FireBug, and managed to get it working. But the main problem is your featuredcontentglider.js, which appears to mess up the z-index. I would highly suggest that you replace this script with one that doesn't use z-index.

As a quick-fix, you can try to alter the z-index value of the script, its starting at 100 right now, which is pretty high and unnecessary.

I would also suggest that you stop using inline-styles, because you are making it very difficult for us to debug your code, and you are making it harder to maintain your site. You will find that using external stylesheets drastically lower the coding otherwise required, and don't forget that external stylesheets are cached by the browser.

You are also using deprecated elements such as <center>, along with attributes such as height and width, you should use the css equivalents whenever possible, of cause this isn't always possible on 3th party code, I.E. Google provided code, because their terms doesn't always allow you to change their code.

You have also linked an external stylesheet in your body section, this is not allowed. Potentially this could lead to incorrect rendering of your pages. The link element should be placed in the head section of your page, see also: http://www.brugbart.com/References/6/#Se... - External StyleSheets

I also suggest you improve the contrast of the site, and fix the other rendering issues, I.E. overflowing text, this is however a task which may require a complete re-design.

In the case of your menus, i would simply apply the color of the "button" as a background, and then use the border properties of css to make the border. The effect you are using images to make now, is not exactly that hard to re-make in html/css, while it would fix the rendering issiue with the text at the same time.

Using images for something which is easily done using html and css alone is a really bad design practice, it poses usability issues, and increase the load time of your page.

I would at least use px for the font-size to solve the rendering issues in IE. Firefox on the other hand, dose not respect the locked px value, presumably because its developers are trying to force us to use scalable units.

Finally i highly recommend that you include a link to your Privacy Policy on your page, as required by google adsense. See also: http://adsense.blogspot.com/2008/02/upda...

If you ain't sure how to write your Privacy Policy, there are quite a few templates for adsense, I.E. http://www.google.com/search?hl=en&q=ads...