problems positioning right

[k0r54]

Hi,

I have a small problem when i use this code:

#login {
position:absolute;
top:108px;
height:91px;
width:145px;
right:0;
border-left-color:#CCCCCC;
border-left-style:solid;
border-left-width:1px;
border-bottom-color:#CCCCCC;
border-bottom-style:solid;
border-bottom-width:1px;
background-color:#F5f7f7;
padding-right:4px;
z-index:600;
}


I get a problem where in firefox, opera and ns it is fine, but in IE it is 1px away from the right margin. If i set right to -1px then it puts a horizontal bar on the other 3 browsers?

Any ideas why this is happening.

k0r54

[Fang]

Need the full document to see the problem.

[k0r54]

Hi, the code is here

http://dnet.apc-compunet.co.uk/

and the CSS is here

http://dnet.apc-compunet.co.uk/css/main.css

Thanks
k0r54

[Fang]

It appears to be a rounding error.
Try re-sizing the browser, slowly, you will see the background image which shows through to the right of #login disappear then reappear.
You could give #login right:-1px; and add 1px to it's width.

[k0r54]

the problem is it then puts it out on the other 3 browsers, firefox ect... ????

[k0r54]

Any Ideas

[Fang]

A quick fix would be to slice tilebottom.jpg, have the top half 100% width and
the bottom half 99% width. That way nothing 'appears' to the right of #login.

[k0r54]

mmm,

Yeah but it wouldn't solve the problem just havin nufin behind it,

I think i have to redesign a little bit!

If you have any ideas or a good way to do this let me know

Thanks
k0r54

[Fang]

Yeah but it wouldn't solve the problem just havin nufin behind it, It's a rounding error, depentent on the width of the browser.

[k0r54]

how come though, when you float right, the problem doesn't happen

Sorry about all the q's

k0r54

[Fang]

floated is floated as far as the parent element will allow, absolute is calculated from a reference point.
Try to avoid mixing:
units; relative and absolute
position; relative and absolute

[k0r54]

Ok, i have done this and it only does it in IE so it fixes it

/* IE Hack */
* html #login {
right:-1px;
}

I dont know why this works,

Can some1 explain to me please ??

Thanks
Adam

[Fang]

It is a rule that only IE applies, http://centricle.com/ref/css/filters/