Testing help needed, specifically mobile and weird devices
 

Basically I need to get rid of the existing navigation bar... I've got several bugs outstanding against it:

1) Too wide, wraps badly.
2) Doesn't work well on touch interfaces.
3) Doesn't work at all on the "Spy" page.
4) Requires JavaScript and extra images to display... which slow the page fractionally.

So, I've written a new one, kinda ugly but consistent with the ugliness of the site as a whole.

It's pure CSS, which means no JavaScript. Which also means it should fix the bugs above.

However... it uses CSS :hover, which is usually when the mouse rolls over it.

My question: Does this work on mobile devices?

So... this is the test page:

http://www.lfgss.com/test/

Could you view the navigation... and I don't care whether the links work, I'm concerned with the simple question: Could you see the drop downs and the sub-navigation within them?

If yes, let me know.

If no, let me know.

I've tested it on the native Android 4 browser, Chromium for Linux, and Firefox for Linux. All fine on those.

Does it work for you?

Chrome for PC: Yes.
Dolphin Mini for Android: Yes
IE 8 for PC: No (lol)

Chrome for mac (latest version of Lion): yes

Dolphin, android, all is good.
As is chrome/firefox on PC.

IE on pc, is a no go.

Do you need screenshots or anything?

Is it supposed to work on mobile devices at the moment or is that a future development?

The drop downs don't work on my iphone (safari), I have lfgss set to display the mobile device if that makes any difference

works fine with the stock internet browser on latest android on a samsung galaxy

Nope, just version numbers for IE.

It's supposed to work. On Android when you tap the menu headers it opens the drop downs.

It shouldn't make a difference that you view the mobile version.

I just tried the test page on my iphone and none of the navigation buttons work at all

Internet Exploder on Windows Phone 7.5 is thoroughly broken. :(

Edit: Can see only see top level links, displayed vertically on a dark grey background.

Ironically, the existing one works fine on IE in WP7.5

Opera Mobile on Android - can see that the drop down additional navigation options and those options (ie Posts: today's posts, New Posts, Live Updates etc) all function as links

Opera Mini on Android - that'd be a fail... All primary navigation (ie, Posts, Forums, Classified etc) display but do not allow any kind of interaction - touching them does nothing as far as I can see.

ie 7

Chrome, Safari and Firefox all OK.

Works fine on my Blackberry browser too.

No drop downs here (iPhone 4, Safari).

So the list of browsers with *BROKEN* navigation is:

1) IE7 on Windows
2) IE on Windows Phone 7.5
3) Safari on iPhone 4
4) Opera Mini on Android

I realise I need to buy a whole load of devices for testing stuff like this.

1) IE7 on Windows
2) IE on Windows Phone 7.5
3) Safari on iPhone 4
4) Safari on iPhone 3GS (latest firmware)
5) Opera Mini on Android

^^ They'd be tax deductible too, right?

I'm below the tax threshold, so no.

OK... can we try again... ignore the above failures, I've just changed it and as I still have mashton's iPod I've tested it there and it now works there.

So right now, assuming I've just fixed it for iPhone I think the broken list is:

1) IE7 on Windows
2) IE on Windows Phone 7.5
3) Opera Mini on Android

1) IE7 on Windows
2) IE on Windows Phone 7.5
3) Opera Mini on Android
4) IE9 on Windows

Yep, working on iPhone 4, Safari.

Think IE8 needs to go on broken list too, Fox mentioned it and it's not working for me.

1) IE7 on Windows
2) IE8 on Windows
3) IE9 on Windows
4) IE on Windows Phone 7.5

Opera Mini on Android fixed... IE8 added.

I've no idea how to fix IE on Windows given how badly they follow standards. Will look into it.

WP7.5 is still much of the same.

^ The top level items are more spaced out, and they're now white, but they're still stacked vertically and they don't show the sub navigation.

Woo!

Got IE9 working on Windows... could the other IE users confirm fixes.

1) IE7 on Windows
2) IE8 on Windows
3) IE on Windows Phone 7.5

All good on WP7.5 :)

Good on Win IE8

Brilliant, so I just need cliveo to test IE7:

1) IE7 on Windows.

I'll fire up a virtual machine and test IE7 for you.

It kind of works, the drop downs are nudged over to the right slightly. Perhaps try adding list-style-position: outside; to the child <ul>s?

Do they progressively nudge further to the right with each one?

I remember some weird bug about this.

This is the bug I remember from years ago: http://stackoverflow.com/questions/2...-li-gap-in-ie7

Try now.

That's with the bizarre "vertical-align: bottom" fix suggested on SO.

It's still happening. The gap isn't progressively increasing, it's ~40px each time.

Added the CSS you suggested.

Can you hit it again.

Thanks, btw.

Ah, that hasn't worked either.

And no problem, I'm happy to help.

Updated again... this attempt is a "no white space in HTML" try.

No change I'm afraid.

Ho hum, no worries.

I think I should build myself a VM and figure it out.

Thanks anyway.

One thing though... what version of Windows has IE7 by default?

Nokia E72 it works.

Which is amazing, as I can't even post from that phone (the text box is greyed out for some reason), the current menu doesn't work properly, and I constantly get errors with the wrong pages being loaded, and errors around tokens.

I'm happy to have a play with it over here. I'll shout if I can fix it.

Windows Vista and Windows Server 2008 came with IE7 by default according to Wikipedia. I just keep a VM running XP and IE8 (you can switch to IE7s engine with developer tools).

Oh, it's just a case of setting margin: 0; on .dd_menu li:hover ul.

Fine on iPad 2 Safari, though it's a bit small for fingers to hit. Could do with more vertical padding on the dropdown links

Fantastic... I've updated the one on the server.

So currently, we believe the menu works:

*) IE7 on Windows
*) IE8 on Windows
*) IE9 on Windows
*) IE on Windows Phone 7.5
*) Dolphin on Android
*) Chrome Beta on Android
*) Opera Mini in Android
*) Opera Mobile on Android
*) Chrome on Linux
*) Firefox on Linux
*) Safari on iPhone 3
*) Safari on iPhone 4
*) Safari on Mac
*) Safari on Windows
*) Safari on iPad
*) Nokia E72 !!!!!
*) Blackberry

That's pretty comprehensive.

Currently known to be broken:

(nowhere)

I'll implement it tomorrow morning and see if anyone screams over the weekend.

Good stuff, but there are a couple of other tiny IE7 bugs (and to think this browser was a godsend after IE6):

1) Each item in the subnav has a border around it when not hovering, this seems to be solved simply with: .dd_menu li:hover ul li { background: none; }

2) "Tuesday: South East beers" wraps onto two lines so the word beers falls on top of the word Wednesday below. Maybe this is specific to how fonts are being rendered on my VM/OS but by making everything 10px wider this was fixed.

Then with those in place, IE7 displays it the same as Safari does on Mac OS X.

Hope that helps.

Helps tons, thanks again.

Was thinking of adjusting the widths to make them autofit, and white-space:nowrap as well.

That would take care of the South East Beers problem

Yeah that'd be a better option as it's then flexible for whatever links you may wish to add in the future.

Hmm, nope... widths of various floating items are harder to get working.

Just going to give it a tad more space instead ;)

May try it out soon.

Fair enough, there's always that risk of breaking what already works!

I'm happy to test it out again once it's live. Not a problem.

Implemented.

Anyone notice that changing the navigation stripped half a second off of the page loading time.