Results 1 to 3 of 3

Thread: Border on absolute positioned div

  1. #1
    Join Date
    Jan 2007
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Border on absolute positioned div

    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?
    Code:
    <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"  
    src="_blank"scrolling="no"></iframe>
    </div>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    HTML Code:
    <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>
    </div>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2007
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

    Code:
    <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" 
    src="http://profiles.games.yahoo.com/games/profile2?name=tripped_out_josh&intl=us&consolidater=spades.yahoo" 
    scrolling="no"></iframe>
    </div>

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •