Sat, 2004-10-02 23:31
I am currently using the following code in my css file
.header {
position:absolute;
left:310px;
right:10px;
height:200px;
background-color:#FF0000;
z-index:2;
}
and it works fine with all but IE where it doesn't stretch across the page, i can't use width:100%; as the left position setting means that it goes over the page by the left value
Mon, 2004-10-04 17:48
#1
Re: pos-abs left and width incompatablility
gifster wrote:
I am currently using the following code in my css file
.header {
position:absolute;
left:310px;
right:10px;
height:200px;
background-color:#FF0000;
z-index:2;
}
and it works fine with all but IE where it doesn't stretch across the page, i can't use width:100%; as the left position setting means that it goes over the page by the left value
Did you try setting width: auto? (just a guess)
Tue, 2004-10-05 13:11
#2
pos-abs left and width incompatablility
The reason the header is stretching across the screen is because of the rule
right:10px;
which most browsers take to be 10px from the right hand edge of the element, while IE interprets it as being 10px from the left hand edge of the element. For a non-validating IE only horrible hack solution, you can place this width expression in your style for .header
right:auto; width:expression(screen.availWidth-this.scrollWidth-310-10);
(element width=screen width-element width-left position-right position)
placing them in a * html selector will hide these rules from other browsers. NOTE: If you try that expression with your right:100px, it crashes IE!
Not ideal, but that'll produce the layout you're after... does anyone have another, cleaner hack for this behaviour?