CSS absolute positioning madness

**mudskipper** · 6 December 2010, 19:43

Originally posted by VectraMan View Post

I was experimenting, and from what I've read "position:absolute" should mean the element is positioned at an absolute position relative to its parent:

Code:

<body>
<div style="background-color:yellow; height:390px; left:70px; position:absolute; top:60px; width:280px; "/>
<div style="background-color:green; height:200px; left:420px; position:absolute; top:60px; width:320px; "/>
<div style="background-color:red; height:270px; left:400px; position:absolute; top:330px; width:300px; "/>
</body>

But when I try the above, each div is positioned relative to the previous one, and so appears in the wrong place, which is not what's advertised here: CSS position property

However, I've just stumbled across an insane solution. If I don't use a trailing / in the XML tag but close with </div> it now works. Do I have some kind of fundamental misunderstanding about the way XML works? Surely it should be exactly the same thing.

I see the same result in Firefox, Chrome and IE8.

I'm producing this from MSXML, so I don't necessarily have full control over how it closes the tags (or at least I don't know how to yet). Is there some kind of "work properly" mode I need to enable? Surely HTML can't be this fundamentally broken and nobody's noticed? (No doubt Nick Fitz can tell us why

).

Our resident monkey has explained this before

This link is useful too.

**VectraMan** · 6 December 2010, 19:58

Thanks. So it would have been treating each div as inside the previous div, and then not complaining that they weren't closed.

I have at least solved the problem of how to do this with MSXML (add a blank text element).

**NickFitz** · 6 December 2010, 20:22

Originally posted by VectraMan View Post

Originally posted by k2p2 View Post

Our resident monkey has explained this before

This link is useful too.

Thanks. So it would have been treating each div as inside the previous div, and then not complaining that they weren't closed.

I have at least solved the problem of how to do this with MSXML (add a blank text element).

Yep

Check out Appendix C of the XHTML 1.0 spec for a few more tricks and traps.

**VectraMan** · 7 December 2010, 14:45

Ta.

A related question. I was also playing with inline SVG, like this:

Code:

<svg height="600px" viewbox="0 0 600 600" width="600px" xmlns:svg="http://www.w3.org/2000/svg">
<path id="" d="M -245.519562 74.552246 L 44.981430 135 C 111.314781 115.333328 230.392181 143.839661 243.981476 75.999985 C 265.853302 -33.187222 71.314789 -64.666672 -15.018551 -135 L -165.679245 -74.701477 L -195.619354 74.552246 L -245.519562 74.552246 " fill="red"/>
</svg>

This works in Chrome, but in Firefox the SVG doesn't appear. If I save the file as .xhtml, then it appears in Firefox and Chrome, but IE8 just prompts me to save the file (I wasn't expecting the SVG to work in IE8, but I thought I'd at least get the rest of it). As I understand it using XHTML needs the webserver to respond with the correct mime type, and that's often not the case, so I'm a bit wary of using XHTML.

But I found this using the Ample Javascript library that somehow makes inline SVG work in all browsers (even IE5.5 they claim) and regular HTML.

Worldmap interactive - Ample SDK

How are they doing that?

**NickFitz** · 7 December 2010, 15:34

Originally posted by VectraMan View Post

Ta.

A related question. I was also playing with inline SVG, like this:

Code:

<svg height="600px" viewbox="0 0 600 600" width="600px" xmlns:svg="http://www.w3.org/2000/svg">
<path id="" d="M -245.519562 74.552246 L 44.981430 135 C 111.314781 115.333328 230.392181 143.839661 243.981476 75.999985 C 265.853302 -33.187222 71.314789 -64.666672 -15.018551 -135 L -165.679245 -74.701477 L -195.619354 74.552246 L -245.519562 74.552246 " fill="red"/>
</svg>

This works in Chrome, but in Firefox the SVG doesn't appear. If I save the file as .xhtml, then it appears in Firefox and Chrome, but IE8 just prompts me to save the file (I wasn't expecting the SVG to work in IE8, but I thought I'd at least get the rest of it). As I understand it using XHTML needs the webserver to respond with the correct mime type, and that's often not the case, so I'm a bit wary of using XHTML.

But I found this using the Ample Javascript library that somehow makes inline SVG work in all browsers (even IE5.5 they claim) and regular HTML.

Worldmap interactive - Ample SDK

How are they doing that?

As you've noted, the XHTML needs to be served as application/xhtml+xml. However, IE < 9 doesn't understand that content type and assumes it's a file that needs to be downloaded. Firefox recognises the SVG when using the XML parser because of the XML namespace declaration (xmlns:svg="http://www.w3.org/2000/svg"); when using the HTML parser, there are no namespaces, so it just thinks the SVG elements are a bunch of tags with meaningless names and treats them as ignorable errors.

As HTML5 now allows for inline SVG in HTML, it will work in Firefox 4 when it's released; Chrome and Safari already support it. IE9 also supports inline SVG in HTML, and (finally) supports XHTML served as application/xhtml+xml.

The way that library makes SVG work in IE < 9 will be by converting the SVG on the fly to VML, a deprecated predecessor to SVG that was implemented in IE and never removed. For the others, it's probably doing something cunning like adding in the relevant namespaces on the fly and triggering the browser to reparse the relevant elements.

CSS absolute positioning madness