Tricky IE CSS problem - gurus only please

[Daemach]

OK, it's time to try the experts :)

I've been doing most of my development work in Firefox because of Firebug. Then, when my projects are fully debugged, sleek and refined I load them in IE and I am humbled without fail. This last project was/is especially painful ;)

Please visit this site: IdeaMill: tableFilter

This demo is a couple of months out of date, unfortunately, but it does demonstrate the specific problem I need your help with quite well. When you click on the menu link in firefox the menu looks ok - suggestions are always accepted with gratitude, btw. In IE however, there are large gaps between the menu items, likely involving the "separator" class. I've tried a number of things to resolve it but I haven't had much luck. Can you help me come up with some cross-browser CSS to solve this?

BTW, the menu is initially aligned incorrectly - that's fixed now, but the fix is in the not-quite-ready version. Just hit reload and you should be ok if you're caching images.

Thanks in advance...

[drhowarddrfine]

I've been doing most of my development work in Firefox because of Firebug.

You should be doing it in a modern, standards-compliant browser. Firefox is the perfect choice. Firebug is a bonus.

I load them in IE and I am humbled without fail.

It is IE that is humbled and strains to act like modern browsers.

I don't see any difference between FF and IE6/7 and I don't see any separator class.

[Daemach]

There is definitely a difference - open the "menu" by clicking on the menu link in the paging row. In IE 6/7 I see gaps in the menu, unlike in FF. Also, in FF I have nice borders on my table rows and padding is different.

Since there may be multiple menus in the table and colors may differ the separator class is created dynamically - view the CSS in firebug from firefox to see it. It ends up looking like the following:

.seminarList_p_menu li.separator {
border-color:#700000 rgb(152, 0, 0) rgb(152, 0, 0) rgb(112, 0, 0);
border-style:solid;
border-width:1px;
height:3px;
line-height:3px;
}

Oh yes, make sure you click the GO button first... I forgot to mention that the first time. A lot of the elements are created dynamically.

You should be doing it in a modern, standards-compliant browser. Firefox is the perfect choice. Firebug is a bonus.
It is IE that is humbled and strains to act like modern browsers.

I don't see any difference between FF and IE6/7 and I don't see any separator class.

[drhowarddrfine]

Double check the link you gave us. There is no "menu link" or "paging row".

[Daemach]

I'm sorry - that link is to a demo of one of my jquery (javascript) plugins that adds multi-column sorting, filtering and paging to any simple table with one line of code. You have to poke the GO button to see the menu and paging row because they don't exist yet. Note to self: improve that demo page...

Hit the "Go" button to see it build, then you will see the menu.

More info here: http://ideamill.synaptrixgroup.com/?page_id=16

[drhowarddrfine]

I'm still not sure I'm seeing the gap. Do you mean vertically between rows?

In your CSS, change <style> to <style type="text/css">

[drhowarddrfine]

Sorry, I'm just having a heck of a time finding that area in the markup. I guess it's generated by javascript. I do see 2px padding or margin around some <li> items in there but they don't show in FF. Set those to zero and see what happens.

IEs dev toolbar is not at all helpful with this and I'm unable to save the page in a way that I can edit it.

[Daemach]

This is one of the hazards with dynamic CSS :/ I'm calculating complementary colors on the fly for the 3D effects in the menu, then creating the CSS rules that need to use those colors within the document's embedded stylesheet using javascript. That's why you're not seeing any of this in the source. That tablefilter plugin is meant to work with any table, regardless of layout or style so it has to generate a great deal of the structure after it sees what it has been handed. The code used to launch the demo on that page is as simple as: <input onClick='$("table").eq(0).tableFilter();' type="button" value="Go"> That javascript means "find me all the tables on the page and put them in an array, then grab only the first table and pass it to the tableFilter plugin". TableFilter handles the rest. Specifying the first table isn't really necessary - I stuck that in there to show someone how they could target a single table on a page with 4 tables without using an element ID by using the .eq(n) function.

The easiest way to see the dynamic CSS output that I've found is to use the CSS tab in firebug. Just choose the htm file from the source list rather than one of the css files.

Sorry, I'm just having a heck of a time finding that area in the markup. I guess it's generated by javascript. I do see 2px padding or margin around some <li> items in there but they don't show in FF. Set those to zero and see what happens.

IEs dev toolbar is not at all helpful with this and I'm unable to save the page in a way that I can edit it.

[Daemach]

The IE dev toolbar does actually show those styles. There is a trick, though:

1. Close down the toolbar
2. shift-reload the page
3. hit the go button to regenerate the table
4. open the ie dev toolbar

You should see the dynamic styles such as .p_menu LI, .p_menu LI:hover and .p_menu LI.separator near the bottom if you view: CSS selector matches. You can also find the table in the DOM tree and view: source elements + style

[jhardman]

IE wraps text in some cells, making some rows thicker than others. On the other hand ff does not. Is this what you are seeing?

Jared (not quite a guru)

[Daemach]

That might explain the strange padding. I'll play with that. Thanks for the response.

IE wraps text in some cells, making some rows thicker than others. On the other hand ff does not. Is this what you are seeing?

Jared (not quite a guru)

[drhowarddrfine]

I'm gone all week except for spot checkins. One thing I forgot to have you try is adjusting line-height for the drop down. This is part of an IE bug.