*Resent, never received any responses* I am using CSS and images inspired by a tutorial at alistapart.com to create rounded box corners for elements on a site I am designing but am running into problems when I insert content into the box.
Basically, the problem is in FF when I insert content into the <div>s controlling the box, it pushes my corners down if the element is a block-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 the element is a <h2> the float doesn't help and the content is pushed down anyway. 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 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 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"> </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"> <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" /> <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 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 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"> </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> ============================ 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/
