2 replies [Last post]
gifster
Offline
newbie
Last seen: 17 years 17 weeks ago
Joined: 2004-10-02
Posts: 1
Points: 0

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

kojiro
Offline
Regular
Last seen: 17 years 24 weeks ago
Joined: 2004-08-11
Posts: 28
Points: 0

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)

All the good sigs were taken.

chris_sw
Offline
Enthusiast
Leeds, UK
Last seen: 17 years 18 weeks ago
Leeds, UK
Joined: 2004-09-21
Posts: 115
Points: 0

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?