Web Development basics for ASP.NET Developers – Positioning

As I mentioned in the post about Normal Flow the rendering can be modified by using CSS positioning and floats. We will look into positioning in this post.

position: static implies Normal Flow, the flow is not modified.

All other positioning is relative to something else

position:relative is relative to the element box itself. For example Specifying position: relative and left: 5px, top: 5px renders the element moving it 5px down and 5px to the right of the actual element box. It is useful to shift rendering location of the element relative to its original element box by a few pixels to the left, right, top or bottom.

position:absolute is relative to the containing block. The containing block is the ancestral element which is positioned relative, absolute or fixed. If there is no such element then a hypothetical initial containing block (the viewport usually) is used. Viewport is the visible area of the browser window that can show html content (excludes addressbar, menubar, statusbar, toolbar etc.). When an element is positioned absolute it is removed from the document flow and positioned relative to the containing block as specified by the top, left, right, bottom attributes.

position:fixed is similar to position:absolute but the containing block is always the initial containing block. This is useful when you want to create a menu that is always at the top of the page and doesn’t scroll as the user scrolls content vertically in the viewport.

The stacking order is controlled by the z-index css attribute. Element boxes with higher z-index appear above element boxes with lower z-index.

I recommend you to read the following excellent articles on positioning:

Web Design 101: Positioning

CSS Positioning 101

Web Development basics for ASP.NET Developers – Normal Flow

Normal flow (or document flow as some people call it)  is the manner in which a browser renders html elements in the absence of any float / position related css attributes applied to the elements.

Block elements are rendered one below the other / stacked vertically in the order in which they appear in the html document. They can contain other block level elements, inline elements, text.

Inline elements are rendered in the same line stacked horizontally next to each other (left to right in most of the languages) in the order in which they appear in the html document. They cannot contain block level elements. If the width is not sufficient to display all the inline elements / content then  rendering starts in the next line.

The visual layout of  each element is governed by a box generated as as per the css box model.

This is rendering in Normal Flow. But float and position which affect the normal flow are what make css powerful enough to do visual layouts.

Web Development basics for ASP.NET Developers – Block vs. Inline elements

	Block	Inline
Width	Takes up whole width available	Takes up only much width as needed
line breaks	Generates line-breaks before and after	Does not force any line break (except <br /> which is a special case)
width, height – css attributes	applicable	ignored
max-width, max-height – css attributes	applicable	ignored
min-width, min-height – css attributes	applicable	ignored
examples	div, h1,h2…h6, p, ul, ol, dl, li, dt, dd, table, blockquote, pre, form	span, a, strong, em, img, br, input, abbr, acronym
Layout behavior in normal flow	stacked vertically one below the other (top to bottom) in order they appear in the document	stacked horizontally one after the other (left to right) till width permits and then continues in the next line
What can it contain?	other block level elements, inline elements, text data	other inline elements, text data – cannot contain block level elements

Though HTML elements have their default display styles as block or inline, we can change the behavior using the display css attribute (block, inline and other exotic stuff). For example you can change the list item’s display to inline to have a horizontally stacked menu instead of a vertical one.

References:

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm

Web Development Basics for the ASP.NET Developer – What is Box Model?

All document elements (visible) generate an element box which describes the amount of space that element occupies in the layout of the document. As per the CSS specification the box consists of the element’s content area, padding, border and margin.

The margin is always transparent and reflects the containing block’s background properties, whereas the content and padding reflect the element’s background properties. The border assumes the foreground properties of the element unless explicitly specified.

The CSS box model

References:

http://www.w3.org/TR/CSS21/box.html

Web Development basics for ASP.NET Developers – What is DOCTYPE?

Most of us conveniently ignore the DOCTYPE in an ASP.NET Page, What is DOCTYPE in the context of web development?

It is an instruction to the web browser that

• Defines which version of (X)HTML our document is actually using
• Triggers a rendering mode in most of the families of browsers

The most commonly used DOCTYPEs

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;

Presentation, Deprecated elements (ex: FONT)	Framesets	Well formed XML
Not Allowed	Not Allowed	Not Required

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;

Presentation, Deprecated elements (ex: FONT)	Framesets	Well formed XML
Allowed	Not Allowed	Not Required

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"&gt;

Presentation, Deprecated elements (ex: FONT)	Framesets	Well formed XML
Allowed	Allowed	Not Required

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Presentation, Deprecated elements (ex: FONT)	Framesets	Well formed XML
Not Allowed	Not Allowed	Required

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Presentation, Deprecated elements (ex: FONT)	Framesets	Well formed XML
Allowed	Not Allowed	Required

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt;

Presentation, Deprecated elements (ex: FONT)	Framesets	Well formed XML
Allowed	Allowed	Required

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;

Presentation, Deprecated elements (ex: FONT)	Framesets	Well formed XML
Not Allowed	Not Allowed	Required

HTML 5

<!DOCTYPE HTML>

Some rules

• The doctype declaration should be the very first thing in an HTML document, before the <html> tag.
• The doctype declaration must be exact (both in spelling and in case) to have the desired effect

We saw about the versions / flavors of (X)HTML, now lets return to the rendering modes of the browsers.

In Netscape and Internet Explorer 4 days CSS standards compliance was really patchy, but moving forward the newer browser version were getting closer to the standard. The browser vendors faced these major issues

• allow web developers who knew their standards to choose which mode to use.
• continue displaying old pages according to the old (quirks) rules.

Thus all browsers needed two modes: quirks mode for the old rules, strict mode for the standard.

The right DOCTYPE declaration will trigger the strict rendering mode in most families of browsers.

References & Further Reading:

http://www.w3.org/QA/Tips/Doctype

http://www.w3.org/QA/2002/04/valid-dtd-list.html

http://www.w3.org/QA/2002/04/valid-dtd-list.html

http://www.alistapart.com/articles/doctype/

http://www.quirksmode.org/css/quirksmode.html

http://www.quora.com/Without-a-version-number-in-the-HTML5-doctype-how-will-we-specify-future-versions-of-HTML

 

ASP.NET Pre-Compilation, Virtual Path Providers and Resource Providers

If your Pre-Compiled Website uses custom Virtual Path Providers and Resource Providers both serving content from the application database, you may run into a series of issues. I will try to highlight a few hacks and workarounds to get the website to a working state.

Fritz Onion’s January 2006 article in the MSDN Magazine’s Extreme ASP.NET column is a very good start to understand ASP.NET Pre-Compilation model. The summary of the article is this very table found in the MSDN magazine article.

	Deployment Mode
	All Source	All Binary	Updatable (mixed)
What compiles into a unique assembly	App_Code directory global.asax .ascx and associated codebehind file (separate assembly for each user control) .master and associated codebehind file (separate assembly for each master page) All .aspx files and their code­behind files in a given directory (separate assembly per directory)	App_Code directory global.asax .ascx and .master files and their associated codebehind files All .aspx files and their code­behind files in a given directory (separate assembly per directory)	App_Code directory (D) global.asax (R) .ascx and .master files (R) codebehind files for .ascx and .master files (D) All .aspx files in a given directory (separate assembly per directory) (R) All codebehind files associated with .aspx files in a given directory (separate assembly per directory) (D)
When it’s compiled	Request time	Deployment time	(R) = Compiled at request time (D) = Compiled at deployment time

 

The full article can be read here.

Making Virtual Path Providers work with Pre-Compilation:

This is not officially supported by Microsoft, so use this at your own risk.

The first hack is about registering the Custom Virtual Path Provider with the Hosting Environment using private reflection detailed in Coskun SONALI’s article here.

If you deploy the Web Site in the ‘All Binary’ mode, you will be greeted with the error ‘The file <your file served by the virtual path provider> has not been pre-compiled, and cannot be requested.’. It turns out that pre-compilation module was looking into a file called PreCompiledApp.config. If you just flip the updateable flag to true (after the all binary pre-compilation) and it should start working.

Making custom Resource Providers work with Pre-Compilation:

The pre-compiled site should be working but some of the resource expressions may not be working and you may be having blank instead of the resource string values in the labels and other text controls. To be more precise Explicit Resource Expressions will be working whereas Implicit Resource Expressions will not be. Rick Strahl’s blog talks about the Implicit Resource Provider interface IImplicitResourceProvider. Implementing one you can get the Implicit Resource reference in expressions also working in a pre-complied web site.

You can read Rick Strahl’s blog entries here, here and here.

Resource Providers are invoked at compile time as well and not surprisingly Rick Strahl has blogged about the same here.

If you start implementing a custom resource provider start with Rick Strahl’s version here rather than the one here.