Ajax and Ajax Frameworks

I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.

My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.

Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).

While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”

CSS: inline-block IE7 Hack

Thursday, October 22nd, 2009

I was demoing a recent web design to a client when I noticed that the menu items were not displaying correctly. The client uses ie7. While Firefox is my primary browser, I usually test my design in IE and Safari (and tweak if necessary). I didn’t this time because I did not think there was a difference for the CSS styles that I was using. I was wrong.

I usually use li elements for menu items:

^?View Code HTML

<ul>
	<li><a>Home</a></li>
	<li><a>About</a></li>
	<li><a>Contact</a></li>
</ul>

To create horizontal menu items, I change the display attribute to inline in my CSS file.

^?View Code CSS

li {
    display:inline;
}

For this particular design, I added a vertical divider (image) between each menu item. In order to do this, I used the inline-block attribute.

^?View Code CSS

#menu li {
	display:inline-block;
	margin:0;
	list-style:none;
	width:122px;
	height:45px;
	background-image:url(images/menu_divider.jpg);
	background-repeat:no-repeat;
	background-position:top left;
	text-align:center;
	padding:0;
}

This looks fine in Firefox and Safari, but IE7 (and IE6) only supports inline-block on elements with natural display: inline. See CSS Display declaration.

I found a hack. Adding zoom: 1 and *display: inline will make IE7 display the li’s as inline-block.

^?View Code CSS

#menu li {
	display:inline-block;
	margin:0;
	list-style:none;
	width:122px;
	height:45px;
	background-image:url(images/menu_divider.jpg);
	background-repeat:no-repeat;
	background-position:top left;
	text-align:center;
	zoom: 1;
	*display:inline;
	padding:0;
}

Next time, I will remember to test my designs in the major browsers before it is shown to the client.

Categories: CSS
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.

5 Responses to “CSS: inline-block IE7 Hack”

nathan Says:
November 7th, 2009 at 2:00 pm

That’s a great resolution for another ie f***-up.

Many thanks!

Nath
waleed Says:
December 7th, 2009 at 6:46 am

Cross-Browser Inline-Block::
http://ledomoon.blogspot.com/2009/12/cross-browser-inline-block.html
waleed ´s last blog ..Cross-Browser Inline-Block =-.
Ann Says:
December 21st, 2009 at 5:37 pm

Thank you, thank you, thank you!!!!
Prowebdesign Says:
January 5th, 2010 at 11:06 am

Yap, thanks a lot from Latvia too Great solution! Worked like a charm!
Miguel Says:
May 27th, 2010 at 3:23 am

It works!

CSS: inline-block IE7 Hack

Related posts

5 Responses to “CSS: inline-block IE7 Hack”

Home Business Ads

Categories

Archives

Tags

Comments

Blogroll