Issue with header in firefox and safari?

JumpingJack

I unveiled my new smugmug site today, and it looks great in chrome, IE, and safari on the iphone. In those browsers it looks exactly like I designed it. I used the "Sophie" design.

However, in firefox the navigation bar collapses to two lines, not one, and my logo is off-center - they appear too large for the screen. I have checked it and seen this on 4 different machines, using the latest version of firefox and XP, Windows 7 and Mac OS. The same thing is happening in safari on a macbook and an imac (but not on an iphone). On one single machine, it works correctly in Chrome but not in Firefox on that same machine.

Edited to add - it is happening for some people in IE9, too. So it might be a combination of screen size and browser?? Do I need to look at "container width" or "resize width?" But then why does it work on some machines/browsers and not on others? I'm stumped.

Everything else seems to be working fine, except for the nav bar and the header. They look awful to some people.

Is this a bug with firefox and safari? I emailed smugmug help but of course they're slammed and I don't know when I will hear back.

ian408

It'd be helpful to provide your website for us to take a quick look at.

JumpingJack

Ah, yes, that would be good, wouldn't it?

http://www.lesliecranephotography.com/

I am also going to attach screenshots of the problem - how it looks on some browsers/screens (logo and nav bar not resizing correctly, and how I am seeing it (correct).

I have the "stretchy" option enabled, by the way.

This is the problem:

JumpingJack

This is how I see it on my machines.

JumpingJack

It is also happening for some people IE 9, so I'm not exactly sure what the bug is - a combination of screen size and browser...? Container width? Resize width? However... on one machine, it looks great in Chrome but not in Firefox. So the fix must be on Smugmug's end.

Thank you for looking! I wrote to the support heroes on Tuesday, but they've not responded yet.

ian408

I don't believe you're seeing a browser bug. Right off the bat, I can see that the two attachment are of browsers using a scale size that's different from the default. On a Mac, I can set the page's scale using 'command' + '-' to scale down, 'command' + '+' to scale up, and to set the default, 'command' + '0'. You can do the same in Windows (not sure the commands to do it).

When I open your site in FF or Safari, I can scale down or up to match the 'correct' behavior.

Hope that makes sense.

JumpingJack

Thank you!! So I can't do anything about it except ask people viewing my site to do so with their scale size unchanged? This still seems to be a problem, though, in that case. For example, I can view other websites at a larger and smaller scale in my browser, but all the page elements re-size, not just some of them.

You are correct, I have mine set to 100% and I can re-create the problem by scaling up (except then the slideshow looks smaller than it does here in the screenshot... so I'm not certain this is the issue every time...?) I will see what happens if my friend re-sets her scaling to 100%.


Thanks again.

JumpingJack

Yeah, the scaling is not the issue, unfortunately. I'm viewing on Firefox at 100% (the default setting, no scaling) and I'm still seeing the problem. If I scale down I can force it to fit, but the slideshow gets really small, in that case and the quality reduces quite a bit.

So I do think this is something that is not on my end, and not the fault of my viewers.

Thanks for trying, though.

ian408

JumpingJack wrote: »

Thank you!! So I can't do anything about it except ask people viewing my site to do so with their scale size unchanged? This still seems to be a problem, though, in that case. For example, I can view other websites at a larger and smaller scale in my browser, but all the page elements re-size, not just some of them.

You are correct, I have mine set to 100% and I can re-create the problem by scaling up (except then the slideshow looks smaller than it does here in the screenshot... so I'm not certain this is the issue every time...?) I will see what happens if my friend re-sets her scaling to 100%.


Thanks again.

You could ask them to do that but then some of your customer would miss out on the content. On a big screen, not too big a problem-I'm viewing on a laptop and your font looks like it's a 6 or 8.

The way your site is designed, there's no room for the navbar to grow without wrapping. The same is true for your social media icons although that's less noticeable. You could move the navbar or allow for more space to make it work.

JumpingJack

Thanks. But why does the design work perfectly on one browser at 100% but not in another browser at 100%, on the same monitor? That is what I'm trying to get Smumug to answer. I actually have tried to redesign and reduce the size but it still hasn't solved the problem. And it STILL isn't consistent across browsers, even when I do that. In some places there are problems. That is what is so frustrating. I'll wait to see what Smugmug says. There needs to be some consistency across browsers, and that is something they should have troubleshot a lot more before launching.

ian408

Well, the browsers are all (of the biggies) configurable to a large degree and the default settings for one aren't necessarily the same as the others.

It's one of the many challenges web designers have, making something work well with all browsers and screen sizes