CODEWITHSUNDEEP
internet-explorer-7internet-explorer-6vml
d.k
d.k

Reputation: 4470

VML v:shape , V:roundrect elements ain`t displayed correctly in IE6, IE7 in strict mode

Does anybody can provide an answer to such issue? I`m trying to put some vector graphics into HTML. Actually it is not necessary in mine case, so I probably would resort to simple image for now, but I as encountered a problem, I couldn't resolve, it's became very interesting and relevant to the future to define what is going wrong. VML is absolutely new to me, by the way.

I tried to insert several vml-elements into a page, and some of them worked perfectly (in IE6, IE7) namely "oval", "rect". But when I've attempted to insert a shape or roundrect everything went wrong.

Actual question is: is there satisfactory VML support in IE6, IE7 or what I'm doing wrong? But as far as I'd examined my code everything is right in it. Below I'll put a sample, so everyone could test this in IE-browser:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1  /DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>sample</title>

<style>

  v\:* { behavior: url(#default#VML); display:inline-block}

  #div1 {

    width:400px;

    height:400px;

    background-color:#e4fe56;

  }

</style>

</head>

<body>

  <div id="div1">

    <v:shape style='width:100px;height:100px' fillcolor="red" path="m 0,0 l 30,0,30,30 xe" />

    <v:rect style='width:100pt;height:75pt' fillcolor="blue" strokecolor="red" strokeweight="3.5pt"/>

    <v:roundrect style='width:100pt;height:75pt" arcsize="0.3" fillcolor="yellow"   strokecolor="red" strokeweight="2pt"/>

  </div>

</body>

</html>

Additionally I found that it happens only in strict mode. When DOCTYPE removed or with other conditions when IE works in quirks mode everything works well.

Upvotes: 0

Views: 4137

Answers (1)

Paul Sweatte
Paul Sweatte

Reputation: 24627

You have mismatched quotes on your style attribute

<v:roundrect style='width:100pt;height:75pt"

You have whitespace in your doctype:

/xhtml1  /

Upvotes: 1

Related Questions