Many webmasters, who are still new to the webmaster world or are still learning CSS, have often pondered on this… Many of my students have asked me about this… many of my friends who are in to the same business as I have wondered why we, who have learnt the hard way do it.. What am I talking about? Positioning in CSS, more so the relationship between absolute and relative positioning in CSS.

So is it Relatively absolute or Absolutely relative?

Whenever you are designing with CSS, more often than not, there will be times when you would have to nest divs. These nested divs could be relatively positioned or absolutely positioned. The more often used one would be nesting an absolute positioned div within a relative positioned div, albeit a relative positioned div wrapped around an absolute positioned div is also quite as famous. Huh?

Ok, Sherlock, here’s the 101 on it. An absolute positioned div or element is positioned with regards to the containment block. Any and all elements are considered to be positioned elements if they are either have relative, absolute or fixed positions. Any of the values, except static, assigned to the position property of a element, gives the element a “position”. Static is default value for most browsers, and if no value is specified(one of the values from the above three), static is taken as the default value. Static also means that the element is within the “normal flow” of the document, in regards with other elements in the web page.

An absolute-positioned element within a web page, having no containing block(s) [i.e. Having no ancestor elemets or having ancestors elements that are not positioned] is always placed in regards to the web page/browser render screen boundaries. Then such an element is known as the “initial containing block”.

For e.g :

#Main_Wrapper{
position:absolute;
top:0;
left:0;
}

The above element [i.e. Element with the id parameter set to “Main_Wrapper”] would be positioned on the top left hand side of the web browsers render area or screen media, only when the said element has not ancestral elements. But, if the above mentioned elements has any positioned ancestral blocks, the element would be positioned on the top left corner of that ancestral element.

Absolute Twist, anyone?

If, the above shown element, has any siblings, their positions are now reset to the boundaries of the ancestral element block! Not of the absolute-positioned block.

CSS Yap Yap Yap…

This does sound unwinding and at the same time ever winding to me. Lets see it action..
During the design of one of my templates, lets call it AlphaZone, I had positioned the
right column as absolute. Since I wanted the right hand side column to be appearing right below my template header. I never wanted an overlap or gaps between the header block and the right column block. My Header contained, a logo, a few links and a “call statement”. Because the links were in h1 tags and were basically texts. This is the reason the navigation could be resized by the browsers, since many people have different default text sizes along with different browsers rendering texts differently. This was the reason behind, me not positioning the right column in context to the screen media boundaries or page boundaries. If I would have, the right column would have overlapped the header for a number of people, using various browsers. So, What I did is absolute-positioned the header, and then created a wrapper block known as #wrappercontent, that would engulf the right column, main content pane and the left column. The main wrappercontent block was relative-positioned. This provided the container or wrapper to flow with the normal flow of the page. This way I achieved the results of having the container block being present below the header no matter what text size or browser or resolution.

Now for the relative revelation…

Since the main wrapper is relative-positioned, all the blocks or elements within the container block would have their positions reset and would have the position adhering to the #wrappercontent block as the containing element or ancestral element. Thus, the right column #rcol, would be auto positioned on the right hand side of #wrappercontent and would be positioned based on this ancestral element. It wouldn’t bother to be positioned on the top left or top right corner positions and this would also allow the right column to adjust vertically for different resolutions.

CSS Butt Hugging, are we?

Ok here is the rope-a-dope. I would have directly set a top-margin property for the top navigation, but I did not. Why? Same reason as above, texts, browsers and resolutions. The border or margin would have resized based on the above three influences. So what was eminent and still is, that The navigational links within the h1 tags were put into an element, which was relative-positioned within an ancestral element that was absolute-positioned, adding to this relative positioning, I also stated the height in pixels, 122px for the nav div, or #nav. This solved the margin or border dilemma.

The other way out …

Off course there are other ways of resolving the problem statement above, but to give you guys a rough idea of ancestral elements and the relationship of relative and absolute positioning, I took the above mentioned example. Perhaps this technique is now more clear to you guys.

CSS Resources..

Absolute Vs. Relative Positioning@ webdesign.about.com/od/advancedcss/a/aa061307.htm
Layers, Absolute and relative positioning@ www.yourhtmlsource.com/stylesheets/csslayout.html

Using hacks while designing a website based on CSS and XHTML is certainly an untamed reality. We all do it. I learnt it the hard way! When I started out with CSS and XHTML, I had a number of problems piling up with a number of Web 2.0 projects. A lot of googling for a LOT of time, I came across a lot hacks, some that worked, some that used to work and some that never worked, but I did have to use or come up with CSS hacks for making my clients happy. Funny what the stomuch makes you do eh?

CSS Hacks a harsh reality

The harsh reality is that hacks, doing more than helping you fix one CSS rendering problem, create more for you. Some of you migh debate this, but how many of us haven’t gone through times when browsers like Chrome were launched by Google, no offence, but I had to rush and check all my work to see how it rendered in chrome. For e.g look at this website itself in chrome, the top links still look a little wierd! There have been other times when browsers like FireFox update themselves and some of our previous hacks, stop working.

Hacks are good, but…

Precisely for reasons like these, I tried learning how to avoid the use of CSS hacks and still work the design right. I agree, Hacks provide a very systematic approach to handling discrepancies where various flavors of browsers are concerned and these little code snippnets do give us proper CSS fixes, but they still bloat up the CSS code and some may not be XHTML standard compliant. Whenever I use a CSS hack, I always think of me as being incapable of conjuring up a more elegant way of addressing the problem fixed by the CSS hack. Another baddie about using CSS hacks is as mentioned maintaining them throughout the life of the web design, for new and old browsers.

Today I go to great lengths to ensure that I avoid using CSS hacks and keep my code as simple and complain with the W3C, along with negligible or no maintaining trips invovled.

Design Considerations to avoid CSS hacks

#1 Avoiding precise pixel dimensioning in your design: In my experience of designing websites, whatever it may be, I have come across using most hacks where defined width and height dimensions using pixel size. Try and design a page that renders the same no matter what browser one uses. You would not require a css hack when your design can easily address design inconsistancies and still look the way you intended too.

#2 Integrate the code behind with your design: I learnt this, again, the hard way. It is much better to make your design work with your code hand in hand. Revisit and redesign every page element if you have to, but avoid using a CSS hack. If you are serious here, you would want to think of the entire process of designing and coding as one single process, instead of thinking of them separately. This would also make you go cycle around the code and the design with mulitple iterations, each refining your code and you design further. Do not approach coding separately than design.

#3 Design with limitations kept in mind: No! I am not asking you to design thinking you have limitations imposed on you because of browser descrepancies. I am saying that find a way to overcome these limitations, without using CSS hacks. If you can not for now, then work within the scope of limitations imposed on you and come back and work on the overcoming these from a complete design point of view. I, for one have always thought of overcoming these limitations, what was more compelling and interesting was thinking of working within the constraints set by browsers descrepancies and still being able to get the desired design to look and feel the way the client or I wanted to. So look at it from a challenging point of view.

#4 Select you css hacks: If you are in precarious position where you have to use a CSS hack, then I would suggest you use the hack for IE and you use the *html selector hack, avoid using the comment characters and comment based hacks within your CSS. I would also go ahead suggest, from personal experience, that any hacks used within your CSS, should be well documented so that six months later if the hack does not work anymore of needs be changed you know what you did!

Resources

Here is how to avoid CSS hacks where IE is concerned…
Further Reading@ http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx

So, you are just a newbie in the Webmaster world and are still learning CSS?  Here are a few starter tricks that you might want to keep handy while learning advance CSS techniques/methodologies or syntax.  The CSS snippets shown below are just a few basic CSS tricks that you can use to learn and can very well apply to websites.

While learning CSS, one major concern for you would be keeping in mind browser share over the Internet.  What works with one browser may not work with another. The scope of this article would be just to impart basic newbie knowledge about industry tricks, some of which might have now become a standard. This article will not be delving in to CSS for Beginners. There’s a lot more to CSS and our upcoming articles on CSS would discuss and take the scope further for now, lets just dive in to some basic CSS tricks.

CSS Trick #1: Underline On Hover over text links

You must have visited many websites that show links that have no underline at first, but once you move your mouse over such links the underline auto appears below such links. Well its no magic for one, and in the world of CSS Magic, this has become almost a standard, giving you cleaner links or link appearances. How do you achieve this using CSS? Read on.

<style type="text/css">
<!--
A:link { text-decoration: none }
A:visited { text-decoration: none }
A:hover {text-decoration: underline}
-->
</style>

CSS Trick #2: Placing Lines above and below links

Want to place underlines over and below text links? Here’s how-to;

<style type="text/css">
<!--
A:hover { text-decoration: overline underline }
-->
</style>

Looking at the above code, you can also modify the above code to show only an overline over such text links. For E.g:

<style type="text/css">
<!--
A:hover { text-decoration: overline }
-->
</style>

CSS Trick #3: Text links with underline and color change on hover over

If you have wondered about how to change the color of text links when the mouse hover over’s such links, here is the answer

<style type="text/css">
<!—
A {color:#000000; text-decoration:none}
A:hover { color: #000000; background-color: #ffff00; text-decoration: overline}
-->
</style>

CSS Trick #4: No Tiling Background

Ever wondered how you could stop the tiling of some images applied as background to your <TD> tags, or your <DIV> tags or for the matter your <BODY> tag?

<style type="text/css">
<!--
BODY { background: #ffffff url(imagenamewithrelativepath.jpg) no-repeat center}
-->
</style>

Here, the no-repeat of the ‘URL’ directive conveys to the browser not to repeat or “tile” the image and the ‘center’ directive requests the browser to display such an image in the middle or center of the web page.

CSS Trick #5: Applying images to button controls or changing  colors  on button colors

Don’t like the way the browsers render your buttons? Well here are some ways to change that!
The below code would change the foreground and background color of the button control.

<input style="background-color: #000000; color: #ffff00; font-weight: bold; font-size: 10pt;" type="submit" value="Click Me">

Whereas, the below code mentioned within the “style” parameter of the input tag would apply a background image to the button control, with changing the foreground color.

<input type="submit" style="background-image: url(nameofimageforbutton.jpg); color: #000000; font-weight: bold; font-size: 13pt;">


CSS Trick #6: Want to change the color of the browser scrollbars while visinting your webpage?

The below shown code would impart color to your scroll bars.

<style type="text/css">
<!--
BODY { scrollbar-face-color: #d8afd8; scrollbar-shadow-color: #3C3C3C; scrollbar-highlight-color: #00A3F7; scrollbar-3dlight-color: #339933; scrollbar-darkshadow-color: #3C3C3C; scrollbar-track-color: #000080; scrollbar-arrow-color: #ffffff; }
-->
</STYLE>


CSS Trick #7: Big fan for Sentence Case?

The below shown code would convert the first letter or alphabet of all words within the scope of the applied CSS code to Capital.

<style type="text/css">
<!--
.sentencecaseit:first-letter{
font-size:120%;
float:left;
color:#000000;
-->
</style>
<p class="sentencecaseit">state your text here.</p>


CSS Trick #8: Hate those scrollbars on your webpage?

Here is the CSS code that will hide the scroll bars on your webpage.

<style type="text/css">
<!--
body { overflow:hidden; }
-->
</style>

For most browsers, it will disable the scrollbar, rendering page scrolling impossible.
If you would like to only disable the vertical scrollbar, then the CSS code would look like

body { overflow-x:hidden; }

Alternative, if you would like to disable the horizontal scroll bar only, then the CSS would change and become,

body { overflow-y:hidden; }

CSS Trick #9: Having fun with those <HR> Tags!

Would you like a fancy horizontal rule on your webpage? No problem at all, have a look at CSS code shown below

<hr noshade style="width: 500px; color: gray; height: 20px; text-align: center; border: 3px solid gray;">

CSS Trick #10: Play around with CSS.

The best way to come across CSS tricks is play around and test CSS combinations and permutations! That’s how we learnt!

CSS Learning Resources

Find CSS interesting, want to learn more? We suggest you start from http://www.w3schools.com/css/css_reference.asp

Some other sites for CSS we found useful.

http://css.maxdesign.com.au/

http://www.projectseven.com/tutorials/index.htm

to mention a few!