IE control plus/minus zoom problem

[dorayme]

Need a reminder about controlling the collapse of spacing between
text in a horizontal menu in IE 7 (or 8... I can never recall how
to find out on Win machines. On a Mac, it always tells you from
the second menu item along from left at the top).

For example:

<http://dorayme.netweaver.com.au/zoomProb.html>

in IE zoom up or down using control + or -, the spacing between
the list items collapses. This does not happen if I go to the
view menu and change text size.

I seem to recall there might be a fix by sticking in zoom: ...;
somewhere? Bootnic will know. If anyone sees him passing, grab
him. <g>

 

[dorayme]

Need a reminder about controlling the collapse of spacing between
text in a horizontal menu in IE 7 (or 8... I can never recall how
to find out on Win machines. On a Mac, it always tells you from
the second menu item along from left at the top).

For example:

<http://dorayme.netweaver.com.au/zoomProb.html>

in IE zoom up or down using control + or -, the spacing between
the list items collapses. This does not happen if I go to the
view menu and change text size.

I seem to recall there might be a fix by sticking in zoom: ...;
somewhere? Bootnic will know. If anyone sees him passing, grab
him. <g>

I did try zoom: 1; on some of the CSS groups. I got some success
just now on putting it *on every single set of rules*,

as at

<http://dorayme.netweaver.com.au/zoomProb_allZoomedUp.html>


leaving me the task of finding out which ones are not needed!

What makes it slightly uncertain is I am working on Windows on a
Mac in a virtual machine and there are some complexities.

I think this zoom will fix this problem I am seeing. I know no
one is supposed to say anything at alt.html any more, I hope
breaking the silence does not bother anyone too much? <g>

 

[BootNic]

I did try zoom: 1; on some of the CSS groups. I got some success
just now on putting it *on every single set of rules*, as at

<http://dorayme.netweaver.com.au/zoomProb_allZoomedUp.html>

leaving me the task of finding out which ones are not needed!

What makes it slightly uncertain is I am working on Windows on
a Mac in a virtual machine and there are some complexities.

I think this zoom will fix this problem I am seeing. I know no
one is supposed to say anything at alt.html any more, I hope
breaking the silence does not bother anyone too much? <g>

For IE6/7 when a block level element is set to display:inline;zoom:1;,
the element emulates display:inline-block;. Since IE8 has better
support for display:inline-block;, this zoom:1; trick will not work for
IE8.

Since inline-block is better supported then it was. I would suggest
changing the ul#nav li to display:inline-block; and then add a
conditional comment for older IE.

<!--[if lt IE 8]>
<style type="text/css">
ul#nav li {
display:inline;
zoom:1;
}
</style>
<![endif]-->



--
BootNic Fri Jun 25, 2010 11:56 am
"They may forget what you said, but they will never forget how you
made them feel."
*Carl W. Buechner*

â• 17 days remaining

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.12 (GNU/Linux)

iEYEARECAAYFAkwk0cYACgkQmo2774GZ7qkIogCfT4/A3hKL05xpgcm9uuw8JlhN
9lUAn1iruBzLTixp/BxL3y5/zb56X9Ol
=auSy
-----END PGP SIGNATURE-----

 

[dorayme]

....

I did try zoom: 1; on some of the CSS groups. I got some success
just now on putting it *on every single set of rules*, as at

<http://dorayme.netweaver.com.au/zoomProb_allZoomedUp.html>

leaving me the task of finding out which ones are not needed!

What makes it slightly uncertain is I am working on Windows on
a Mac in a virtual machine and there are some complexities.

....

For IE6/7 when a block level element is set to display:inline;zoom:1;,
the element emulates display:inline-block;. Since IE8 has better
support for display:inline-block;, this zoom:1; trick will not work for
IE8.

Since inline-block is better supported then it was. I would suggest
changing the ul#nav li to display:inline-block; and then add a
conditional comment for older IE.

<!--[if lt IE 8]>
<style type="text/css">
ul#nav li {
display:inline;
zoom:1;
}
</style>
<![endif]-->

OK, thanks for this and I will look to do it if I could get
confirmation that

<http://dorayme.netweaver.com.au/zoomProb_allZoomedUp.html>

shows any zooming problem (collapsing spacing between items) in
any of IE6, 7 or 8.

And if

<http://dorayme.netweaver.com.au/zoomProb.html>

shows a problem in IE6 and 7 but not in 8.

I cannot reproduce (for the moment) on a proper Windows computer
(as opposed to IE on Win in a virtual machine on a Mac) the
problem I saw yesterday. Perhaps I should buy 3 more windows
laptops, one for each of 6, 7 and 8, I don't get the feeling my
IETester on my winbox is working.

 

[dorayme]

I couldn't see a problem in your example page ..

Which page? There were, crucially, two.

but it occurs to me, this
design of lists as menus horizontal style is found in about a billion web
pages, so is there not a de facto standard for this design that works best
in most every situation?.. and where might these de facto standards be
exemplified, or the benefit of web designers?

I mostly float list elements for horizontal menus but it
irritated me to see the trouble I was seeing in IE when I just
used display: inline (for a dead simple purpose where no wrap was
the least likely). There are no fixed standards and many plans
depend on context.

 

[BootNic]

On Sat, 26 Jun 2010 11:31:24 +1000

[snip]

<http://dorayme.netweaver.com.au/zoomProb_allZoomedUp.html>

shows any zooming problem (collapsing spacing between items) in
any of IE6, 7 or 8.

No worries for IE6 as it does not have the zoom feature.

The only common issue I can think of is if the list wraps to more
then one line. Add border and background-color and the visual
effect is not IE specific.

And if

<http://dorayme.netweaver.com.au/zoomProb.html>

shows a problem in IE6 and 7 but not in 8.

I cannot reproduce (for the moment) on a proper Windows computer
(as opposed to IE on Win in a virtual machine on a Mac) the
problem I saw yesterday. Perhaps I should buy 3 more windows
laptops, one for each of 6, 7 and 8, I don't get the feeling my
IETester on my winbox is working.

IE7 zoom messes up horizontal lists:
http://tinyurl.com/398rxm7

IE7, zoom and horizontal menu (CSS):
http://tinyurl.com/39fmbuz

I do not know if this will display the issue in IETester. I don't
see why VM should have any issues.

I do not think this issue will preset in IE8 using IE7
compatibility mode.



--
BootNic Sat Jun 26, 2010 11:35 am
It is well known that "problem avoidance" is an important part of
problem solving. Instead of solving the problem you go upstream and
alter the system so that the problem does not occur in the first
place.
*Edward de Bono*

â• 16 days remaining

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.12 (GNU/Linux)

iEYEARECAAYFAkwmHl8ACgkQmo2774GZ7qm8WQCfRJXNZz+Dy5EWLC5LAtdDyEdK
cyQAoNbyiTv5mTc16lBE+L/ckN9nriPz
=8Wl4
-----END PGP SIGNATURE-----

 

[dorayme]

On Sat, 26 Jun 2010 11:31:24 +1000

[snip]

<http://dorayme.netweaver.com.au/zoomProb_allZoomedUp.html>

shows any zooming problem (collapsing spacing between items) in
... 7 or 8.

....

The only common issue I can think of is if the list wraps to more
then one line. Add border and background-color and the visual
effect is not IE specific.

And if

<http://dorayme.netweaver.com.au/zoomProb.html>

shows a problem in IE6 and 7 but not in 8.

I cannot reproduce (for the moment) on a proper Windows computer
(as opposed to IE on Win in a virtual machine on a Mac) the
problem I saw yesterday. Perhaps I should buy 3 more windows
laptops, one for each of 6, 7 and 8, I don't get the feeling my
IETester on my winbox is working.

IE7 zoom messes up horizontal lists:
http://tinyurl.com/398rxm7

Your "needs enough padding to keep the text from jumping out as
it is zoomed" in the above thread is probably a nice clue to what
is going on.

IE7, zoom and horizontal menu (CSS):
http://tinyurl.com/39fmbuz

I do not know if this will display the issue in IETester. I don't
see why VM should have any issues.

I do not think this issue will preset in IE8 using IE7
compatibility mode.

Must be hard designing a zoom feature in a browser! So many
decisions to make that have so many ups and downs (no pun
actually intended).

The simplest first thought is for it to imagine the whole page in
view at the set font size, to virtually take a picture of it and
then to show that portion of the picture that can fit in users
viewport starting at what was visible in top left of viewport at
the point of the user hitting the zoom control. But then text
needs to be selectable and to grow sharp so snapping and simple
enlargement is out. And wrap needs to be operating to be
practical.

Naturally, IE would stuff up such a complicated task, but, I am
just saying, it is quite a hurdle for browser makers. Opera seems
to have it well developed. I don't like these non text-only zooms
but I guess we need to get to know them well as they seem so
popular.