asked on

Help with rounded corners CSS and floating div

The following page layout renders fine in Safari and IE7 but not in FF. The div that should wrap the content with the rounded corners collapses. When I add the float attribute tot the CSS for the divs, the rounded corners div collapses.

Isolated to FF - any suggestions with out using tables?

http://www.langfamily.ca/corners.html

LordWolfy

You appear to have some some float parameters where there shouldnt be.

This example is pasted from the source of your paage and eliminates the collamsing of the rounded div. The text is still a bit untidy but I'm sure you can handle that yourself :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 
<style>
.c6_4            { background-color     : #fff;
                   margin               : 15px 0 15px 0;
		   display: inline-block;
                 }
 
.c6_4tl          { background           : url(http://www.langfamily.ca/images/corners_6px.gif) top left no-repeat;
                   background-position  : 0% -96px;
                   display              : inline-block;
                   height               : 6px;
                   width                : 100%;
                 }
 
.c6_4tr          { background           : url(http://www.langfamily.ca/images/corners_6px.gif) top right no-repeat;
                   background-position  : 0% -102px;
                   height               : 6px;
                   width                : 6px;
                   float                : right;
                 }
 
.c6_4bl          { background           : url(http://www.langfamily.ca/images/corners_6px.gif) top left no-repeat;
                   background-position  : 0% -108px;
                   display              : inline-block;
                   height               : 6px;
                   width                : 100%;
                 }
 
.c6_4br          { background           : url(http://www.langfamily.ca/images/corners_6px.gif) top right no-repeat;
                   background-position  : 100% -114px;
                   display              : inline-block;
                   height               : 6px;
                   width                : 30%;
                   float                : right;
                 }
 
#gl_container {
  /* the following forces content to left align */
  margin:0 auto;
  width:990px;
}
#gl_header {
  height:45px;border:
}
 
#gl_content { /* standard left & right blocks - switched to dynamically by functions.php*/
  margin:0 15px 20px 15px;
  width:620px;
}
 
#gl_navigation { /*the leftblocks*/
  margin-right:0;
  width:320px;
  margin-right:15px;
}
 
 
</style>
 
 
</head>
<body style="background-color:#CCC;">
 
 <table id="gl_container" cellpadding="0" cellspacing="0" border="0">
  <tr>
   <td>
 
     <div id="gl_wrapper" style="clear:both;">    
        <!-- start rounded corners -->
        <div class="c6_4">
         <div class="c6_4tl"><div class="c6_4tr"></div></div>
    
         <div id="gl_content">  
<div style="padding:10px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ornare. Nam mauris turpis, tempor vel, bibendum 
 
pellentesque, elementum id, lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse potenti. 
 
Suspendisse potenti. Proin vitae tellus a nibh molestie porta. Mauris rutrum neque at nulla. Sed sodales, nunc id 
 
aliquet molestie, urna est sodales mi, eget pharetra risus libero vel mi. Etiam faucibus laoreet risus. Praesent nec 
 
tortor. Mauris blandit ligula. Aliquam elementum mattis elit. Nulla massa magna, elementum id, nonummy vitae, euismod 
 
a, nisl. Phasellus accumsan sodales orci. Nam eget ante.
</div>
 
        </div> <!-- end of gl_content -->
 <div id="gl_navigation">
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ornare. Nam mauris turpis, tempor vel, bibendum 
 
pellentesque, elementum id, lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse potenti. 
 
Suspendisse potenti. Proin vitae tellus a nibh molestie porta. Mauris rutrum neque at nulla. Sed sodales, nunc id 
 
aliquet molestie, urna est sodales mi, eget pharetra risus libero vel mi. Etiam faucibus laoreet risus. Praesent nec 
 
tortor. Mauris blandit ligula. Aliquam elementum mattis elit. Nulla massa magna, elementum id, nonummy vitae, euismod 
 
a, nisl. Phasellus accumsan sodales orci. Nam eget ante.
</div>
 
        <!-- end rounded corners -->
        <div class="c6_4bl"><div class="c6_4br"></div></div>
    </div>
</div> <!-- end of gl_wrapper -->
 
</td>
</tr>
</table>
 
</body>
 
</html>

Open in new window

Bl248

ASKER

I need the floats as this is a significantly reduced version of the real site - which is a portal based theme with a three column layout. I've reduced it to the smallest set of HTML and CSS to isolate and test the issue.

Removing the floats is not what I was after as I could have done that ;)

ASKER CERTIFIED SOLUTION

LordWolfy

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Bl248

ASKER

Thanks!!!

The addition of the floats for all the corner related declarations and the correction of the width for the .c6_4br declaration.

I appreciated the quick answer.