Internet explorer mouse movement shifting web page table content

HTML & CSS
,
1

Hi All,

I would like to ask for an advice how to solve problems related to properly displayed web page table elements in Internet Explorer (versions higher that 8). Namely after loading the web page all its contents is displayed properly. However after moving mouse the table elements are being shifted to the web page right edge and they are remaining in this location for approximately 1 minute. After this time the table elements come back to their previous position. The situation repeats with each mouse movement. As I am newbie in web page creation I would looking forward to receiving any ideas how to resolve it.
Cheers,
JaneElle

2

Hi,

We would need a link to the page to debug further but it sounds to me as though you don’t have a doctype or you have an incorrect doctype and are triggering quirks mode in IE.

Add a correct doctype and also this meta tag into the head of your page just to be sure.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

If that isn’t the issue we would need to see an example :slight_smile:

1 Like
3

Hi Paul,

Thank you for the anwser. Unfortunately it is not possible to send link to the page. The problem appears only with Internet Explorer while moving mouse on the screen or refreshing the web page. The page which contents is moved to teh right edge has the following structure (I skipped some basic tags html, head and the code:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
<meta charset="utf-8"/>

is included in the base page from the page causing problems inherits):

The page is:

<body>
	<wicket:extend>
		<h4 wicket:id=“name” style=“text-align: left”>Simple Page</h4>

		<div wicket:id=“firstRowContainer”>
			<table class=“datatable”>
				<thead>
					<tr>
						<th class=“column1”>Column 1</th>
						<th class=“column2”>Column 2</th>
						<th class=“column3”>Column 3</th>
						<th class=“column4”>Column 4</th>
						<th class=“column5”>Column 5</th>
						<th class=“column6”>Column 6</th>
					</tr>
				</thead>
			</table>

			<div wicket:id=“secondRowContainer”>
			<!— second single row —>
				<table class=datatable>
					<thead class=“thead-empty”>
						<tr>
							<th class=“column 1”></th>
							<th class=“column 2”></th>
							<th class=“column 3”></th>
							<th class=“column 4”></th>
							<th class=“column 5”></th>
							<th class=“column 6”></th>
						</tr>
					</thead>
					<tbody>
						<tr class=“table-spacer”>
							<td colspan=“6”></td>
						</tr>
						<tr class=“table”>
							<td class=“column 1”><p wicket:id=“tableName”>Table Name</p></td>
							<td class=“column 2”><a wicket:id=“firstButton”>First Button</a></td>
							<td class=“column 3”></td>
							<td class=“column 4”><p wicket:id=“time 1”>00:00:00</p></td>
							<td class=“column 5”><p wicket:id=“time 2”>00:00:00</p></td>
							<td class=“column 6”><input wicket:id=“active” type=“checkbox”></td>
						</tr>
					</tbody>
				</table>
				<!— END OF TABLE  —>

	    <div wicket:id=“modal”></div>
	</wicket:extend>

</body>

Thank you in advance your advices.
Cheers,
JaneElle

EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.

4

Hi,

I’m not sure what that code is you posted but its not html.

<wicket:extend>
		<h4 wicket:id=“name” style=“text-align: left”>Simple Page</h4>

		<div wicket:id=“firstRowContainer”>

‘wicket’ is not part of html so I’m not surprised that you have rendering issues. You are also using the wrong type of quote marks in the html. It should be " or ’ not “ and ”.

Where did you get this code from?

Anyway html on its own is not enough for us to debug because its CSS that sets the display so the issue would be the way that css interacts with your html. Unless you can get a working copy or example then we are unlikely to find a solution. I still believe that you are triggering quirks mode but you say that you have the meta tag s in place.

Can you send a screenshot in IE and open the developer tools and see what mode its running it. If this is on an intranet then you will need to make sure that the meta tag is in the servers custom headers.

5

You’re using the Apache Wicket library but as Paul said we can’t do anything currently. We can’t get a usable copy to test.

Would it be possible to give us a reduced test case and upload it to codepen or jsfiddle? Something we can mess around with and play with. Perhaps while you’re doing your reduction test case, you may find what causes this issue (e.g. when you remove something, it magically starts working.)

6

Hi Paul,

I was trying to explore the problem more on my own and I would like to get some advice regarding including meta tag assuring compatibility with IE 8. The thing is that my html code contained meta tag:

meta http-equiv=“X-UA-Compatible” content=“IE=8”

However it did not work because before the line with meta tag some javascripts had been running by the application in response render method:

public void renderHead(IHeaderResponse response) {
    super.renderHead(response);
    response.render(CssHeaderItem.forReference(new CssResourceReference(BasePage.class, "CSSPage.css")));
}
So that the line with meta tag conforming the web browser compatibility had been placed further,  not at the first place, so in consequence ignored.

I was trying to put some javaScripts lines in the code which were supposed to put meta tag at the beginnig of the html script:

$(document).ready(function(){
var meta = ‘’;
document.head.insertAdjacentHTML(‘afterbegin’, meta);
});

It did not work either.

I would be grateful for any advice how to improve the code to make it compatible with desired web browser version: IE 8.

Cheers and Thanks,
JaneElle

7

Bear in mind I know nothing about the system you are using but it seems strange that you cannot simply add a meta tag in the place that it needs to be.:slight_smile:

In the end all a browser sees is html and that is what we are dealing with here and whatever system you are using should be able to create a valid html document.

The IE edge meta tag must be the first meta tag in the page and before any other content such as scripts otherwise it won’t work properly.

You cannot insert the tag with jquery on document ready because document ready is after the page has loaded which is too late for the meta tag to work.

If this “wicket” is some sort of CMS system then at the very least is should be outputting a current valid doctype and then you would not need the IE edge meta tag anyway (unless you were on an intranet as mentioned before).

You can also supply the meta tag in the server http headers as mentioned in my previous post or in the [htaccess file][1] - which looks like the solution you will need to follow.

More info:
https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible

Sorry to be so vague about your system but in 15 years I’ve never heard of ‘wicket’ other than at a cricket match ::slight_smile:
[1]: http://stackoverflow.com/questions/15443998/x-ua-compatibility-with-http-header

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.