Navigation menu margin doesn't get applied in IE and header is displaced in Chrome

[lmbt1]

Hello!

I am working on a site with the adifferentzen template. URL is:

buckstitchcanvas.com/shop

and the navigation menu is exceptionally long in IE. Scroll to the right to see the issue. (In Firefox, it's fine.)

In Chrome, the header and the navigation are out of place in that the header image doesn't go to the edge of the page on the right. So the image repeats, and some of the navigation menu items get pushed to that space to the right of the image, while others stay in the navigation menu.

I've tried changing some of the margins in my stylesheet, as per other forum suggestions (I've been in Chrome when I've done this. Does the browser that you make the changes in make a difference?). But after refreshing the store page, it doesn't seem to do anything in IE or Chrome.

I appreciate any help with this!

thank you!

[stevesh]

Remove the red part in stylesheet.css:

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
white-space: nowrap;
}

Also, remove stylesheetbak.css or give it a different extension (like stylesheet.bak).

[dbltoe]

Remembering, of course, that .bak files will fail PCI. I generally use my initials. Of course, I'm not John Peter Graham.

[lmbt1]

Thank you for the prompt reply!

I've made the changes that you've suggested and it definitely helped with IE (although now there is a white-space gap below the right edge of the header image, and the search box underneath. And there are now three search boxes on the right instead of one.) The gap appears in Firefox as well.

In chrome, the navigation menu items are no longer strung so far out of the margin but are now stacked up in the repeat of the header image on the right.

There has been progress, though! And I'm very grateful! Thank you very much for your time and assistance! :)

[stevesh]

I'm not seeing the white-space in IE or FF nor the problem with Chrome. Turn off the Search sidebox and see if that fixes the multiple search boxes.

[lmbt1]

Well, this is very strange! Now the issues with the navi menu have disappeared since logging back in on FF,IE, and Chrome! How do ya' like that?! Great!

One quick question though. What do you suppose is causing the following issue:

My customer, when logging into his website, buckstitchcanvas.com/shop, has the issue where the header image doesn't go clear to the right hand edge of the page and instead starts to repeat the image as well as puts the home and log in menu options up in the right hand corner on the repeated image. But when I (or you, for that matter) log on to buckstitchcanvas.com/shop in IE, we see it correctly. I was thinking he's needing an IE update, but I'm pretty sure he's using IE 8 on atleast one of his computers. So this has me stumped. Any ideas?

Again, thank you thank you for all of your help! You've been a life saver!

[rstevenson]

Your customer has a larger monitor (in pixels) than you do and is viewing the site with the browser set to the full width of the screen. When I do that I see the problem (in FireFox), which is a natural result of allowing the site to expand outwards to the full width without considering how to handle the resulting shift of elements.

Full width is not recommended and is almost never necessary, so simply set a width in your stylesheet which fits all your elements.

Change (in red)...

#mainWrapper {
    background-color: #F5F5D6;
    text-align: left;
    vertical-align: top;
    width: 100%;
}

...to...

#mainWrapper {
    background-color: #F5F5D6;
    text-align: left;
    vertical-align: top;
    width: 1300px;
}

Adjust as necessary.

Rob

[lmbt1]

That worked perfectly! Thank you very much for your help and prompt reply!