IE7 zoom messes up horizontal lists

P

patrick j

Hi

I've just discovered that IE 7 messes up horizontal lists.

I've done a bit of searching the web but a solution has not sprung
forth from this searching.

Below is a url with a horizontal list:

<http://css.maxdesign.com.au/index.htm>

With IE 7 all looks very well at 100% but increase the zoom to 125% or
150% then all the text in the list crushes together but the positions
of the links seem to remain in scale with the zooming. What you have is
a jolly mess :(

I'm wondering if there are any horizontal list experts who know of a
solution to this one?

Thank you :)
 
E

Els

patrick said:
Hi

I've just discovered that IE 7 messes up horizontal lists.

I've done a bit of searching the web but a solution has not sprung
forth from this searching.

Below is a url with a horizontal list:

<http://css.maxdesign.com.au/index.htm>

With IE 7 all looks very well at 100% but increase the zoom to 125% or
150% then all the text in the list crushes together but the positions
of the links seem to remain in scale with the zooming. What you have is
a jolly mess :(

I don't see that happening at all, actually. Not on that page anyway.
I've seen slight problems with page-zoom, especially when images and
text are mixed, but horizontal lists like this don't show any problem
on my IE7.
I'm wondering if there are any horizontal list experts who know of a
solution to this one?

No problem, no solution ;-)
 
E

Evertjan.

Els wrote on 04 nov 2006 in comp.infosystems.www.authoring.stylesheets:
I don't see that happening at all, actually. Not on that page anyway.
I've seen slight problems with page-zoom, especially when images and
text are mixed, but horizontal lists like this don't show any problem
on my IE7.


No problem, no solution ;-)

Oh but they do echt wel, Els.

Zoom to 125% and then hover over the celtral words.
 
E

Els

Evertjan. said:
Els wrote on 04 nov 2006 in comp.infosystems.www.authoring.stylesheets:


Oh but they do echt wel, Els.

Zoom to 125% and then hover over the celtral words.

Yup, see it now.
Didn't know I was supposed to hover over the words :)
Clearly a bug, but if I find a solution, I'll post it here.
 
B

BootNic

patrick j said:
news: (e-mail address removed)
Hi

I've just discovered that IE 7 messes up horizontal lists.

I've done a bit of searching the web but a solution has not sprung
forth from this searching.

Below is a url with a horizontal list:

<http://css.maxdesign.com.au/index.htm>

With IE 7 all looks very well at 100% but increase the zoom to 125% or
150% then all the text in the list crushes together but the positions
of the links seem to remain in scale with the zooming. What you have
is a jolly mess :(

I'm wondering if there are any horizontal list experts who know of a
solution to this one?

zoom:100%;
padding:0 0.3em;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="content-type" content=
"text/html; charset=windows-1252">

<title></title>
<style type="text/css">
#nav {
margin: 0;
padding: 0;
}
#nav li {
background-color: #ffe;
display: inline;
margin: 0 0.3em;
padding: 0 0.3em;
}
#nav li:hover {
background-color: #fcc;
}
#nav, #nav li {
list-style: none;
}

</style>
<!--[if IE 7]>
<style type="text/css">
#nav li {
padding: 0 0.3em;
}
#nav, #nav li {
zoom: 100%;
}
</style>
<![endif]-->
</head>

<body>
<ul id="nav">
<li><a href="/listamatic/">Listamatic</a></li>
<li><a href="/listamatic2/">Listamatic2</a></li>
<li><a href="/listutorial/">Listutorial</a></li>
<li><a href="/floatutorial/">Floatutorial</a></li>
<li><a href="/selectutorial/">Selectutorial</a></li>
<li><a href="http://www.maxdesign.com.au/book/">Book</a></li>
</ul>
</body>
</html>
 
E

Ed Mullen

patrick said:
Hi

I've just discovered that IE 7 messes up horizontal lists.

I've done a bit of searching the web but a solution has not sprung
forth from this searching.

Below is a url with a horizontal list:

<http://css.maxdesign.com.au/index.htm>

With IE 7 all looks very well at 100% but increase the zoom to 125% or
150% then all the text in the list crushes together but the positions
of the links seem to remain in scale with the zooming. What you have is
a jolly mess :(

I'm wondering if there are any horizontal list experts who know of a
solution to this one?

Thank you :)

I see the problem on the page you gave. However, I'm not noticing the
problem you describe in my own menus. But! I do notice another problem
when zooming in. IE7 is not reforming the page content to fit within
the viewport: it scrolls horizontally. Happens on every page I've
tried, all of which scale just fine in Mozilla browsers and Opera.
Actually, they scale fine in IE7 at 0 zoom when resizing the IE window.
Weird.

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
A bird in the hand makes it difficult to blow your nose.
 
P

patrick j

zoom:100%;
padding:0 0.3em;

Hi

Thank you; it works, but I don't understand why.

I've been doing some more searching on the internet but I can't find
this problem described.

I've applied it to the horizontal lists in my own web-site.

What I can't understand is why does simply repeating the "padding"
declaration in the special style-sheet for IE7 work?

Is it because it is preceded by the "zoom" declaration?

To be honest the zoom declaration is a new one on me :)

What does it do?
 
D

David

patrick said:
Hi

Thank you; it works, but I don't understand why.

I've been doing some more searching on the internet but I can't find
this problem described.

I've applied it to the horizontal lists in my own web-site.

What I can't understand is why does simply repeating the "padding"
declaration in the special style-sheet for IE7 work?

Is it because it is preceded by the "zoom" declaration?

To be honest the zoom declaration is a new one on me :)

What does it do?

--
Patrick
Brighton, UK

<http://www.patrickjames.me.uk>

Oh, the IE7 Zoom "feature". MS has admitted that it's broken, but they
shipped it anyway. Rest assured, your page is not the only one that
gets messed up with the Zoom feature. It mostly works for many things,
its image zooming works really well and the cleartype fonts are nice
but the CSS rendering+zoom combination is simply broken in many places
and there's not a lot you can do about it.

Sorry!

-David
 
B

BootNic

patrick j said:
news: (e-mail address removed)


Hi

Thank you; it works, but I don't understand why.

I've been doing some more searching on the internet but I can't find
this problem described.

I've applied it to the horizontal lists in my own web-site.

What I can't understand is why does simply repeating the "padding"
declaration in the special style-sheet for IE7 work?

Is it because it is preceded by the "zoom" declaration?

To be honest the zoom declaration is a new one on me :)

What does it do?

It just needs enough padding to keep the text from jumping out as it
is zoomed, no need to declare it again if the padding is sufficient in the
your css.

zoom: is an IE thing, been around since IE5 I think.

Setting zoom is what is making it behave.
 
P

patrick j

It just needs enough padding to keep the text from jumping out as it
is zoomed, no need to declare it again if the padding is sufficient in the
your css.

zoom: is an IE thing, been around since IE5 I think.

Setting zoom is what is making it behave.

Thank you. I understand now :)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top