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.

42 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!
LockeVN Says:
August 25th, 2010 at 11:41 pm

Thanks. It’ work like a charm.
Ben Edwards Says:
August 26th, 2010 at 7:51 am

Any reason you can’t float:left & display:block
Kaela Says:
October 18th, 2010 at 11:11 am

I actually did a double-take when I refreshed and it solved everything! I had a somewhat more complicated hack going on, this makes my life so much easier. Thanks for sharing!
BrowserBugs Says:
October 26th, 2010 at 11:58 am

Nice one, works like a charm regardless that it’s not compliant css with a W3C scan however we can’t have everything can we?
Ali Says:
December 15th, 2010 at 7:14 pm

Thanks so much for posting this, it worked perfectly!
Jan Says:
December 17th, 2010 at 5:35 am

Many thanks from Amsterdam!
Dan Says:
January 14th, 2011 at 11:44 pm

Thanks from Brazil then. You saved my life.
Andrey Says:
January 17th, 2011 at 7:35 am

Thanks a lot from St.Pete!
Crystal Says:
March 14th, 2011 at 1:19 am

This was majorly helpful! Thanks!
Gabiru Says:
April 4th, 2011 at 7:28 am

Thanks so much!
Best Regards
Bill Graham Says:
April 7th, 2011 at 3:19 pm

MANY thanks! Works like a charm in IE8 = Tools “incompatibility” mode too
Rashid Says:
April 17th, 2011 at 11:36 pm

made my day!
always21 Says:
April 24th, 2011 at 2:45 am

Thanks. Thanks for the solution. ^_^
georg Says:
April 27th, 2011 at 9:10 am

coooool … thanks a lot
Vanilla Cowboy Says:
May 2nd, 2011 at 12:44 pm

I cannot tell you have awesome this tip is.
THANK YOU!
I was going mad!
HNK511 Says:
May 23rd, 2011 at 1:41 am

great hack worked just fine!
Hangz Says:
May 23rd, 2011 at 1:19 pm

Thank You for this simple solution!
It works great, and you saved for me a lot of work!
rychu Says:
June 2nd, 2011 at 4:20 pm

Omg, thank you a lot pal !! Greetings from Poland
HerbyDerby Says:
June 2nd, 2011 at 7:52 pm

*whew* Saved again!
Erik Says:
June 14th, 2011 at 3:56 am

Worked great, many thanks!
jbcarey Says:
June 17th, 2011 at 3:22 am

thank you very much!
123 Says:
July 25th, 2011 at 2:17 pm

thx a lot
ezhhhhh Says:
August 4th, 2011 at 1:09 pm

Many Many thanx =)
Ehsan Says:
August 11th, 2011 at 2:05 am

Thanks …
Very Good Solution
JP Toto Says:
August 12th, 2011 at 10:15 am

Mucho thanks.
Shane Says:
August 13th, 2011 at 12:29 am

Great solution for CSS issue. Thanks.
Shane´s last [type] ..MAMP MySQL Won’t Start? – How to Fix the MySQL Server Issue in MAMP
Mike Says:
August 17th, 2011 at 6:48 pm

Beautiful.
Thanks for the hack. Works like a charm.
Ahmad Alfy Says:
September 4th, 2011 at 11:07 pm

Going to my favorites … Thanks a million!
fartarget82 Says:
September 11th, 2011 at 2:43 pm

Thanks! I really needed this.
Billy Says:
October 7th, 2011 at 2:41 pm

Unfortunately, this hack breaks the format in FF.
abderahmane Says:
October 16th, 2011 at 10:32 am

Many thanks !!
abderahmane´s last [type] ..ãÇíßÑæÓæÝÊ ÊäÔíÁ ãæÝÚÇð áãÞÇÑäÉ ÏÑÍÉ ÇáÍãÇíÉ Úáì ãÎÊáÝ ÇáãÊÕÝÍÇÊ ÇáãÚÑæÝÉ
Dock Says:
October 19th, 2011 at 7:10 am

Thanks. Even in IE9, this basic CSS property is not fixed, but your solution saved me some digging.
Edward Says:
November 2nd, 2011 at 6:07 pm

Thank you very much, really helpful
dougzilla Says:
November 4th, 2011 at 5:43 pm

This is brilliant.
Thanks a lot.
Ritesh Says:
November 15th, 2011 at 9:30 am

Thanks dude… awesome work….
kkk Says:
December 17th, 2011 at 1:33 am

That’s great, but how “zoom” works?
Kelly Says:
January 18th, 2012 at 3:34 pm

Awesome hack. Well done!

CSS: inline-block IE7 Hack

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

Home Business Ads

Categories

Archives

Tags

Comments

Blogroll