Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

elliptical html elements?

Status
Not open for further replies.
sundemon

sundemon

Programmer
Aug 11, 2001
125
hi,

A friend recently created a web page in MS publisher that was able to draw ellipses or curved edges of div type elements using style sheets instead of graphics.
I'm a hand coder, and admittedly a little rusty, but I was wondering; is this a MS proprietary thing, or is this something you can do with styles cross browser?

Actually, I was fooling around with MS Publisher and drew an oval, and it did show in Netscape.

Anyway, I'd appreciate any general info or links on the subject.

thanks in advance,

sundemon
 
Sort by date Sort by votes
There is a way to do this with [tt]border-radius[/tt] property, but its support is not really there yet. Gecko's support it as [tt]-moz-border-radius[/tt] and the property itself may be supported by newest versions of Opera or Safari. However, IE does not support it at all.

There is also a way to do it with a little JavaScript, the widely used technique is called "nifty" corners.

All that said, I am pretty sure Publisher uses none of these revolutionary techniques. While I dread seeing Publisher code here again, I implore you to show us the simplest code that produces curved borders without pictures that work cross-browser. It will give us a chance to provide you with a better answer.
 
Upvote 0 Downvote
okay, here's some code.

I opened publisher, and pulled an oval, like you might do in Illustrator, and saved as web, which produced the following code. (actually, what's kind of funny, is the code it produces for a blank page is almost as intense).

Good luck! I'd be interested in any isight into how this works.

SD

<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:eek:="urn:schemas-microsoft-com:eek:ffice:eek:ffice"
xmlns:dt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"
xmlns="
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<link rel=File-List href="test_files/filelist.xml">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
b\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]-->
<title>Blank</title>
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Times New Roman";
panose-1:2 2 6 3 5 4 5 2 3 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{text-indent:0pt;
margin-left:0pt;
margin-right:0pt;
margin-top:0pt;
margin-bottom:0pt;
text-align:left;
font-family:"Times New Roman";
font-size:10.0pt;
color:black;}
ol
{margin-top:0in;
margin-bottom:0in;
margin-left:.25in;}
ul
{margin-top:0in;
margin-bottom:0in;
margin-left:.25in;}
@page
{size:8.5in 11.0in;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="3075" fill="f" fillcolor="white [7]"
strokecolor="black [0]">
<v:fill color="white [7]" color2="white [7]" on="f"/>
<v:stroke color="black [0]" color2="white [7]">
<o:left v:ext="view" color="black [0]" color2="white [7]"/>
<o:top v:ext="view" color="black [0]" color2="white [7]"/>
<o:right v:ext="view" color="black [0]" color2="white [7]"/>
<o:bottom v:ext="view" color="black [0]" color2="white [7]"/>
<o:column v:ext="view" color="black [0]" color2="white [7]"/>
</v:stroke>
<v:shadow color="#ccc [4]"/>
<v:textbox inset="2.88pt,2.88pt,2.88pt,2.88pt"/>
<o:colormenu v:ext="edit" fillcolor="blue [1]" strokecolor="black [0]"
shadowcolor="#ccc [4]"/>
</o:shapedefaults><o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1"/>
</o:shapelayout></xml><![endif]-->
</head>

<body link="#0066FF" vlink="#6633CC" style='margin:0'>

<div style='position:absolute;width:7.9319in;height:3.234in'>
<!--[if gte vml 1]><v:eek:val id="_x0000_s1034" style='position:absolute;left:156pt;
top:84pt;width:264pt;height:147pt;z-index:3;mso-wrap-distance-left:2.88pt;
mso-wrap-distance-top:2.88pt;mso-wrap-distance-right:2.88pt;
mso-wrap-distance-bottom:2.88pt' filled="f" fillcolor="white [7]"
strokecolor="black [0]" o:cliptowrap="t">
<v:fill color2="white [7]"/>
<v:stroke color2="white [7]">
<o:left v:ext="view" color="black [0]" color2="white [7]"/>
<o:top v:ext="view" color="black [0]" color2="white [7]"/>
<o:right v:ext="view" color="black [0]" color2="white [7]"/>
<o:bottom v:ext="view" color="black [0]" color2="white [7]"/>
<o:column v:ext="view" color="black [0]" color2="white [7]"/>
</v:stroke>
<v:shadow color="#ccc [4]"/>
<v:path insetpenok="f"/>
<v:textbox style='mso-column-margin:2mm' inset="2.88pt,2.88pt,2.88pt,2.88pt">
<div dir=ltr>
<p class=MsoNormal><span style='language:EN'> </span></p>
</div>
</v:textbox>
</v:eek:val><![endif]--><![if !vml]><span style='position:absolute;z-index:3;
left:207px;top:111px;width:354px;height:198px'><img width=354 height=198
src="test_files/image298.gif" alt="Oval: &#13;" v:shapes="_x0000_s1034"></span><![endif]>
</div>

</body>

</html>
 
Upvote 0 Downvote
Ewww, that's one ugly code. Ok, no mysteries there. The script uses VML (vector markup language) to produce the code and a lot of proprietary MS if sentences to correctly render across different browsers that have different support. All the page is commented out for non-IE browsers except for the very last part, where the oval is produced via a an image (<img width=354 height=198
src="test_files/image298.gif" alt="Oval">). That is all the mystery. It works in IE because it can read MS VML. It works in other browsers because it loads a picture for them.
 
Upvote 0 Downvote
thanks, as you point out, not so mysterious after all... I hadn't noticed that publisher had created a new folder for the image it created.
Sundemon
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
153
lmcate
lmcate
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
998
spamjim
spamjim
SitesMasstec
  • Locked
  • Question
How to have an HTML opened automatically in an e-mail
Replies
3
Views
142
spamjim
spamjim
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
134
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top