By uomeds on

I am trying to adapt the provided Panels rounded corner style components to use in tables elsewhere on the site.

Everything is going well, except I can't seem to get two of the corners in place. You can see here, on top a table created using

and inline css, and below, a fully CSS version:

http://uomeds.com/gallery2/themes/matrix/templates/ROUNDED.HTML

The top right and bottom right images of the full CSS table are being wrapped to the next line, and I'm not sure why or how to fix it.

My CSS is:

<head>
<style type="text/css">
<!--

.gal-t-edge, .gal-b-edge, .gal-l-edge, .gal-r-edge, .gal-wrap-corner {
  position: relative;
  zoom: 1;
}
.gal-t-edge {
  background: url(/sites/all/modules/panels/plugins/styles/corners/shadow-t.png) repeat-x 0 top;
  font-size: 1px;
}
.gal-b-edge {
  background: url(/sites/all/modules/panels/plugins/styles/corners/shadow-b.png) repeat-x 0 bottom;
  font-size: 1px;
}
.gal-l-edge {
  background: url(/sites/all/modules/panels/plugins/styles/corners/shadow-l.png) repeat-y 0 0;
}
.gal-r-edge {
  background: url(/sites/all/modules/panels/plugins/styles/corners/shadow-r.png) repeat-y right 0;
}
.gal-wrap-corner {
  background: #fff !important;
}
.gal-wrap-corner .gal-t-edge, .gal-wrap-corner .gal-b-edge {
  height: 11px;
}
.gal-wrap-corner .gal-l, .gal-wrap-corner .gal-r {
  top: 0;
  height: 11px;
  width: 11px;
  background-image: url(/sites/all/modules/panels/plugins/styles/corners/corner-bits.png);
}
.gal-wrap-corner .gal-l {
  left: 0;
}
.gal-wrap-corner .gal-r {
  right: 0;
  background-position: -11px 0;
}
.gal-wrap-corner .gal-b-edge .gal-l {
  background-position: 0 -11px;
}
.gal-wrap-corner .gal-b-edge .gal-r {
  background-position: -11px -11px;
}
.gal-wrap-corner .gal-r-edge {
  padding: 5px 24px;
}

.gal-rounded-corner {
  margin-bottom: 1em;
}

-->
</style>
</head>


<body>
<div class="gal-rounded-corner">
  <div class="gal-wrap-corner">
    <div class="gal-t-edge"><div class="gal-l"></div><div class="gal-r"></div></div>
    <div class="gal-l-edge">
      <div class="gal-r-edge clear-block">
 
       CONTENT<br><br>more content

      </div>
    </div>
    <div class="gal-b-edge"><div class="gal-l"></div><div class="gal-r"></div></div>
  </div>
</div>

</body>

I'm really not very good with CSS (though I'm trying my best), so any help would be very, very appreciated.

Thanks.

⋅ Categories: Drupal 6.x

Comments

jarek foksa’s picture

jarek foksa commented 
.gal-wrap-corner .gal-l, .gal-wrap-corner .gal-r {
position: absolute;
}

BTW, there are more elegant ways of doing rounded corners, take a look at CurvyCorners

uomeds’s picture

uomeds commented

Thanks for the suggestions, Jarek.

I tried "position: absolute" and while it does work there, it actually makes my in-site application look worst.

I currently have Gallery2 installed as a Drupal module and I am trying to wrap it in these corners. With "position: relative" it is perfect except as above, the right corners are both bumped to the next line. With "position: absolute" all the little corner images fly up to the very top left and right of the browser window, way outside of where they should be.

Also, I looked a CurvyCorners, and while it's impressive, I would prefer to do this using the Panels .png's so it matches my site and has the finished look I'm after when done.

I feel like there should be some way, any way, to make this work. I even tried doing it with traditional tables, but had trouble there getting the rows/columns to align.

Any more ideas?

uomeds’s picture

uomeds commented

Here's two screenshots. Either way, it isn't working, but it's so close with "position:relative" I feel like there's got to be some way to get this wrap right.

http://uomeds.com/position-relative.png

http://uomeds.com/position-absolute.png

Thanks again.

jarek foksa’s picture

jarek foksa commented

If parent element has position: relative and child element has position: absolute, then child element can be positioned relatively to parent using top, bottom, left and right. But if there is no parent element with position: relative, then child is positioned relatively to screen boundaries - which appears to be what happens here.

I'm guessing that you have to add position: relative to one of the wrapper divs. You could also try this:

.gal-wrap-corner .gal-r {
background-position:-11px 0;
float:right;
position:relative;
right:0;
top:-11px;
}
uomeds’s picture

uomeds commented

Jarek you rock! 

.gal-wrap-corner .gal-r {
background-position:-11px 0;
float:right;
position:relative;
right:0;
top:-11px;
}

Worked like a charm.

Thanks again.

lias’s picture

lias commented

thanks