Category Archives: html

Thoughts on CSS width:calc()

When I dig through all the CSS3 toys, I ask myself several questions:

How can I use it?

What need does it fill?

How can I work around it for browsers that don’t support it?

I am having trouble with justifying using width:calc()! It is not that it is not needed; IE6 needs it badly; And, coding for other browsers to include non-standards IE6 needs it. But IE6 does not support it!

So when IE6 leaves the picture we have a standard compliant browsers. In a standard compliant world we have padding-left:fixed value and width:100% and absolute:position to overlay content from another divide onto the padding-left space. It works and with or without width:calc() I use two divides and a wrapper, which is the parent document or a parent divide. In other words I only need width:calc() on the browser where overlays do not work to standards and does not support the property as a fix.

To design for IE6 I need <table width=”100%”><td></td><td width=”fixed?”></td></table> something that should make even a hobbyist say, “No! don’t do it!”

I like the property though. I just can not honestly see where I need it. For Javascript makes it possible to change one value instead of two — which can lead to smoother animations — But for attractive animations many properties need to be changed at the same time anyway.

Specifically IE6 has a problem with hiding other content on a <div style=”position:absolute; top:0px;width:100px; float:right”> This should fill a 100 pixel area on the right part of the screen – it does but it blocks the content on the left part of the screen. z-index can correct it when used only with IE6 as IE6 implementation is different and breaks other browsers.

Create Web 2.0 style icons by adding a CSS class.

CVI glossy.js uses the html5 canvas element. This element is already supported by most modern browsers. What canvas allows you to do is image processing on the browser side. What glossy script does is it takes any image, which has the class style of glossy, and goes through the steps that one would do in photoshop to create a glossy web 2.0 image or vista type button.

One thing this technology does is allows users to upload a graphic to their space and apply graphics processing to it provided by the site. Another thing it does is saves time by allowing whatever graphics steps that a web designer goes through for each graphic to be done instead by assigning a class to the image in the markup process.

As a current example I am using it on Sdfreelance

Note: for backwards compatibility glossy.js is using schemas-microsoft-com:vml not just canvas.

Layering html with absolute positions in fluid html

Absolute positioning style=”position:absolute” provides a method to overlay html content. This allows for richer layouts and animations. Absolute positioned content appears above the content (by default – controlled by z-index) and additional content after the position absolute appears as if it were a background or as if the absolute positioned content were not taking any space.

Absolute positioning requires advanced CSS knowledge. One must know the difference between a style=”display:block” and style=”display:inline”. If a block element is used the content under the absolute content will be blocked. This is the most common error – if you see a link that you can not click on, it is a fairly safe bet that the coder made this error … z-index can and should be used on those background links to bring them above the “position absolute” content. Any number of layers can be created and work if one uses the z-index style correctly. Each layer can be independently animated.

Most tutorials on absolute positioning point out that the style=”top:” and style=”left:” control the location of the content and it is based on the document parent or the top left location of the browser window. They fail to point out that if a style=”position:relative” is used in a block element that the absolute content location will be based on that parent instead.

The trick to using absolute positions in a fluid html layout is to place the content into a relative positioned parent block. This same method applies to centered 960 pixel layouts – because the left margin is no longer left:0px. See an example at with the icons on the right collapsing sidebar with in inside the 960 pixel layout.

Why center tag or margin:auto does not work when it appears that it should

Sometimes in coding a page a center tag is inserted or a margin:auto and it appears to be ignored. Mostly this happens in tableless CSS with a more complex set of styles some floating or absolute.

For the content to properly center the width of the area that it needs to be centered in needs to be known. When the area / block width is the same as the width of the content that needs to be centered – nothing changes when it is centered.

In standards mode what should happen is the block should have 100% width. This does not happen when the block is next to a block which is floating to the right or to the left and there is no CSS setting to set the width to be 100% of the remaining space. It is also inconsistent with different browsers.

The solution is to specifically set the CSS style width of the parent that the content should be centered in.

Another option would be for the area that should use the remaining space; do not make it a block instead let this content’s parent be the same parent as the block that floats.

HTML5 in IE6 7 and 8 with plugin dubbed “IE Killer”

If you don’t want to uses tiny pieces of code to render pieces standards mode in IE6, IE7, or IE8. If you want the whole thing, all of it, in one shot … including people on WIN XP which will not be able to use IE9.

There is a solution! One script to load one small pluggin and a metatag to turn it on for your html5 pages Chromeframe

Taming Internet Explorer

Many Flash developers do not want to program in JavaScript because Active Script in Flash is a safe and protected environment. JavaScript in browsers means you need to test across browsers – sometimes or mosttimes troubleshoot for one or more versions of Internet Explorer.

When it comes to coding IE6 through IE8 one is faced with the same issues that Flash developers run away from. One tool that can be used to tame Internet Explorer is a IE8 + meta tag

<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″>

IE=EmulateIE6 causes all internet browsers commonly in use to render as IE6. With IE7 being a minority.

Tweet this from sites.

Tweet - How to add Tweet it buttons to sites as easy as a link and many other CMS systems only supports javascript from “trusted” sites and they do not trust very many sites. They do have a “share” button which does include twitter and facebook but it is a limited configuration.

Dashboard -> Settings -> Sharing

Twitter Javascipt API has many nice features – It has a count of how many people have already tweeted it and data areas for follow us, what URL to be used  … People are accustom to seeing low tweet counts on major sites that include Tweet this on news pages.  A low tweet count does not create a bad impression and for a page that does not become old-news the count only goes up.

There are times when an easy method is better or on required for a twitter interface. The easiest method is a link to the site . <a href=””></a&gt;, which is framed around a form post with one field status. No bells or whistles – just a link to the site which can be in the form of a graphic…

What does it mean to have advanced knowledge of CSS

Marketing people seem to throw around the words advanced, guru, expert without any apparent consideration for what those words mean.

Let me give some definitions:

  • Beginner: is somebody who is able to do some things with CSS.
  • Knowledgeable: is somebody who is familiar on the majority of CSS commands and what they do. The should be able to guess what this does but may have not used it.

<style> a.special:hover + * {background:url(new.jpg);}</style>

I’ll give a hint –  It is documented under adjacent sibling selectors

  • Advanced:  Somebody who would not be able to tell you what he does not know about CSS because he understands every piece of it he has seen, and he has seen the material on CSS from all major browsers and standards.
  • Guru: Wisdom is not knowledge.  Wisdom is the application of knowledge. A guru not only knows all things — he knows he knows all things.

Being a guru means there is nothing left to learn. His search for new knowledge in his field is in vain. Nice people ask questions but there are no questions he can not answer … if a guru wants to learn something it needs to be something new.

Iframes the good, the bad, and the ugly.

iframes are good for allowing content to loaded and changed without redrawing a complete new screen. They can be used with a tab menu to make some nice UI experiences. Facebook is going the iframe method for applications.

The html of a page loads around an iframe so it appears faster, iframes can also be used to load scripts in a more asyc manner. But the bad – iframes themselves have a negative total effect on page rendering. They block the onpage load from being executed until the iframe is also loaded. The status bar indicates the page is still loading until the iframe is completed – even though the page renders around the iframe – the appearance is the page is slow. When one looks at the status bar it is still loading.

Cross browser CSS3 hover on non-anchor tags

All browsers but Internet Explorer handle hover on tags other than the anchor tag; the anchor tag is most often used for links. By using CSS hover one can make for example a drop down menu, by causing elements to appear when the mouse is placed over them; Without, using javascript.

The solution to Internet Explorer lack of hover support comes from a method to extend the functionality of the browser with behavior files.

Peterned created specifically to allow CSS3 hover to be used today with all browsers. It is used by adding the following to a html page inside a style tag.

body { behavior: url(""); } must be loaded onto the host. … Peterned has directions. An example CSS only menu is also shown. … the behavior program then looks at the CSS of the page and enables hover to work on any style class that is using it.