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
Bl248Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
LordWolfyConnect With a Mentor Commented:
oops - missed the ' When I add the float attribute tot the CSS for the divs' part in your original question :p

In that case the solution is the adding of a float to your main .c6_4 class :)

<!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;
		   margin-top: 0px;
		   float: right;
                 }
 
.c6_4tl          { background           : url(http://www.langfamily.ca/images/corners_6px.gif) top left no-repeat;
                   background-position  : 0% -96px;
                   height               : 6px;
                   width                : 100%;
                   float                : left;
                 }
 
.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;
                   height               : 6px;
                   width                : 100%;
                   float                : left;
                 }
 
.c6_4br          { background           : url(http://www.langfamily.ca/images/corners_6px.gif) top right no-repeat;
                   background-position  : 0% -114px;
                   height               : 6px;
                   width                : 6px;
                   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*/
  float:left;
  margin:0 15px 20px 15px;
  width:620px;
}
 
#gl_navigation { /*the leftblocks*/
  float:right;
  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

0
 
LordWolfyCommented:
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

0
 
Bl248Author Commented:
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 ;)
0
 
Bl248Author Commented:
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.
0
All Courses

From novice to tech pro — start learning today.