Tabsheet tabs not displaying properly in IE8 after upgrade to 6.7.1

Flow
1

Hi,

As first time poster, I hope this ends up in the correct category.

We have done an upgrade from version 6.5.1 to 6.7.1 (we want to start using the TreeTable component). So far the existing code seems to be working just fine codewise, but unfortunately the tabs of our tabsheet now look “garbled” in IE8 after the upgrade - see attached image. In Firefox and Chrome it looks fine, but due to company policy it needs to work in IE.

We have an import of the Reindeer theme in our styles.css with no added styles of our own, and it is still used as far as I can tell. I know that Chameleon has been introduced, but since we import the Reindeer theme, shouldn’t this work as before, or are we missing something here?

Please, ask away if more info is needed.

Thanks in advance!
11992.jpg

2

I’ve not experience this, so I don’t know if any of these suggestions are helpful and/or useful.

  1. Have you cleaned your browser cache? That looks quite alot like the css sprite image might have changed in the new release, but that IE is displaying the old image.

  2. Is IE8 or IE9 in “Compatability mode”? Sometimes that can screw things up. IE has a really (really, REALLY) irritating “feature” where by it will render all sites/applications as IE7 - EVEN if you say it is compatabible with IE8/IE9 (via the http metadata) see http://phrogz.net/ie8-intranet-compatibility-view , http://stackoverflow.com/questions/2742853/force-internet-explorer-8-browser-mode-in-intranet

3

Ok, so I did some more investigating and found that the Reindeer theme folder had not been copied into our project for whatever reason. I copied the 6.7.1 version of the Reindeer theme into our project - webapp/VAADIN/themes/reindeer - and the tabsheet tabs were still garbled (I emptied the cache of my IE8 to have a clean slate). I then copied the 6.5.1 version into our project and the tabs looked ok. I then compared the Reindeer “root” style sheets in the two versions and found that there are some differences in a few positions that have to do with the vertical-sprites.png file, which also appears different between the two versions. An example:

6.5.1
.v-tabsheet-tabitemcell {
background: no-repeat;
background-image: url(common/img/vertical-sprites.png);
-background-image: url(common/img/vertical-sprites-ie6.png);

background-position: left -1214px;
padding-left: 3px;
}

6.7.1
.v-tabsheet-tabitemcell {
background: no-repeat;
background-image: url(common/img/vertical-sprites.png);
-background-image: url(common/img/vertical-sprites-ie6.png);

background-position: left -1174px;
padding-left: 3px;
}

I still don’t know why the 6.7.1 version is not working for us, but we need it to work if we want to be able to use the TreeTable component, and I’ll keep investigating. Does anyone have any idea as to why these positions and the sprite image have changed? Knowing why might help us solve the issue. Thanks!

4

Sound like you still have an old version of common/img/vertical-sprites.png lying around somewhere. The positions of the images can occasionally change when an image is altered or an image is added. That is one reason you need to ensure that you always update all of the theme to the same version as the servlet (vaadin.jar).

5

Thanks for your reply! Based on what you said I kept looking and managed to find that our war-file still contained the old version of the jar file due to a problem in our build scripts. Once that was corrected it now works. It felt like I had looked everywhere but there, cleaned browser caches, cleaned the local server and so on. Sometimes you need someone to jog your mind in a new direction. Thanks for that, and thanks for the explanation!

6

Even I am facing the similar kind of issue after migrating from Vaadin 6.8.5 to Vaadin 7.
I have checked the War file if there is any old jar of Vaadin 6 in the classpath, but in vain. Can you please give some pointers from where I have to start to debug this issue?

BTW, I am using the existing Log4j(I believe it is an older version than the one supplied by Vaadin). Could this be a possible hiccup?

Thanks.

7

I have figured out the solution for this, the problem is with the classpath while compiling the vaadin jars(vaadin-client-7.0.0). once this was added the it started working