XML Validation Problem In Eclipse (Cache)

XML Validation Problem In Eclipse (Cache)

14 Dez, 2014
bklatt
, ,
No Comments

Today I encountered a XML validation problem in Eclipse (Luna 4.4.1) that didn’t want to vanish. The IDE spat out a warning relating to some cached DTD data. Especially the hint at org.eclipse.wst.internet.cache attracted my attention.

So – easy thing, I thought. Cleared the project and recompiled. To no avail. OK, clear all projects and recompile. The warning grinned at me again. Did a clean launch of eclipse. Didn’t help either. You know these happy moments…

So what is the solution? Easy, if you got to know it: Go to Window -> Preferences -> General -> Network Connections -> Cache. Find the related URL and remove it. Click Apply and enjoy.

Internet-cache

Selenium IE-Driver Accessproblem

26 Nov, 2014
bklatt
, ,
No Comments

It‘ easy to fall into trouble with the Selenium driver for the Internet Explorer (IEServerDriver.exe), if not configured properly.

An often recognized error which at first glance may seem quite obscure is:
org.openqa.selenium.NoSuchWindowException: Unable to get browser(WARNING: The server
did not provide any stacktrace information)

I observed this error when trying to use RemoteWebDriver connecting to a node server on a Selenium grid. Typical behaviour in this case is: the driver is able to open an IE instance and processing just one command (driver.get(...) for example). All later commands will be neglected (driver.close() e.g.) or throw an error (like driver.findElement(...)).

The Solution is to follow all the requirements refered to on Selenium Webpage describing Internet Explorer Driver. Not a big deal but overlooked easily. The especially helpful part of the article states:

Required Configuration

  • The IEDriverServer exectuable must be downloaded and placed in your PATH.
  • On IE 7 or higher on Windows Vista or Windows 7, you must set the Protected Mode settings for each zone to be the same value. The value can be on or off, as long as it is the same for every zone. To set the Protected Mode settings, choose „Internet Options…“ from the Tools menu, and click on the Security tab. For each zone, there will be a check box at the bottom of the tab labeled „Enable Protected Mode“.
  • Additionally, „Enhanced Protected Mode“ must be disabled for IE 10 and higher. This option is found in the Advanced tab of the Internet Options dialog.
  • The browser zoom level must be set to 100% so that the native mouse events can be set to the correct coordinates.
  • For IE 11 only, you will need to set a registry entry on the target computer so that the driver can maintain a connection to the instance of Internet Explorer it creates. For 32-bit Windows installations, the key you must examine in the registry editor is HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BFCACHE. For 64-bit Windows installations, the key is HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BFCACHE. Please note that the FEATURE_BFCACHE subkey may or may not be present, and should be created if it is not present. Important: Inside this key, create a DWORD value named iexplore.exe with the value of 0.

Clearfix interfering with vertical-align

16 Okt, 2014
bklatt
, ,
No Comments

A common clearfix hack is the „Micro clearfix hack“ from Nicolas Callagher. Its main idea is to put an unvisible block element before and after each element that should be cleared by using CSS pseudo elements. This takes away the need of inserting such elements via HTML (<div> e.g.). A CSS attribute clear:both is added to the :after elements to let the hack do its work.

Normally this would work flawlessly. The Firefox browser however may have troubles if the attribute vertical-align:baseline is used for table cells and if one of these cells contains such a „clearfixed“ element. That results in a misalignment.

Example

Here is a little table with one row and two cells (dark and lighter blue). The right column contains a div element – background light gray. The expected look is this:

table-correctalignment-clearfix

(Chrome, Version 37.0.2062.120 (64-bit) on openSUSE 12.3, for example)

But the Firefox presentation is misaligned:

table-misalignment-clearfix

(Firefox ESR, Version 31.1.0 (64-bit) on openSUSE 12.3)

HTML:

<html>
  <head>
    <title></title>
    <meta content="">
    <link type="text/css" href="style.css" rel="stylesheet"></link>
    <style></style>
  </head>
  <body>
    <table cellspacing="0" cellpadding="0" border="0">
      <tbody>
        <tr>
          <td class="first-cell">
            First cell
          </td>
          <td class="second-cell">
            <div class="container clearfix">
              Second Cell
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  <body>
</html>

CSS stylesheet:

/* Problematic part */
td {
    vertical-align: baseline;
}
.clearfix:after, .clearfix:before {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}

/* Just for styling */
td {
 font-family: sans-serif;
 font-size: 24px;
 font-weight: bold;
}

.first-cell {
 width: 160px;
 background-color: #2c4870;
 color: #ffffff;
}

.second-cell {
 width: 300px;
 background-color: #61728b;
}

.container {
 width: 250px;
 background-color: #dddddd;
}

The highlighted lines show the problematic parts.

To observe such a misalignment not all cells of a row need to be formatted like this – minimum two cells with vertical-align:baseline are required and one of them must contain the clearfixed element.

How to avoid this problem

In order to avoid this problem you have two choices.

Either you replace display:table by display:block. The clearfix hack will work with the latter as well. Only problem would be that this variant doesn’t hinder the collapsing of margins of child elements of such a clearfixed block element.

Or you just set baseline alignment aside in this case. If you really need a baseline alignment, maybe you can work with some nested elements. I didn’t try that.

Sometimes you can’t avoid the problem, because stylesheet attributes of frameworks like Bootstrap are mixed with such attributes of other codings like plugins. What then? In this case, the following paragraph might be of help.

A real-life example: SyntaxHighlighter

Based on this a flaw may be observed when using the SyntaxHighlighter Evolved plugin in combination with Bootstrap-based themes within a WordPress installation. Firefox renders with a misalignment:

syntaxhighlighter-misaligned

Analysing the problem

Bootstrap uses the CSS class container in combination with the Micro clearfix hack. See this excerpt from the bootstrap.css file (taken from version 3.1.1):

... /* some lines left out intentionally */

.container:before,
.container:after,

... /* some lines left out intentionally */

.modal-footer:after {
  display: table;
  content: " ";
}

The problem is: SyntaxHighlighter uses the same CSS class for div elements contained in the table cells of the second column where the code lines appear (in the first column the numbering is situated, if used). Thus the clearfix hack is mixed-in (of course the clear:both attribute is set also, but that doesn’t matter for the issue).

Additionally the CSS attribute vertical-align is set to baseline for all cells of this table.

That together results in the observed misalignment.

Fix

Overriding the display:table attribute with display:block just for these code line elements will do it as a workaround:

.syntaxhighlighter .code .container:before {
    display: block;
}

Put this CSS snippet in a relevant stylesheet of your theme, style.css in the theme’s root directory e.g., and you are done.

Maybe you need an !important directive for the attribute display:block. But I didn’t need it – and normally it es better to avoid it.