[css-d] rounded corner problem

Marty Martin Fri, 17 Jun 2005 05:40:01 -0700

I am using CSS and images inspired by a tutorial at alistapart.com tocreate rounded box corners for elements on a site I am designing but amrunning into problems when I insert content into the box.

Basically, the problem is in FF when I insert content into the <div>scontrolling the box, it pushes my corners down if the element is ablock-level element. I can get around this if the first item in the<div> is a <p> by applying a left float to the <p>. However, if theelement is a <h2> the float doesn't help and the content is pushed downanyway.


Any suggestions?  Here are the two pages and their relevant code:

============================
http://new.icn.net/hub/index.cfm
============================

<div class="contentWrapper" style="margin: 15px 0; width: 360px; float:left; background-color: ##FFF;">

               <div class="content">

<img class="borderTL"src="#request.images#/whiteOnGreyCornerTL.gif" alt=" " width="14"height="14" /><img class="borderTR"src="#request.images#/whiteOnGreyCornerTR.gif" alt=" " width="14"height="14" />

                   <p style="float: left; padding-left: 5px;">
                       <strong>Watch Money Clip</strong><br />
                       Contemporary silver dial on the Watch Money Clip.
                       <br />
                       <br />

<strong>Feature Name:</strong> blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah

                       <br />
                       <br />

<span style="color: red;"><strong>Price:$15.00</strong></span><br />

                       <em>Suggested Retail: $35.00</em>
                   </p>
                   <div class="roundedCornerSpacer">&nbsp;</div>
               </div>
               <div class="bottomCorners">

<img class="borderBL"src="#request.images#/whiteOnGreyCornerBL.gif" alt=" " width="14"height="14" /><img class="borderBR"src="#request.images#/whiteOnGreyCornerBR.gif" alt=" " width="14"height="14" />

               </div>
           </div>

============================
http://new.icn.net/hub/index1.cfm
============================

<div class="contentWrapper" style="margin: 15px 0; width: 360px; float:left; background-color: ##FFF;">

               <div class="content">

                   <h2 style="float: left;">Watch Money Clip</h2>
                   <p style="clear: both; padding-left: 5px;">
                       Contemporary silver dial on the Watch Money Clip.
                       <br />
                       <br />

<strong>Feature Name:</strong> blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah

                       <br />
                       <br />

<span style="color: red;"><strong>Price:$15.00</strong></span><br />

                       <em>Suggested Retail: $35.00</em>
                   </p>
                   <div class="roundedCornerSpacer">&nbsp;</div>
               </div>
               <div class="bottomCorners">

               </div>
           </div>

============================
CSS for both pages
============================
/* ROUNDED CORNERS */

.roundedCornerSpacer {
   margin: 0;
    padding: 0;
    border: 0;
   clear: both;
   font-size: 1px;
    line-height: 1px;
}
/* In the CSS below, the numbers used are the following:
   1px: the width of the border
   3px: a fudge factor needed for IE5/win (see below)
   4px: the width of the border (1px) plus the 3px IE5/win fudge factor
   14px: the width or height of the border image
*/
.borderTL, .borderTR, .borderBL, .borderBR {
   width: 14px;
    height: 14px;
   padding: 0;
    border: 0;
   z-index: 99;
}
.borderTL, .borderBL {
   float: left;
   clear: both;
}

.borderTR, .borderBR {
   float: right;
   clear: right;
}

.borderTL {
   margin: 0;
   padding-left: 1px;
}

.borderTR {
   margin: 0;
   padding-right: 1px;
}

.borderBL {
   margin: -1px 0 0 0;
}

.borderBR {
   margin: -1px 0 0 0;
}
/* IE5-5.5/win needs the border scooted to the left or right by an
  additional 3px! Why? */
.borderTL {
   margin-left: -4px;
   ma\rgin-left: -1px;
}
html>body .borderTL {
   margin-left: -1px;
}
.borderTR {
   margin-right: -4px;
   ma\rgin-right: -1px;
}
html>body .borderTR {
   margin-right: -1px;
}
.borderBL {
   margin-left: -3px;
   ma\rgin-left: 0px;
}
html>body .borderBL {
   margin-left: 0px;
}
.borderBR {
   margin-right: -3px;
   ma\rgin-right: 0px;
}
html>body .borderBR {
   margin-right: 0px;
}
/* To get around a known bug in IE5/win, apply the
  border (no margin, padding or positioning) to the
  content class and apply whatever positioning you
  want to the contentWrapper class. */
.content {
   margin: 0;
   padding: 0;
}
.contentWrapper {
   /* position this div however you want, but
      keep its padding and border at zero */
   padding: 0;
   border: 0;
}

Thanks in advance!

--
Marty Martin
Senior Web Developer
ICONS, Inc.

Internet Development | Marketing | Support
e: [EMAIL PROTECTED]
p: 540.343.8322  |  f: 540.343.0691
w: http://icn.net

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] rounded corner problem

Reply via email to