Alex Mauzon

There is no brand new subject, really.
even 2 old articles (Vertical centering using CSS and CSS Vertical Centering again) from this blog.

2 problems:
1) Small height: if browser height is smaller than main container (for all browsers):


function adjustHeight(){
   if(document.body.offsetHeight > 450){
      document.body.style.height='100'+'%';
   }else{
      document.body.style.height='450px';
   }
}

onload and onresize, of course.

2) IE7: this rule:

#ContainerDiv {position: relative; top: -50%;}

moves the #ContainerDiv above the top browser’s border for 50%. Reasonable, huh.

The cure:

#ContainerDiv {position: relative; top: expression(document.body.offsetHeight/2-this.offsetHeight/2);}

for custom IE7 CSS file using cond. comments:

<!--[if IE 7]>
<link rel="stylesheet" href="/css/ie7.css" type="text/css" media="screen" />
<![endif]-->

Don’t use em for font-size. Use %.
Usually 1em=100%.

Create a model:


<p style="font-size: 1em;">1 em Lorem Ipsum text</p>
<p style="font-size: 100%;">100% Lorem Ipsum text</p>


Then try to change text size (IE: View -> Text Size or Ctrl+Scroll) and you’ll get the difference.
But better just save the time and don’t use ems

Disclamer: of course px is EVIL We don’t talk about fixed font-sizes at all.
Disclamer #2. Of course Opera and FireFox are best browsers and they change not only font-size but everything. I am talking about damn IE.

As we all know there is a problem for :hover pseudoclass for Microsoft Internet Explorer.
There are many solutions (eg csshover.htc) but all of them have one big and ugly problem: MS IE flickering on mouseout event.

I mean when you move your mouse WITHIN the object but over some child nodes mouse doesn’t leave the HOVERED object but IE thinks it does and onmousout event occurs.

All correct browsers let us use simple :hover pseudoclass for any tag. Except IE. So we should solve the problem for IE only.

Continue reading »

event:Selectors allow you to apply an event such as mouseover, mouseout, click, et al using a CSS style syntax. It keeps your layers separated and greatly reduces the amount of code you have to write.

event:Selectors library

position: fixed; is basically the same as position: absolute; except that when the user scrolls the page, the element does not scroll with it, it just says exactly where it was. There are many pages that want to use this in order to position logos or menus.

full article/source

Solution:
Continue reading »