- From: Jeff Schiller <codedread@gmail.com>
- Date: Tue, 2 Jan 2007 21:20:33 -0600
- To: "Simon Pieters" <zcorpan@hotmail.com>
- Cc: www-svg@w3.org, public-cdf@w3.org
Thank you, Simon! That does work as expected in Opera 9.
Unfortunately, Mozilla still interprets height="100%" as being the
entire height of the client area of the browser. Let's hope for a fix
in Fx3...
Jeff
On 1/2/07, Simon Pieters <zcorpan@hotmail.com> wrote:
> Hi,
>
> From: "Jeff Schiller" <codedread@gmail.com>
> >I have a question about XHTML+SVG when it comes to laying out SVG in a
> >HTML:table. Here's my minimal test case. I'm also going to point
> >this question at the svg-developers list too:
> >
> ><?xml version="1.0" encoding="UTF-8"?>
> ><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
> >"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
> ><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
> > <style type="text/css">* { border-style:solid }</style>
> > <body>
> > <table border="1">
> > <tr>
> > <td>
> > <p>Paragraph One</p>
> > <p>Paragraph Two</p>
> > <p>Paragraph Three</p>
> > <p>Paragraph Four</p>
> > <p>Paragraph Five</p>
> > <p>Paragraph Six</p>
> > <p>Paragraph Seven</p>
> > </td>
> > <td>
> > <svg version="1.1" width="40px" height="100%"
> >xmlns="http://www.w3.org/2000/svg" >
> > <rect x="0" y="0" width="100%" height="100%" fill="red" />
> > </svg>
> > </td>
> > </tr>
> > </table>
> ></body>
> ></html>
>
> Let's compare with how <html:img> works.
>
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
> <style type="text/css">* { border-style:solid }</style>
> <body>
> <table border="1">
> <tr>
> <td>
> <p>Paragraph One</p>
> <p>Paragraph Two</p>
> <p>Paragraph Three</p>
> <p>Paragraph Four</p>
> <p>Paragraph Five</p>
> <p>Paragraph Six</p>
> <p>Paragraph Seven</p>
> </td>
> <td>
> <img src="http://www.w3.org/Icons/w3c_main" width="40"
> height="100%"/>
> </td>
> </tr>
> </table>
> </body>
> </html>
>
> With CSS rules (unless I'm mistaken), the height of the image is auto
> because the height of the parent element is auto. In order to make the image
> 100% of the cell we need to specify 100% height of the cell and the row as
> well:
>
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
> <style type="text/css">* { border-style:solid }</style>
> <body>
> <table border="1">
> <tr style="height:100%">
> <td>
> <p>Paragraph One</p>
> <p>Paragraph Two</p>
> <p>Paragraph Three</p>
> <p>Paragraph Four</p>
> <p>Paragraph Five</p>
> <p>Paragraph Six</p>
> <p>Paragraph Seven</p>
> </td>
> <td style="height:100%">
> <img src="http://www.w3.org/Icons/w3c_main" width="40"
> height="100%"/>
> </td>
> </tr>
> </table>
> </body>
> </html>
>
> I would expect inline SVG images to work the same way.
>
> Regards,
> Simon Pieters
>
> _________________________________________________________________
> Prenumerera på senaste musiken http://www.msn.se/music/
>
>
Received on Wednesday, 3 January 2007 03:20:39 UTC