Internet Explorer and absolute positioning problem

Vaadin 6 / 7 / 8 Framework UI
1

Greetings everyone. I hoping someone will have a workaround for me.

In our Vaadin application we have several modal windows. The first component added to the content of any of these windows is v-button-link component which brings up help when clicked. We don’t want this help link taking up an entire row so I worked out a way for it to float to the right of the next top-most component.

This solution works great in every browser except all versions of Internet Explorer. In IE the link is not there. I’ve traced the issue to the position: absolute. The component has a style name of “help-topic” and the CSS is shown below. I had played with z-index but no value made any difference in IE. Any ideas?

.help-topic .v-icon {
background: url(help.png);
background-repeat: no-repeat;
width: 18px;
height: 18px;
}

.v-window .help-topic {
position: absolute;
float: right;
right: 18px;
top: 25px;
}

Thanks
James

2

Some versions of IE have trouble with absolute elements (your button) relative to absolute elements (the sub window) and put them back to the root of the document (look if didn’t get thrown at 18px from the top of your element)

3

That’s a good thought but the button isn’t being positioned over the root document. Just to be sure I added a z-index: 30000; just in case it was “behind” another component for one of my tests.

4

When you use IE developer tools, where does it says the button really is ?

5

I thought I’d posted a response but it seems to have vanished. Weird. I probably didn’t hit save.

As far as the XML is concerned it appears to be in the right place. None of the CSS styles are overridden. They match the properties specified in the first post.

I’ll attach an XML file containing the vi-window source. Search for “help-topic” to see the location of the button. For readability I replaced the remainder of the contents with

…
.
12267.xml (1.85 KB)