This issue only happens with menuMatic and with vertical set menus. Basically in all IE browsers the sub-nav-menu didnt show up correctly.

And another thing, when you have link tags inside li tags, you need to float the li tags in IE else you get a hidden spacer there (vertical lists only). and the menu looks very odd. This is old IE6 issue, seems like both IE7 and only IE8 fixed it. Fuck that shit.

When in doubt, float it then clear it. This triggers hasLayout behavior and stuff gets fixed by itself. With that issue done i had another issue when the menu looked out of place. In order to fix that you need to open the menuMatic source file and look for fixHasLayoutBug: false, and change it to true.

On the developers site it works with it set to false, i really have absolutely no ideea why it gets triggered in my projects (2 out of 2 projects) and not there and to be honest i really cant be arsed to look into it. The CSS on both sites regarding to the menu matic is quite identical. I would have switched to something based on jQuery but unfortunately there isnt anything like that currently on the market., or from what i could find. Going with the noConlict() thing really annoys the hell out of me

In sum if it looks borked in IE then a) float the links b) float the li tags and c) set fixhaslayoutbug: true, in the menuMatic.js file. And if you still have issues in IE8 because thats where I had the main issues, then you need to do the following. Look where your vertical navigation menu is placed and make a new CSS and load it only for IE8. in that css go to #subMenusContainer and at the top: property modify it so it looks just right. If needed you can also play with the .smOW class at the margin property in the same CSS below are a few images with the before and after

In my example I set the #subMenusContainer top: property to 222px and the .smOW margin-left to about 20ish px

IE8 Before

IE7 Before Has Layout

This post may be something very common and very known, however not everyone knows these, so this post may be useful to someone.

Here is an entire list for this

• lte = Lower Than Or Equal — lte IE6 means that will be loaded by IE6 and lower versions like IE5.5 / 5 and so on and so forth.
• lt = Lower Than — lt IE6 means that only lower versions of Internet Explorer 6 will read that part of the code such as IE5.5 / IE5 / IE4 and so on and so forth.
• gte = Greater Than Or Equal — gte IE6 means that browsers versions higher than 6 or equal to 6 will load that code, such as IE6 / IE7 / IE8 and so on and so forth.
• gt = Greater than — gt IE6 means that browsers versions higher than 6 will load the code such as IE7 / IE8 and so on and so forth.

The most useful part is the ability to load information that is not read by IE browsers at all, you could do something very nice, for example if you wish to drop IE6 support your stylesheet and JS includes will look like this:

The code above will only load the files for IE7+ and all other browsers. A live example of this situation is my own website, which does not support IE6.

Regards

After working on the google shortcuts for a while, i decided to open up IE 8 and see if the application works or not. I was surprised and started to do the old alert("hax") thing every dozen lines. The problem is with the $(window).keypress(function(e){}). It seems that IE doesnt understand at all the $(window) property at all when it comes with keypress/keydown/keyup events.

After some research, this is a known issue from IE5 days, which is quite weird that jQuery didnt fix it in a way so it works with $(window)

However i did check the width/height properties and both values return different values.

jQuery

I did look over this issue over Google but I couldnt find any information about it. Really sad you know.

Did it happen that when you use an animation such as fadeIn()/fadeOut() on a LCD screen, that has windows cleratype on (this happens automatically in windows vista+ but can be set on and off in windows XP), on IE (all versions), the text is not antialised anymore. This is due to the filter attribute IE browsers use to make the cleartype/stuff.

The solution is relatively simple, like putting a function callback on the fade in()/fadeOut() such as:

JQuery Code

It’s not a perfect solution, and it may be a bit laggy and you can still SEE THE TEXT BEING CLEARTYPED, but at least it wont stay without cleartype and look like shit. Also this is the only way to do it until jQuery incorporates it’s own fix to counter IE‘s behavior.

Did you know that IE6(and only IE6, IE7+ doesnt have this issue) has a weird UL/OL bug ?

If not read on

Lets say you want to make a vertical list of items that are linkedable like this

In all browsers except IE6 the list will look OK, however IE6 has a peculiar thing, because you press ENTER and you put the list items each on a new row, somehow IE6 interprets that space as a white line, and you will end up with THIS

THE HORROR!!!!…

Well there are multiple ways to fix this issue, from involving Huge javascript codes to doing some very basic things, and the most basic method of it all is to write those links as follow:

The “wonders” of IE6 …

If you have questions, post them in the comments and i will answer as soon as possible

Everyone loved valign=”middle” on tables… well life just got better with jQuery. This plugin works flawlessly however make sure that both the element itself and the parent element do not have any top/bottom paddings, else please modify it using the .outerHeight() property that takes into consideration the padding/border of those elements. Tweak and use as necessary.

the JQuery

You can get the benefits of valign=middle no problem.

So just put the jQuery framework script then this script above and call the elements you want to be valigned=middle by using this

Also another VERY NIFTY thing to do is, in order to prevent the user from seeing the javascript process (since first HTML is loaded, then CSS file is loaded, then any images are loaded, then JS is processed) you can do this.

First you need an .outerBox that encompasses the Box element, and then you need to have the box element with a declared height, like #box { height: 300px;}. This workaround is only good for IE 6 since that sucks donkey balls, and has a JS rendering engine from 1000AD. however depending on the amount of content being displayed (like entire columns) IE7 which appeared in 2000AD may require this fix also. Other browsers are OK so this is BS

CSS:

Javascript:

End of story.

And for the other more compatible browsers you can put this in another JS file. The previous one was inserted in the HTML using conditional comments <!--[if IE lte 7]> <script src="./../js/biteMe.js" type="text/javascript"/><![endif]-->

$("#box").vAlign(); and just use Conditional comments to put the IE specific things in so they wont see them, and since you are linking 2 different JS files, (again with conditional comments) you script WONT JAM.

Complex solution for an ancient problem.

Cheers