Question

I have a weird Chrome problem. I’m using the following code and style to show <div class="hoverslave"> on hovering:

<div class="hoverhome">
    <div class="...">...</div>
    <div class="hoverslave">...</div>
</div>

.

.hoverhome:hover .hoverslave {
    display: inline;
}

.hoverhome .hoverslave {
    display: none;
}

.editelement {
    /*display: inline-block;*/
    margin-left: 10px;
}

It works only in this configuration. If I comment out or even delete the .editelement block (a class “editelement” doesn’t even exist in the DOM…) .hoverslave will be shown all the time:

/*.editelement {
    *display: inline-block;*
    margin-left: 10px;
}*/

Same if I try to add the margin-left: 10px; anywhere else (div, .hoverslave, …). How can I get a margin of 10 px on the left side of .hoverslave?

Everything also works as expected when I run the application locally, but not when it’s deployed on Google App Engine. The W3C CSS Validator doesn’t show any errors.

Answer 1

Okay, I found the bug: I was using GWT’s SafeHtmlBuilder in the wrong way. The opening and closing tags were not inside one SafeHtml object.

Wrong:

sb.appendHtmlConstant("<div class=\"hoverhome\">");
sb.appendHtmlConstant("...");
sb.appendHtmlConstant("</div>");

The correct way is explained on the GWT website. My solution now uses Templates:

sb.append(TEMPLATE.hoverhome(title, actions));

I also made the mistake to load the CSS file via a tag in the host HTML page. This method is now deprecated. Using inline elements everything is working. More details on the GWT page.