logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 09-01-2011, 01:53 PM   #1
WebGirly3
WebGirly3's Avatar
 
Join Date: Aug 2011
Posts: 34
Default TH header not aligning with TD cells in IE

http://www.gulfwebservices.com/clien...ial/index.html

I have a jQuery Datatable and my header th cells are not aligning with my td cells in Internet Explorer. I have played around with the CSS for multiple days but I cannot figure out what the solution is?? I turned off sorting and the problem got even worse; the gap at the end was one cell larger than the row below! I don't know what to do or how to fix it because I have tried everything that I would know how to do and I've spent countless hours on what seems to be a silly problem.

It looks great in Firefox but there's something that IE really doesn't like here.

I've searched the forums high and low but nothing addresses my specific problem. I have made very little modifications to the tables. In fact, before I made ANY mods, I just entered my data and this problem started happening. Can somebody that knows more about this table please help me????
WebGirly3 is offline   Reply With Quote
Old 09-01-2011, 06:58 PM   #2
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Lines up perfect in my IE8 and 9
domedia is offline   Reply With Quote
Old 09-01-2011, 07:06 PM   #3
WebGirly3
WebGirly3's Avatar
 
Join Date: Aug 2011
Posts: 34
Default

In my IE browser & and on my customer's browser, this is what you get:

And this isn't the worst of it. Depending on the content of the cells below, sometimes it creates a 1 inch gap. I don't understand this.
WebGirly3 is offline   Reply With Quote
Old 09-01-2011, 08:39 PM   #4
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

version? (it matters, a lot)
And which browser and browser version is your client using?
domedia is offline   Reply With Quote
Old 09-02-2011, 01:33 AM   #5
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

some parts of your headers use <p>tags you should make them uniform. the second header throws out because of the amount of text throws it onto 4 lines (on my screen) this is one of the things that made me hate tables. if you set widths for your headers ,or shorten the text a little in that header. either should help i think. Did i mention i hate tables
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is online now   Reply With Quote
Old 09-02-2011, 02:35 AM   #6
ranjan
 
Join Date: Dec 2004
Posts: 405
Default Must be compatibility mode

Such type of trouble happens when IE is set to compatibility mode by the user.

Either OPs or Domedia's IEs are set to compatibility mode and hence one of sees the problem and the other doesnt.

Sorry I dont have IE at home and hence cannot verify either way.

However

Code:
alert(document.documentMode);
will alert the mode IE is currently using

Using

Code:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
forces IE into standards mode, irrespective of users setting
ranjan is offline   Reply With Quote
Old 09-03-2011, 07:39 PM   #7
WebGirly3
WebGirly3's Avatar
 
Join Date: Aug 2011
Posts: 34
Default

I am using IE 9 so the browser version doesn't seem to play into the problem.

Thanks for the suggestions though. I actually contacted the original programmer of this datatable and asked him for help.

He said the issue is with how DataTables are calculating the "optimum" column widths to use for the table. When it does this, it tries to find the longest string in each column and sum them all up to create the "worst" case table - however what it should really be doing is using the width of the string rather than the length. For example "mmm" is wider than "iiii"! I did put this into a version of DataTables but it was just so slow in IE that it was unusable.

I don't really understand but he gave me a way to "work around" this issue. He said to add the code below to my DataTables initialisation:

Code:
"aoColumnDefs": [
          { "sContentPadding": "mmm", "aTargets": ['_all'] }
          ]
I'm still working on it so I'll let you know how it goes in case anyone else runs into this issue.
WebGirly3 is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 10:49 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com