Alignment issues with transparent splash menu and background pattern

Please see 

for a live demo of the problem i'm facing.

I'm trying to align the rollover menu over the buddha / menu shield.  I tried using a transparent GIF to over lay the buddha logo/splash shield but greated artifacts because of the textured pattern.  

Any recommendation on hot to best align the menu ? and not get the clashing background issue i'm facing.

Any help would be appreciated.


Who is Participating?
lherrouConnect With a Mentor Commented:

It looks nice to me in Firefox. Unfortunately, in IE the menu lies below the box where it's supposed to fit. I have some general comments, and maybe from these we can fix the problems you have.

First of all, using frames is a bad idea. There's no real reason to use them given your page layout, so I suggest you avoid them if at all possible.
Second, you've used tables to lay out your page. While tables have a place in presentation of tabular data, they were never designed for page layout, and that makes it harder to get the positioning you need. You can do all this and more with CSS (and resolve the issue that probably lead to your using frames, putting the location/hours/phone information at the bottom of the page).
Third, within your buddha/menu shield table cell, you've used <P> tags for positioning, and that does not work, since each browser or browser version will allow different spacing for them. Again, this could be resolved with CSS, or, if you persist on using tables, you can place the buddha in one table cell and the menu shield in another.

This is a starting point. If you want to learn more about using CSS to lay out your page, I can suggest some resources and help you get there, or we can tweak your code as is to help you improve the layout.

aedeasAuthor Commented:
Dear LHerrou:

Thanks for the tips.

I've repositioned the menu/shield as well as the footer using CSS instead of the Frame set.

Looks fine for me on Safari and Firefox.  How does it look on IE?



The menu/shield looks great in both. However, the footer is "below the fold" on both FF and IE. Also, you are missing the <table> opening tag. If you want to do a fixed footer like you had, but without using frames, there's an excellent example here:


Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.