Ciao,

perché aumentando la dimensione del carattere del browser ("Ctrl" + "+") in Firefox e Chrome i contenitori aumentano con il carattere, mentre in IE 7 il logo nell'header va a sovrapporsi al menu orizzontale sottostante?

Di seguito il codice CSS:
codice:
 body {height: 100%; width: 100%; margin:0; padding:0; border: 0; overflow: hidden; /*height: 100%;*/ max-height: 100%; }
 
 #header {position:relative; height: 85px; top: 0; left: 0; /**/width: 100%; /*overflow: hidden;  */color: black; background-color: #ccddff;}
 
 #logo
 {
 	margin:0;
 	padding:0;
 	
 	height: 85px; 	
 	width: 440px; 	
 	background:#fffff3 url(../../img/header.jpg) no-repeat top left; 	
 }
 
 /*-----------------  GLOBAL LINKS  -----------------*/
 
#linkMenu
{
position:absolute;
/*float:right;*/
line-height:0.9em;
top:10px;
right:20px;
text-align:right;
}

#linkMenu ul
{
width:190px;
margin:0;
padding:0;
}

#linkMenu ul li
{
display:inline;
list-style: none;
margin:0;
padding:0;
}

#linkMenu ul li a
{
display:inline;
padding:2px;
text-decoration: none;
}

/*------------------    WORKSPACE TITLE area --------------*/

#workspaceTitle
{
	position:absolute;
	height:auto;
	width:auto;
	top: 10px;
	left: 600px;
		
	
	/*margin-left: 0 0 0 600px;*/
	padding: 1px;
	color: #33cc3d;
	background-color:Transparent;
	border: 1PX dashed black;/**/
}

#workspaceTitle h1{font: bold 13px Sans-Serif;}

#workspaceTitle p{font:10px Arial;}

/*-------------------   TOP MENU  -------------*/

#topMenu
{
font: bold 13px Arial;
width: 100%;			/*leave this value as is in most cases*/
overflow: hidden;

min-width: 500px;
background-image: url(../../img/headerMenu.jpg);
background-repeat: no-repeat;
border-top: 1px dashed Silver;
}

#topMenu ul
{
margin: 0 0 0 250px;
padding: 0;
float: left;

width: auto; /*width of menu, if fixed adding many item can introduce problems*/

border-width: 1px 0;
background: black url(../../img/indentbg.gif) center center repeat-x;	
}

#topMenu ul li
{
	display: inline;
	
}

#topMenu ul li a
{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #564c66; /*dark purple divider between menu items*/
}

#topMenu ul li a:visited{
color: white;
}

#topMenu ul li a:hover, #topMenu ul li .current{
color: white !important;		 /*text color of selected and active item*/
padding-top: 6px;				/*shift text down 1px for selected and active item*/
padding-bottom: 4px;			 /*shift text down 1px for selected and active item*/
background: black url(../../img/indentbg2.gif) center center repeat-x;
}
HTML
codice:
<div id="header">
    <div id="logo"></div>

<div id="workspaceTitle"> 
        <h1>VEA DEMO - TITLE</h1>
    </div>    

    <div id="linkMenu">
        <ul>[*]Home | [*]link A[*]link B[/list]
    </div>
</div>

<div id="topMenu">
    <ul>[*]MyDesk[*]Tasks[*]Documents[*]Meetings[*]Administration       [/list]
</div>
Grazie