Link to home
Start Free TrialLog in
Avatar of dkim18
dkim18

asked on

JQuery tabs with data table looks different between browsers

Hi Experts,

JQuery tabs with data table looks different between browsers.

This is from IE which is correct.
User generated image
But this is from FF.
User generated image(There is a big blue space between tabs and data table.)
(Chrome also works this way.)

I thought JQuery acts same among popular web browsers.

What am I seeing this two different looks among web browsers?

thanks in advance.
ASKER CERTIFIED SOLUTION
Avatar of Rainer Jeschor
Rainer Jeschor
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of dkim18
dkim18

ASKER

I used w3c markup validation service.
However, this is a intranet web app, so I get this error:
500 can't connect to xxx.xxxxxxxxx:80 (bad hostname 'xxxxxxxxx')

So, I used this link instead:
http://validator.w3.org/#validate_by_upload 

and I got this result:
92 Errors, 4 warning(s)

Do I need to correct all 92 errors?
Do I need to correct all 92 errors?

Only if you want to have reliable, stable code that behaves as expected because it adheres to the standards.  An HTML error or CSS error that seems unrelated to a problem can effect the way the Document Object is arranged, and the document object is where the rendering comes from.

Browsers will do the best they can to try and render invalid code, but if code has errors or is not to standard, then it can break at anytime in any browser.

Cd&
Hi,
for having the best chance (and a stable fundament) for producing a similar ui for different browser the answer is yes.
Sometimes one error can cause other errors so perhaps you will have to fix only a few.
What errors/type of errors did you get?
Avatar of dkim18

ASKER

First of all, there was only <html> tag if I view source from the browser, so I added this line:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 



I am fixing those errors, but these are errors:

document type does not allow element "LINK" here
start tag for "LI" omitted, but its declaration does not permit this

I see a lot of this error:
required attribute "ALT" not specified

end tag for element "TITLE" which is not open

character "\" not allowed in end tag

 end tag for element "HEAD" which is not open

 an attribute value must be a literal unless it contains only name characters

 character "+" not allowed in attribute specification list

 character data is not allowed here

 element "ELEMENT" undefined

element "NAME" undefined

 element "CHECKED" undefined

element "BODYISHTML" undefined

 element "FORMPARAMS" undefined

 element "PARENT.DOCUMENT.FORMS.LENGTH" undefined

 end tag for element "SCRIPT" which is not open

 document type does not allow element "IFRAME" here

end tag for element "BODY" which is not open


end tag for element "HTML" which is not open
Hi,
and thats the biggest problem: all the END tag errors just show that your DOM is missing one END tag at the beginning, therefore the whole DOM is not complete.
Basically the underlying structure has been destroyed. Probably junk in the jquery that is not generating code compatible with the ancient 4.01 transitional standard.  Or it may be that the code is IE specific because the developer is used to the a M$ environment and can't cope with open source.

All just speculation.  Without seeing the code or a link it is hard to say if there is any quick re-alignment that is going to get the code closer to standards.

Cd&
Avatar of dkim18

ASKER

I took care of all the errors (just two warning though) that were produced by Markup Validation Service (w3c), but the issue is still exist.
What would be the next step?
Please attach your HTML and if existing custom javascript files and your css files or a link to your page (but as you mentioned its an intranet site it would probabely not be accessable).
Well we still have 3 problems.  The styling is being controlled in script.

We can't see the code, so there is no way for us to fix it.  

You still have that very weak HTML4.01 transitional doctype that modern browsers don't like.

So the big blue blob is still there.

Let's try replacing:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

with:
!doctype html>
<html  lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" />

Cd&
Avatar of dkim18

ASKER

Replacing this didn't work.

<!doctype html>
<html  lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" />

I will try to attach files...
Avatar of dkim18

ASKER

I cleaned up a bit and attached all files.
Plz place those js and css files and appropriate place by reading validate.html file.
validate.html
jquery.dataTables.columnFilter.js
jquery.dataTables.js
jquery.dataTables-themeroller.css
jquery.qtip-1.0.0-rc3.min.js
jquery-1.7.2.js
jquery-ui-1.8.21.custom.css
jquery-ui-1.8.21.custom.min.js
Avatar of dkim18

ASKER

Hm...validate.html works in EditPlus2 editor browser(probably old web browser), but not in IE9/FF. I will try to make it working in IE9/FF.
Avatar of dkim18

ASKER

Ok, I have narrowed down this issue and found out our existing code(other than jquery datatable code) causing this in FF/Chrome.

The below code is part of the page with jquery table and there is is navigation bar on the left hand side and if I remove this line,
<script language=JavaScript src="/abc_JQuery/javascript/menu.jsp"></script>

the issue is gone.(I don't see the big blob anymore.)

So, I thought FF/Chrome doesn't like something in menu.jsp page and I made menu.jsp empty, but the big blob still there. Very strange...
If I put this <script language=JavaScript src="/abc_JQuery/javascript/menu.jsp"></script> some where else, the issue is gone again.(but I can't, since we are using Struts tile.)

Do you think something else is causing this?
...
...
	  </div>
	</div>
	<div id="navbar">
		<div id="menu">
			<ul id="menuList">				
                            <script language=JavaScript src="/abc_JQuery/javascript/menu.jsp"></script>
			</ul>
		</div>
		
	</div>
	<div id="content">
...
...

Open in new window

Avatar of dkim18

ASKER

Ok, I narrowed down and found the issue in one of css file.

xxxx{
float: left

}

was causing this and one non-IE browsers css. I don't know exactly why that float: left was causing the big blob between tabs and data table, so I may ask question in separated question.
Thanks all anyway.