Show Entries and Search/FIlter above table header are not aligned

wchrisjohnson

Hi,

Love the plugin; got it working in no time with asp.net mvc. Used it several times with RoR.

Am seeing something odd on my current project. The two DIVs that DT injects above the table for filtering/searching and selecting page size are not displaying with the correct alignment.



Show

10
25
50
100

entries


Search:




The page size dropdown is shifted up about 25% above the baseline; "Show" and "entries" are aligned below the dropdown.

The same is happening for the search textbox on the right side. "Search" is considerably lower than the textbox.

This is happening on IE7 only - FF3 is fine.

I am also not seeing the nice rounded corners on the above mentioned divs in IE7 - F3 is (again) fine.

Thanks in advance for any insight on this!

Chris

allan

Hi Chris,

It sounds like a 'float' issue with IE. Is the table constrained? I wonder if setting the width of the injected div's to being smaller would help. Certainly I would suggest playing around with the CSS and basically seeing what happens. I've not come across this specific issue before, so can't offer an exact answer - sorry.

Regarding the rounder corners - if I remember correctly the only rounded corners DataTables uses is in the full_numbers pagination - and that's via CSS that IE doesn't support. The jQuery theming does a bit of rounded corners as well actually - I'm not sure if jQuery UI does rounded corners in IE7... possibly not.

Regards,
Allan

wchrisjohnson

Allan,

Thanks for your response!

I'm not sure what you mean by constrained... the table is sitting inside a DIV and is not floated in any way. I AM using Blueprint CSS for overall page layout in this app.

I have it rendering *somewhat* better now; I added the following to my CSS:


.dataTables_length { vertical-align:middle; }
.dataTables_filter { vertical-align:middle; }


This gets me much closer. The way FF renders it is pretty much perfect.

IE7 aligns the dropdown at the middle of the DIV, but the "Show" and "entries" text fragments are still aligned with the bottom of the dropdown. I like the way EVERYTHING is aligned middle in FF. I would have thought that the text inside the DIV would get this style applied to it; for some reason not. May be an IE bug of some sort.

Chris

wchrisjohnson

FYI...

I just tried IE8, and it renders everything fine - without additional markup/css.

Figures... :(

Chris

allan

Hi Chris,

heh - typical ;-)

What I had meant by constrained was with regard to the width of the table - is it quite narrow? Perhaps the IE dev tools might indicate what is going on - but it does still sound like a float issue, primarily because I've seen that sort of thing when the elements are too wide for the width of the display area.

Regards,
Allan