Saturday, February 7, 2009

IE6 versus position:fixed layout.

Let’s go back to this post: Simple layout using position:fixed. Why IE6 does not support this site? Well, IE6 does not support position:fixed and skip top, bottom, left and right properties. As a result all elements appear in their normal flow. (In some cases we can use position:absolute instead position:fixed but it has some constraints).
 
Anyway, there is a possibility to use another famous bug (difference in interpretation of CSS parameters) from IE5 to achieve similar layout working in IE5 and IE6.
 
Let’s start from beginning. In 1998, when IE5 appears, most of the webmasters use HTML to create web pages. Also most of the browsers could not correctly interpret CSS1 and XHTML standards. IE5 has a bug in interpretation of a size of and element (so called box model bug) http://en.Wikipedia.org/wiki/Internet_Explorer_box_model_bug.
 
In IE5 width value includes also margin and padding values. Therefore, if we set width parameter to 100% and the margin and padding to 10px then the full element width will fit exactly to the window (since in other browsers which supports W3C standard the element width will extend the window by 40px).
This bug was fixed in IE6 but so many websites created for IE5 already existed that Microsoft decided to keep compliance with the old interpretation and enables a possibility to turn IE6 to render the CSS the way the IE5 does. The same happened with many different browsers that old versions didn’t support correctly W3C standards. The mode, when the browsers work as an old version, is called Quirks mode. More about it here: http://www.quirksmode.org/.
 
How to use quirks mode to build a layout? We can set up the content layer to make it fit to the window (with and height to 100%) and set borders to the size of menu, header and footer. Then we move this layer to the back (z-index:-1) and put header, menu and footer over it. The result will be nearly the same. We only need to make the left border the same color as menu (menu won’t be stretched between header and footer anymore) and change positioning of footer to absolute.
How to switch between the styles depending on a browser? First of all we have to assure that IE6 will turn to quirks mode. For that purpose we need to set a DOCTYPE to xhtml strict and add an xml prolog. (In this case IE7 will stay in standard mode). Then we can use conditional declaration:
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
Now the only difference between this layout and that one from previous post is the lack of white space.
The second css file ie.css will be loaded only in IE6 or lower versions. In fact, even for IE6 or IE5 both of these style files will be loaded and all properties from first file will be replaced with values from the second file. That has some advantage because we don’t need to define everything again (just the differences).
The second layout and both css files are available here.
Screen shots generated on http://browsershots.org/
IE8
IE7
IE6
IE5.5

Tuesday, February 3, 2009

First look at Google Earth 5

Yesterday Google announced a new version of Google Earth. Therefore it is a good time to play a bit with it. One of the new features that I was very curious about is Historical Imagery. You can turn back the time for a moment and see how some places looked before. However, the quality of the pictures and datum to which you can go back depends on the place. For European locations it starts usually after year 2000, 1999 for London. (But we can admire Sun Francisco from 1946.)
Here is an example of a building Golden Terraces in Warsaw...
19.07.02
04.06.03
18.10.06
now
Historical Imagery seems to be very interesting ,but the most famous novelty is Ocean View. Now we can  dive into to the ocean, see the under sea terrain in 3D or explore new data points placed under water surface. I would recommend visiting Galapagos Region.
The last look at the island Pico...
...and jump
Btw: two shots of Building 3D View from Lisbon.
Mosteiros dos Jeronimos
Campo Pequeno.
More information about other new features, like 3D Mars and Tourning, on Offiicial Google Blog and Lat Long Blog

Monday, February 2, 2009

Simple layout using position:fixed

This time I would like to introduce a nice and powerful property: position:fixed. Unfortunately this property is not correctly interpreted by IE-family browsers. To fully understand how it works let’s create a layout as show in the picture below:
Header, footer and menu always stay at their places. Footer is always at the bottom of the browser window, header is always at the top. The only scrollable part is content. There is also a white line-space between each element.
 
This template has four regions: header, menu, content and footer. We can start by adding four <div> to the body of the page:
<body>  <div id="header">header</div>
   <div id="menu">menu</div>
   <div id="content">content</div>
   <div id="footer">footer</div>
</body> 
Perhaps a questions crosses you mind what is the different between <span> and <div>. A <div> is a block element which means that it takes a whole line, whereas <span> is an inline element what means that you can put many of them in one line. You can change this behavior defining a display: block|inline property.
Now we should create a style for every region:
#header {    
   background-color: #A5BEF2;
}
#menu{    
   background-color: #B9DDF9;
}
#content{    
   background-color: #E2F0FD;
}
#footer{    
   background-color: #A5BEF2;
}
At this moment our layout looks like a four stripes of different colors. Normally an element appears according to its normal flow. That means that a block element will appear below another element that was former defined in a source code. (An inline element will appear next to the previous one).
We can change this normal flow using position parameter. In this case we change to position:fixed. It means that the position of an element is described by a set of coordinates left, top, right, and bottom which values are relative to the browser window.
There are also few more properties to changing appearance of a single element: width, margin, border and padding.
Let's start with header and footer elements. The header should start at the top and be wide for the whole page. I will also set padding to 5px.
#header{    
   background-color: #A5BEF2;    
   margin: 0;    
   padding: 5px;    
   height: 40px;    
   position: fixed;    
   left: 0;    
   right: 0;    
   top: 0;
}
The footer must start at the bottom of the website, be page-wide, and 30px high.
#footer{    
   background-color: #A5BEF2;    
   position: fixed;    
   height: 30px;    
   padding: 5px;    
   bottom: 0;    
   right: 0;    
   left: 0;
}
Now is the time to set-up menu. Menu is 200px wide, starts just below header (and white space) – 52px from top and reaches footer (and white space) -42px from bottom.
#menu{    
   background-color: #B9DDF9;    
   margin: 0;    
   width: 200px;            
   padding: 5px;    
   border: 0;    
   position: fixed;    
   top: 52px;               
   left: 0;      
   bottom: 42px;        
}
At the end we need to shift content element to the left side of menu. It is also stretched between header and footer. The full width-size of menu is 210px and because I wish to achieve a white space between them the content element will start at 212 pixel.
#content{    
   background-color: #E2F0FD;    
   margin: 0;    
   padding: 5px;    
   position: fixed;    
   top: 52px;                  
   left: 212px;           
   right: 0;             
   overflow: auto;
}
Voilà!! The main layout is done.
 
Now we can focus on some more detailed formatting. First of all we can change a font. Because we want to use the same font for the entire page we can define it for the body tag. Now I should explain few words about inheritance. In general every element that find itself inside another one inherits a style from containing element unless it is changed by its own style. If we define a font for body, it will be used for every element, unless an element has its own font defined.
body{    
   font-family: Verdana;    
   font-size:10px;
}
Now we will define a big main header title and some sub-header much smaller and shifted to the left site. (Notice that in this case it’s much more suitable to use classes because they may be used for many elements.)
<div id="header">   
   <div class="header">Page Header</div>   
   <span class="sub_header">Some header details.</span>
   </div>
.header{    
   font-size: 25px;    
   text-decoration: bold;    
   color: #003666;
}
To achieve the shift effect for the submenu we should use position:relative. It shifts an element relative to its normal position by the values defined in top, left, right and bottom properties.
.sub_header{    
   text-decoration: bold;      
   color: #ffffff;    
   position: relative;            
   bottom: 7px;                   
   left: 45px;               
}
Now we can make a title in the main page a bit more emphasized e.g making spaces between letters.
<div id="content">   
   <h1>Lorem ipsum</h1>
   </div>
h1{    
   font-size: 12px;    
   letter-spacing: 0.3cm
}
The remaining part is a menu. To create one we can use a list and modify it with CSS.
<div id="menu">   
   <ul class="menu">      
   <li><a href="#">Lorem ipsum</a></li>      
   <li><a href="#">Fusce vulputate</a></li>      
   <li><a href="#">Donec blandit</a></li>      
   <li><a href="#">Proin nulla</a></li>      
   <li><a href="#">Nam nibh</a></li>   
</ul></div>
First, we want to remove the bullets:
.menu{    
   list-style-type: none;
}
Now we can customize the elements of this list:
.menu li {                 
   padding: 2px;    
   margin: 2px;
}
We wish also to avoid underlining a link, but make it changing color every time a cursor is over it.
.menu li a{  
   text-decoration: none;  color: #003666;
}
.menu li a:hover{  
   text-decoration: none;  color:#ffffff;
}
At this point I should explain the pseudo-classes. These are some "sub" classes of an selector that may add some special effect to an element e.g change a style of an element's child selector:first-child.
One of such pseudo-classes is :hover, that change a style of an element when the cursor is over it. That is very useful to define a link behavior, but you can use it also with other selectors.
Now let’s add some simple formatting to the footer. It looks nice when a text alignment in a footer is on opposite site to a text alignment in a header, so in this case to the right.
.footer{    
   font-size:10px;    
   text-decoration: bold;    
   color:#ffffff;     
   display:block;    
   text-align: right; 
}
Of course it is difficult to talk about an alignment of an inline element that takes only so much space as it needs for a contained element. To make an effect on text-align modification the element must be a block. Of course it can be achieved using <div> element that is a block by definition, but it is always worth to assure it (adding display:block)when we create a style for a class and we don’t know to what kind of element this class will be applied for.
The template is ready. You can see it here .
Next time I will show how to create a replacement of this layout for IE.

Sunday, February 1, 2009

From beginning….(HTML and CSS in a nutshell)

I considered, for a pretty long time, what could be my firs post. Finally, I decided to start with basics which could be only HTML and CSS. If you want to be someone more than an observer on the Internet you should know how to create a simple and valid website, that will look the same in every popular browser. This task, anyway, is sometimes more difficult that it seems to be… e.g. using position:fixed. Unfortunately this simple and powerful property is not working in IE.
 
Ok, let’s start with some basics of html & css. In next post I will show how to create a nice and easy layout using position:fixed, and then how to create similar one, for IE, taking into consideration its all oddities.
 
 
A very simple website:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="keywords" content="page content"/> 
<meta name="description" content="page description"/> 
<title>Css basics tutorial sample</title> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body>   
</body> 
</html>
Actually displays… nothing.  All content that you see in a browser  is placed between <body></body> tag. There are more tags used to show the information e.g. <h1>, <p>, <div>, and <span>. Some of them will be described later.
First of all you should declare document’s type and dtd.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
Here you have more declarations and explanations: http://www.w3.org/QA/2002/04/valid-dtd-list.html The real document starts with <html> tag and everything must be included between <html></html>. Head includes some configurations and information for indexing engines, for example:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
tells a browser that the website uses UTF-8 encoding (more encodings for example here: http://www.w3schools.com/tags/ref_charactersets.asp)
<meta name="keywords" content="page content"/>
- keywords that search engine should use to index your website (at least that was the idea few years ago)
<meta name="description" content="page description"/>
- that is short description of a website, it is also good to have, because it may appear in search results
<title>...</title> 
- this is the website title that appears in a browser's toolbar
<link href="style.css" rel="stylesheet" type="text/css" />
- a link to cascade style sheet file (more about it below).
 
A single "style" is build as follows:
selector {property: value}
A selector can be:
  • existing html tag:
    p {font-size: 10px}
  • a general class:
    .big {font-size: 20px} <div class="big">Big font</div><p class="big">Big font</div>
  • a class of a particular tag:
    p.right {text-align: right} <p class="big">Big font</p>
  • id:
    #green{color:#006600} <p id="green">i'm green</p>
There is one important difference between id and class. Id of a given name can be use only once on one site. Therefore they can be used e.g. to build a layout. A given class can be used with many tags within one site, therefore it is very useful for formatting. If you find it may have sense, you can also use them together:
<p class="big" id="green">big&green</p>
There are three ways to insert a style to a website.
  • in head section of the website:
    <style type="text/css" > 
      hr {color: sienna}
      p {margin-left: 20px}
      body {background-image: url("images/back40.gif")}
    </style> 
         
  • or as a link from external file, also in head section (I mentioned it before):
    <link href="style.css" rel="stylesheet" type="text/css" /> 
  • or direct:
    <p style="color: red">This is a paragraph</p>
That’s the basic. Now the goal is to create a layout. This will be explained next time.