View Full Version : Border on absolute positioned div

01-19-2007, 08:19 AM
I can't get all four borders to be colored on this div because it has a "clip" property. Because of this property I am not getting borders on top or left sides.

This div has an absolute position because it is required to use the clip property.
How can I frame this div on all sides and still clip the iframe?

<div id="ifrm1" style="top:0cm;right:40%;overflow:false;border: 2px
solid red;position:absolute;clip:rect(29 auto auto 270);">
<iframe style="" name="loginframe" width=500 height=65 frameborder="no"

01-20-2007, 09:24 AM
Seems overly complicated. The overflow property has no 'false' value. Clipping isn't all that well supported across browsers, at least not in my experience. You shouldn't use cm for top position even though it is 0. There is no reason to have style="" for the iframe, it does nothing. The src attribute cannot have _blank as a value and should have a space after it.

I'd forget about absolute positioning and clip, using the correct value for overflow which, for this is probably hidden and setting the dimensions as desired should work out, if you need to shift the iframe's position within the div, make the div position relative and the iframe position absolute.

You may want to play with the numbers and it will be hard to tell where the iframe is unless you put a page in it but, this will get you off and running I think:

<div id="ifrm1" style="overflow:hidden;border: 2px solid red;position:relative;width:480px;height:60px;">
<iframe style="position:absolute:top:-10px;left:-10px;" name="loginframe" width="500" height="65" frameborder="0" src="about:blank" scrolling="no"></iframe>

01-30-2007, 05:36 AM
Thanks so much!!! This is the solution that I've been searching for so long for!
It beats using the clip property! I had to tweak the code a bit but this is what I got working to perfection.

<div id="bla" style="overflow:hidden;border: 2px solid red;position:relative;width:590px;height:180px;">
<iframe style="position:absolute;top:-300px;right:-125px;width:1000px;height:1000px;" name="blabla" frameborder="0"