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.
IE
But this is from FF.
FF/Chrome(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.
jQueryJavaScriptCSS

Avatar of undefined
Last Comment
dkim18

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Rainer Jeschor

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
SOLUTION
COBOLdinosaur

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
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?
COBOLdinosaur

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&
Rainer Jeschor

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?
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
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
Rainer Jeschor

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.
COBOLdinosaur

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&
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
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?
Rainer Jeschor

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).
COBOLdinosaur

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&
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
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...
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
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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
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

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.