Cart Drop Down and Menu

Store Builder Questions
1

Okay, here’s one that has me baffled. I will try to explain what I have been trying to do.



I wanted to move the “search” box and the “shopping” cart up into the header area of the site. I have them there with lots of help for you folks…thank you. It looks different in Firefox when compared to Safari, Chrome and IE, but that’s another problem I need to figure out.



The problem now is that the menu ‘comes’ through the cart drop down and makes if very weird to work with. The site is globalgiveaway.org This is just a test site as I work through the design issues.



I have also attached a few images that show what I am talking about. I have tried playing with z-index, but I can’t seem to be able to keep the menu “behind” the cart’s drop down.



Is this possible or am I just dreaming?



Thanks!



The URL to the web site; http://www.globalgiveaway.org/

MenuThruCart.png

SelectedMenuEmptyCartFF.png

CartDropDown.png

2

A url to the website will help a lot. So people can check your html and css to solve the problem.

3

Done. It is now listed at the end of the message. Thank you!

4

Use firebug to determine the z-index of your objects on the page. Adjust the z-index in css as appropriate but do not do the common practice of just setting something to 100 or 1000. Be smart in what you you so you allow for changes in the future.

5

I have Firebug and have been trying to figure out the current z-index settings. I only see z-index: auto, but I have put a value in there, but I guess I don't have it in the right place.



I will continue playing, but I'm open to suggestions as to this z-index issue!



Thanks so much.

6

On line #1453 of your style.css sheet, you call up #menu



Just change the z-index to 1 and set the position to relative and you'll be all set.



Hope that helps,



Brandon

7

Brandon you are my hero! That worked with a little more playing on my part. Thank you so very much for your time and efforts.



One more question if someone can point in the right direction for this problem. The site looks the same in Chrome, Safari and IE, but NOT Firefox. I need to right a little routine for FF to make the site behave like the other browsers.



Can someone share a sample of what I need to write or do so that the correction only affects the Firefox browser?



Thanks!

8

I usually do all my designs to fit FF and usually Chrome and Safari will also look the same. IE is the only one that is ever a pain in the butt. There is actually an IE style sheet there that you can change or you can hook your own.



I've never gone the opposite direction so I don't have any clue about that.



Trying to get your site to look the same in all the browsers can be a pain in the neck. Let alone if you are on Windows and sometimes things will look different on a Mac. It would be nice if everyone just ran FF on Windows. Man, the designing thing would be so much easier.



Besides using what you have on your computer, I'd really recommend signing up for Adobe Browser Lab. That thing will allow you to check your site on the major browsers and even some of the older ones. Plus, it will do both Mac and PC.



Thanks,



Brandon

9

[quote name='HempUSA' timestamp='1319063582' post='124082'][/quote] This two properties on the same class could get you some browser problems:


styles.css (line 102)
.top-search {
padding: 100px 0 0 155px;
}
styles.css (line 73)
.top-search {top: -75px;} the padding is pushing down and the position is pushing up. try just:


.top-search {padding:50px 0 0 155px;
clear: left;} The clear left, will put the “top-search” below the"content-tools-helper". Hard to say if there is another problems, but in general is better to declare the width and height on divs, and use clear or float to avoid any “jumping”.

10

Brandon and Hempusa,

IE9 also has a “firebug” like utility, you can activate it with F12 key. Check there the classes:

.content-tools span.float-left,
.content-tools span.float-right {height: 52px;}

The height declaration is pushing the cart down. I think with {display:none;} on those classes, IE9 will look like firefox.

11

Thanks for the tips!



One thing that is happening on IE, is the menus are now “behind” the products. Trying to find that one.



Also, Firefox is “wrong” as compared to Safari, Chrome and IE. Those three are the same for the most part. This is the first time that I have had Firefox be different than Safari and Chrome. This is getting too weird.



Why can't the browser authors write to the same standards? Our jobs would be a lot easier that's for sure.



I didn't know that IE had a “firebug” like program…I just don't use IE very ofter. I'll certainly look into this! Thank you!



Jon

12

try with z-index=0 on #menu and #menu li. The cart has z-index=5 so will be always top.

13

[font=“Tahoma”]Wow, this is great work!

I'd be interested in this… however the only issue I can see is that after adding ~8+ categories, they will wrap / dissapear from view!



It's fast, you don't “accidently” fall off the menu and sub menu items either.



Only suggestion is on the last Login drop down menu you had - there was a large gap in between the menu and the sub-menu.



Well done, really impressed!



[/font]