Rounded corners on main content area

While it is different from the method you are using, you may want to look into Nifty Corners. It is a javascript solution that is widely used and reasonably well explained. Check it out at:

http://www.html.it/articoli/niftycube/index.html

I wish you luck.

Have you looked at the Nifty Corners module?

Nancy W.
proudly running 3½ sites on Drupal so far

I've given up trying to wedge corners into container divs that just happen to be able to be forced to pretend to have corners in the right place. That approach promises to leave your HTML unsullied, clean and semantic, but forces your CSS to insert its magic into bits of the page that don't really deserve it. Not to mention all the browser quirks to work around.

Instead I've thrown in the towel and dropped useless placeholders into the page where they are needed, and styled them instead.

I say modify your template so your #container div includes

<span class='corner-top-left'></span>
<span class='corner-top-right'></span>

... I usually drop them in before the close tag of that container

Then your CSS has:

#container{ position:relative }
#container .corner-top-right {
  position:absolute; width:13px; height:13px; top:0; left:0; 
  background:url(images/body_top_left_corner_rounded.png)
}
#container .corner-top-right {
  position:absolute; width:13px; height:13px; top:0; right:0; 
  background:url(images/body_top_right_corner_rounded.png)
}

Your HTML gets a tiny bit of cruft, but your CSS actually makes sense now.

Plus it seems to work as advertised in all browsers (unless you are also using borders, but that's also fixable)

The alistapart approach (emulated widely) is sorta clever, but also really ugly to debug, extend or maintain. It also often prevents you from using the page elements natural paddings and margins because of dodgy side-effects you then have to account for.

It's an alternative. YMMV

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

Hi Folks,

I'm afraid I have only an additional question, but no answers for the OP.

I am modifying a PHP Template theme (bluemarine, specifically) for my site. I want to have image borders around each node. I do not want any Javascript on my page.

I know I'll need to add a dl or table structure into the php for the node construct, but I'm not sure where or how to insert it. The node php looks as follows:

  <div class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">
    <?php if ($picture) {
      print $picture;
    }?>
    <?php if ($page == 0) { ?><h2 class="title"><a href="<?php print $node_url?>"><?php print $title?></a></h2><?php }; ?>
    <span class="submitted"><?php print $submitted?></span>
    <span class="taxonomy"><?php print $terms?></span>
    <div class="content"><?php print $content?></div>
    <?php if ($links) { ?><div class="links">&raquo; <?php print $links?></div><?php }; ?>
  </div>

I can set the node class to have no border and no padding, then build my box inside it and around all of the php code, but I'm not sure how to build it. I'd like to have all four corners be fixed graphic images (GIF files with transparency) and I'll have a drop shadow on the bottom and right sides, for which I plan to use transparent shadows. Ideally, I wan't it to scale an arbitrary amount in any direction, so I'll have unique image files for each border, which will repeat in the appropriate direction.

Any suggestions would be appreciated. I already tried inserting a table, as below, but it failed to show up at all:

<div class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">
  
    <table class="AvatarNodeTable">
      <tr>
        <td>
          <img id="upperleft" src="images/center_box_ULC.gif" alt="" />
        </td>
        <td class="UpperNodeBorder">&nbsp;</td>
        <td>
          <img id="upperright" src="images/center_box_URC.gif" alt="" />
        </td>
      </tr>
      <tr>
        <td class="LeftNodeBorder">&nbsp;</td>
        <td>
            
    <?php if ($picture) {
      print $picture;
    }?>
    <?php if ($page == 0) { ?><h2 class="title"><a href="<?php print $node_url?>"><?php print $title?></a></h2><?php }; ?>
    <span class="submitted"><?php print $submitted?></span>
    <span class="taxonomy"><?php print $terms?></span>
    <div class="content"><?php print $content?></div>
    <?php if ($links) { ?><div class="links">&raquo; <?php print $links?></div><?php }; ?>

        </td>
        <td class="RightNodeBorder">&nbsp;</td>
      </tr>
      <tr>
        <td>
          <img id="upperleft" src="images/center_box_LLC.gif" alt="" />
        </td>
        <td class="LowerNodeBorder">&nbsp;</td>
        <td>
          <img id="upperright" src="images/center_box_LRC.gif" alt="" />
        </td>
      </tr>
    </table>

  </div>

Thanks.

Styling rounded corners for blocks

You don't need JS as a work-around - Drupal has too much as it is... IMO.

HTH

Mike
------------------------------------------------------------------------------------------
A simple thanks to those that help, a price worth paying for future wealth.