IE7 Text Zoom breaks inline lists

After poking around for awhile on the web, I finally found a fix to an issue that I’ve been unsuccessfully battling for a long time. If you set up a horizontal list by setting the display of the li tags to inline, when you zoom the text in IE7, it doesn’t expand properly. It’s like the text expands but the li tags themselves remain the same size, causing the text of each list item to overlap. I found the solution here.

The fix is to proceed your display:inline declaration with display:inline-block. Your selector must also be identical. So, something like this:

.horzMenu li{display:inline-block}
.horzMenu li{display:inline}

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s