Page Nav IE11

Allen · February 14, 2014

Smugmug style gallery
I just unveiled and noticed the multiple page nav does not show. You can click on the spot
and the drop appears. Firefox shows ok.

Dragging my mouse over the area highlights all but no indication of a drop.

Lindy · February 14, 2014

Hey Allen,

I just viewed your site in Firefox, Chrome and in Safari on my Mac. All three browsers display the dropdowns when you hover over a link that has the indicators (>>). I had two other heroes check on their PCs. IE11 was fine, but he did say they appeared faster in Firefox. Chrome was also okay, and still faster than IE11.

I'm sorry, but we're not able to replicate a problem. Can you try clearing your browser cache, and see if that solves your problems? If not, we'll need details of which browser(s) and versions are failing you.

Thanks!
Lindy
Support Hero

Allen · February 14, 2014

Lindy wrote: »

Hey Allen,

I just viewed your site in Firefox, Chrome and in Safari on my Mac. All three browsers display the dropdowns when you hover over a link that has the indicators (>>). I had two other heroes check on their PCs. IE11 was fine, but he did say they appeared faster in Firefox. Chrome was also okay, and still faster than IE11.

I'm sorry, but we're not able to replicate a problem. Can you try clearing your browser cache, and see if that solves your problems? If not, we'll need details of which browser(s) and versions are failing you.

Thanks!
Lindy
Support Hero

Win7 IE 11.0.9600.16518 Update Version 11.0.3
I had just cleared everything in IE couple hours ago.

Not to mention we need << >> first and last page picks

Allen · March 14, 2014

Allen wrote: »

Win7 IE 11.0.9600.16518 Update Version 11.0.3
I had just cleared everything in IE couple hours ago.

Not to mention we need << >> first and last page picks

I've now lost the drop in Firefox also. It looks like the left image in my last post for IE. It works if
you click spot.

phaserbeam · March 14, 2014

Allen wrote: »

I've now lost the drop in Firefox also. It looks like the left image in my last post for IE. It works if you click spot.

Yes... same here.

Allen · March 14, 2014

Lindy wrote: »

...hover over a link that has the indicators (>>) ...

Perhaps they need to fix our window machines like your Mac's. I only see one ">".
Win7 IE and FF

moiraine · March 17, 2014

Allen,

this css in your "all gallery pages" css is breaking your look of the dropdown:

/* fix the page nav below thumbs */
.sm-gallery-tiles-pagination-total {
padding-left:2em;
}

Allen · March 17, 2014

moiraine wrote: »

Allen,

this css in your "all gallery pages" css is breaking your look of the dropdown:

/* fix the page nav below thumbs */
.sm-gallery-tiles-pagination-total {
padding-left:2em;
}

Thanks

But, there still is no indication to visitors that there is a drop to select pages.

Allen · March 17, 2014

Allen wrote: »

Thanks

But, there still is no indication to visitors that there is a drop to select pages.

Had to add my own indication

.sm-fonticon-AngleBracketDown:after{
  content:" << Click numbers to jump pages";
  font-size:50% !important;color:yellow;
}

.sm-fonticon-AngleBracketDown {
   width: 180px !important; 
}

pbandj · March 17, 2014

Allen wrote: »

Had to add my own indication

.sm-fonticon-AngleBracketDown:after{
  content:" << Click numbers to jump pages";
  font-size:50% !important;color:yellow;
}

.sm-fonticon-AngleBracketDown {
   width: 180px !important; 
}

I agree...I've mentioned on multiple occasions that it's very confusing, unintuitive, and inconsistent with the other chevrons that clicking the downward-pointing arrow does nothing. How does a user know to click the numbers (other than your solution, which makes it obvious)?

phaserbeam · March 18, 2014

Allen wrote: »

Had to add my own indication

have u tried it on firefox or with a smaller browser window? i get a line-wrapping which really looks funny

Allen · March 18, 2014

phaserbeam wrote: »

have u tried it on firefox or with a smaller browser window? i get a line-wrapping which really looks funny

This might need a little more width for all browsers. Looks ok here in latest FF and IE.

.sm-fonticon-AngleBracketDown { width: 180px !important; }

Edit: just checked Screenfly and looked ok in every size, desktop, pad and phones.

Is your browser zoom at 100%?

phaserbeam · March 18, 2014

Allen wrote: »

Is your browser zoom at 100%?

Yes, here is a complete screenshot. If you want me to remove the screenshot later just send me a PM.

P.S: I also tried screenfly and i get the same line-wrapping... @ 1024x768 and 1680x1050

Allen · March 18, 2014

phaserbeam wrote: »

Yes, here is a complete screenshot. If you want me to remove the screenshot later just send me a PM.

P.S: I also tried screenfly and i get the same line-wrapping... @ 1024x768 and 1680x1050

I can't reproduce that, what browser are you using?
I'm on Win7

Are the keywords wrapping? Don't see them after the icon.

phaserbeam · March 18, 2014

Allen wrote: »

I can't reproduce that, what browser are you using?
I'm on Win7

Are the keywords wrapping? Don't see them after the icon.

Linux, FF27, Opera12 and Konqueror. I can see the wrapping on all three browsers. And yes, keywords are wrapping too.

If i add "white-space:nowrap!important;" it looks better:

Allen · March 18, 2014

phaserbeam wrote: »

Linux, FF27, Opera12 and Konqueror. I can see the wrapping on all three browsers. And yes, keywords are wrapping too.

If i add "white-space:nowrap!important;" it looks better:

Added it, any better?

I put in
.sm-fonticon-AngleBracketDown:after {
content:" << Click numbers to jump pages";
font-size:50% !important;color:yellow;
white-space:nowrap!important;
}

phaserbeam · March 18, 2014

Allen wrote: »

Added it, any better?

Yes, but i don't think this really solves the problem.

The problem is that you are using a fixed width for the container holding the text. As you can see on the bottom of the screenshot (taken with FireFox and FF WebDev 3D-tools) the container is still not wide enough. There is too much text. The container does not expand automatically. Not sure if that can be done... don't know that much about CSS.

Also i would think about using different code on different screen sizes... i apply such text on large screens only.

/* For large screens only  */
@media only screen and (min-width: 1200px) {
...CSS code that applies to screen sizes > 1200px...
}

Allen · March 18, 2014

phaserbeam wrote: »
Yes, but i don't think this really solves the problem.

The problem is that you are using a fixed width for the container holding the text. As you can see on the bottom of the screenshot (taken with FireFox and FF WebDev 3D-tools) the container is still not wide enough. There is too much text. The container does not expand automatically. Not sure if that can be done... don't know that much about CSS.

Also i would think about using different code on different screen sizes... i apply such text on large screens only.
/* For large screens only  */
@media only screen and (min-width: 1200px) {
...CSS code that applies to screen sizes > 1200px...
}

Would a min-width help?

.sm-fonticon-AngleBracketDown:after{
  content:" << Click numbers to jump pages";
  font-size:50% !important;color:yellow;
}

.sm-fonticon-AngleBracketDown {
   [COLOR=Red]min-width[/COLOR]: 180px !important; 
}

Maybe also adding max-width would help.
This should have nothing to do with the keyword wrapping, another problem?

Page Nav IE11

Comments