#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    New Hampshire
    Posts
    116
    Rep Power
    12

    Angry CSS Border issues


    I've searched the archives to no avail. I am layering some svg images with div tags, and have set borders around the images. They are maps, one is an overview of the larger one set in the upper right corner of the larger one. My overview svg image displays correctly over the top of the larger one, but the border is behind the larger one. I've tried z-index, position: absolute; top: and what not. Any insight would be most appreciated.

    Sean
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    187
    Rep Power
    11
    could i see the source to play round with?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    New Hampshire
    Posts
    116
    Rep Power
    12
    The html is first and then the corresponding CSS. I tried adding an overview2 that hasn't helped. Thanks.


    <div class="overview">
    <embed class="overview2" style ="position: absolute" name="over" src="files/overview/view1.svg" width="137px" height="130px" type="image/svg+xml" />
    </div>

    <div class="map">
    <embed class="map2" style ="position: absolute" name="map" src="files/1.svg" width="646px" height="539px" type="image/svg+xml" />
    </div>


    .overview {
    position: absolute;
    border: 3px solid black;
    left: 6px;
    top: 101px;
    width:142px;
    height: 135px;
    }
    .overview2 {
    position: absolute; top:
    z-index: 9999;
    }
    .map {
    background: white;
    border-width: 3px;
    border-style: groove;
    border-color: silver;
    position: absolute;
    left: 3px;
    top: 98px;
    width:652px;
    height:545px;
    }

IMN logo majestic logo threadwatch logo seochat tools logo