VML Graphics - fixed(?) in IE
Perils and problems when adding VML to a web page
VML graphics can only be seen in IE5.5 and later running on Windows PCs. A large number of users (between 20% and 45% [at end November 2009] depending on which statistics you look at) do not use IE, those users will see a down-level poor quality image if you have allowed that option, or nothing at all.
VML graphics are produced by using text-boxes, WordArt, and any other object produced using the FrontPage drawing toolbar. Due to the restrictions outlined above VML should never be used in a publically accessible web site.
WordArt and ShapeArt
ShapeArt uses Absolute Positioning, which will result in the objects "moving" as the browser is resized or the browser font-size changed. The shapes may also "move" if the page is edited. This can be fixed for Internet Explorer - see below
VML Text boxes
Hyperlinks placed in VML text boxes may not work at all in some browsers, particularly non-IE, and probably the older versions of IE.
Sometimes the down-level image is saved without the text (if a style sheet is used that effects the text), or with a different style of text - a blank rectangle or a box with half the txt missing may be displayed in non-IE browsers.
Text Boxes are also Absolutely Positioned. The problems exist for text-boxes as for ShapeArt, but additionally there can be display problems if there is any text in the text box and the browser font-size setting is changed, or if the browser viewport size is changed.
The table below shows how VML graphics appear when placed in a table. Resizing the browser, and/or adjusting the browser setting for font-size, will show some of the problems associated with using VML. Note that in this page resizing the browser or changing the font size has little effect on the position of the text box or shapeart, but changing the font size does affect the display of the text inside the text box - making the font larger may cause the text to be cut off at the bottom.
However, in other browsers that is not the case - they see an image of the text, which may or may not be complete - but the image will not resize.
| Dolores rebum at magna est commodo. Te dolor sadipscing sadipscing sit voluptua lorem. |
This is a table cell containing a little text. |
Dolores rebum at magna est commodo. Te dolor sadipscing sadipscing sit voluptua lorem. |
| The next cell (to the right) contains two pieces of ShapeArt - an arrow, and an Oval.
|
|
A relatively positioned <div> has been placed inside the cell, and the ShapeArt placed inside this <div>. This keeps the shapes in place in Internet Explorer - but when viewed in other browsers, the images move - in this case a long way down the page.
|
|
The strategy of placing the shapes in a relatively positioned <div> fails in browsers other than Internet Explorer because FrontPage positions the downlevel images with respect to the top left of the page - not with respect to the <div>. When viewed in a browser, the browser uses the coordinates with respect to the <div>, placing the image lower down the page and to the right of its correct location.
|
|
|
The Word Art is not absolutely positioned, so "behaves" in all browsers.
|
In the cells on the left are a WordArt graphic, and a Text Box. The Text Box contains a link (to this page).
The <div> has been outlined in red.
|
|
The text box has been placed in a relatively positioned <div> to keep it in place.
However, this fails in browsers other than Internet Explorer for the same reasons as above. In other browsers the shapes and text box will be obscuring text lower down the page.
|
This page has been designed for Internet Explorer 6 running in Quirks mode, with viewport set to 800x600, and Normal text size. Other browsers (Netscape, FireFox, Opera etc.) may display the VML objects out of place initially. Adjusting the text-size and browser viewport will bring things back into shape - which is the number one problem with VML graphics: Display in other browsers.
The WordArt will remain where it should be as the browser window changes size, and as the font size is changed (using View->Text-size from the browser's menu). But the text box appears to move around the page, or rather, the page moves around the text box.
Similarly, the arrow and oval autoshapes also appear to move around as the browser and font are resized.
In browsers other than IE5.5 and later the graphics are replaced (if that option is chosen) by low quality .gif images. The Text Box, and it's contents, is replaced by a single image, which means that any links in the text box will fail in browsers like Firefox, Netscape, Konqueror, Safari etc. These images are shown below:
 |
The text box is shown left, the WordArt and other shapes below. Notice that in this case (for reasons unknown) the text is missing from the textbox graphic. This is yet another problem with VML text boxes. |
  |
|
Also note, if validation is important, WordArt will not display in Internet Explorer if a valid XHTML doctype is used, though the other forms of VML graphics will.