html - CSS positioning inconsistencies in browsers -


I was just playing with CSS positioning and got some doubts regarding the elements given in the browser? Will someone please explain to me why this is? Enter image details here

HTML code

  & Lt ;; DOCTYPE html public "- // W3C // DTD XHTML 1.0 Strongly //n" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> & Lt; Html & gt; & Lt; Top & gt; & Lt; Title & gt; Untitled document & lt; / Title & gt; & Lt; Meta http-equiv = "content-type" content = "text / html; charset = ISO-885 9-1" & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div style = "background: #ccc; height: 150px; width: 300px;" & Gt; Parents div & lt; Div style = "background: # fft; height: 50px; condition: complete;" & Gt; Hair divis & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;   

1. Why the soft divas are displayed in-line with parents' content in IE6, but not in Safari?

2. And when I deployed the child's concept complete, it lost its width? But if I specify the width: the warrior withdraws its full width in Safari but did not come in IE6 [I know the heir is not supported in IE].

Thanks

  1. Absolutely-blocked block-level elements Is considered to be in the context of its formatting. Apart from this, since div is a block-level element, the child should go on a new line instead of inline with the contents of the parent. And of course, no one can expect to know that IE6 knows all this.

  2. Absolutely-positioned block-level elements do not extend to fit your container if you do not give them width

Comments