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 (http://xistense.ilive.ro/pixelpost/)

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.

http://img220.imageshack.us/img220/5073/ppie1pz8.th.jpg (http://img220.imageshack.us/my.php?image=ppie1pz8.jpg) http://img88.imageshack.us/img88/8878/ppie2dq4.th.jpg (http://img88.imageshack.us/my.php?image=ppie2dq4.jpg)

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.