CSS+IE strange behaviour

[xact]

I'm trying to create a new template and I'm having a small difficulty when I try to view it with Internet Explorer 7.

The .css looks like this:

#header{
	position: fixed;
	top: 0px;
	width: 99%;
}

#header a,
#header a:link,
#header a:visited {
	color: #3F83A2;
	text-decoration: none;
	border: 0px;
	
}

.leftelement {
   position: absolute;
   left: 0;
   width: 49%;
   text-align:left;
   }

.rightelement {
   position: absolute;
   right: 0;
   width: 49%;
   text-align: right;
   }

The .html looks like this:

		<div id="header">
			 <div class="leftelement">	
			 		
				</div>
			 <div class="rightelement">
			 		<LINK_TO_PAGED_ARCHIVE>|
					<a href="index.php?x=about" title="about">about</a> | 
					<a href="#" onclick="setActiveStyleSheet('light'); return false;"><img src="templates/existence/images/style_light.gif" alt="light style" border="0"/></a>
					<a href="#" onclick="setActiveStyleSheet('dark'); return false;"><img src="templates/existence/images/style_dark.gif" alt="dark style" border="0"/></a> |
			 </div>
		</div>

link

When IE7 is not maximized, everything is ok. When maximized, the links in the upper-right corner flies outside the screen. Sometimes I can see only two or three letters from the first link. This behaviour is only on IE, firefox works just fine.



How can I fix this?

[austriaka+]

try to replace the "fixed" in #header by absolute
or wrap a div around which is absolute

[xact]

Solved. Thanks for the feedback, you gave me the idea to play with the "position" and the solution was to set "position: fixed;" for .rightelement in the css file.