020 555 1111
  • Old fashion, modular, procedural PHP plus some scaffolding techniques to allow it to mimic MVC simplicity.
  • A quick reference to help you find in PHP maze what needs to be done and how to do it.
  • Learn a PHP Object Oriented Programming by building a live discussion forum application.
  • MVC - Model View Controller - real life, easy reference and application.
This product has options, take a look at them and select ones you like the most.
Options are displayed under image section.

Horizontal misalignment of buttons in IE
[jQuery UI problems]

 Problem with horizontal alignment of buttons in IE, if one of them is <button> and the other <a> based .

 

There are some differences between css of jQuery UI 1.8.16 and 1.8.18.

Not much changed, but changes can make you tear your hair out trying to fix problems with alignment of IE7/8/9 buttons.

 

See #397:

/* WAS in jQ UI 1.8.16: */
overflow: visible; 

/*IS in jQ UI 1.8.18*/
overflow: hidden; *overflow: visible; 

 

Supposedly it was done to deal with:

"the overflow property removes extra width in IE"

But in reality it gets you this:

IE7:

IE8:

IE9:

 

 

 

Here is how to fix it.

Fix for IE8 / IE9

find line # 397 in jQ UI your theme css and change back:

overflow: hidden; *overflow: visible;

to:

overflow: visible; 

 

OR - in your IE8/IE9 specific stylesheets add this:

.ui-button { 
    overflow: visible !important;
}

 

 

Fix for IE7

  1. step for IE8/9 is needed here as well.
  2. some extra css for IE7
    • horizontal alignment
      align in same horizontal level <button> tag powered button with <a> tag based buttons
      please note: dot in front of "display", this hack makes this property readable by IE7 only
      another way would be to put it into IE7 only stylesheet file (dot in not necessary)
      span {
          .display:inline-block;
      }
    • extra height
      since IE <button> has one pixel extra on top and botton, you may use this class to fix it;
      class should be added to other buttons on same level,
      you can use addClass() command to do it;
       consider using  this wrapper class (opens in separate window) to deal with task of adding buttons - in some cases (dynamic buttons) it may come handy
      .IE7pad {
          .padding: 1px 0px 1px 0px !important;
          .margin-top: 1px !important;
          .margin-bottom: 1px !important;
      }
    • get rid of ugly border
      please note: dot in front of "display", this hack makes this property readable by IE7 only
      another way would be to put it into IE7 only stylesheet file (dot in not necessary)
      button {
          .filter: chroma(color=#000000);
      }

This is what you will get: