• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1118
  • Last Modified:

css curve box -ie problem

I am trying to create a box with curves. The problem is ie puts a large gap bewteen divs. What causes this?

http://scottishsocialnetworks.org/home.php


Have used this previously

.Skin1 {
  width:163px;
  background: url(../shared/curve_mid.jpg) repeat-y left top;
}
.Skin2 {
  background:url(../shared/curve_top.jpg) 0px 0px no-repeat;
}
.Skin3 {
  background: url(../shared/curve_bottom.jpg) no-repeat left bottom;
  padding: 5px 10px 5px 14px;
}



<div class="Skin1">
<div class="Skin2">
<div class="Skin3">

         <span class="contact_menu" style="font-weight:bold">
Careers homepage</span><br />
         <span class="contact_menu" style="font-weight:bold"><a href="vacancies.php">Vacancies</a></span>
        
         </div>
</div>
</div>

but this expands to fix the content but you cannot set a height for the middle, content holding box which is what I need this time.
0
roscoeh23
Asked:
roscoeh23
1 Solution
 
jessegivyCommented:
Divs are block level elements, use spans instead.
0
 
ArgblatCommented:
Do yourself a favor and check out http://pro.html.it/niftycube/

Rounded corners using Javascript + CSS .... no images ... no 3x3 grids to create 1 rounded item...just define a Div tag with the proper id selector and your done

-Mike
0
 
Artform04Commented:
Here is rounded corners with cross compatibillity as shown from The Css Anthology

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rounded Corners</title>
<meta http-equiv="content-type"
    content="text/html; charset=iso-8859-1" />
<style>
#box {
      font: 80%/1.6 Arial, Helvetica, sans-serif;
      color: #2D486C;
      background-color: transparent;
      margin: 0 20px 10px 0;
}
.roundborder {
      height: 1px;
      overflow: hidden;
      background-color: #B0C4DE;
      border-right: 1px solid #33527B;
      border-left: 1px solid #33527B;
}
.c1 {
      margin: 0 12px 0 12px;
      border: none;
      background-color: #33527B;
}
.c2 {
      margin: 0 9px;
      border-width: 0 3px;
}
.c3 {
      margin: 0 7px;
      border-width: 0 2px;
}
.c4 {
      margin: 0 6px;
}
.c5 {
      margin: 0 5px;
}
.c6 {
      margin: 0 4px;
}
.c7 {
      margin: 0 3px;
}
.c8 {
      margin: 0 2px;
      height: 2px;
}
.c9 {
      margin: 0 1px;
      height: 3px;
}
.content {
      height: auto;
      padding: 0 15px;
}
</style>

</head>
<body>
<div id="box">
      <div class="roundborder c1"></div>
      <div class="roundborder c2"></div>
      <div class="roundborder c3"></div>
      <div class="roundborder c4"></div>
      <div class="roundborder c5"></div>
      <div class="roundborder c6"></div>
      <div class="roundborder c7"></div>
      <div class="roundborder c8"></div>
      <div class="roundborder c9"></div>
      <div class="roundborder content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a magna. Donec nunc. Integer justo magna, pellentesque quis, porttitor et, volutpat at, nulla. Quisque odio. Sed a neque nec wisi rhoncus scelerisque. Nulla facilisi. Cras pulvinar convallis arcu. Nullam imperdiet erat vel pede.</div>
      <div class="roundborder c9"></div>
      <div class="roundborder c8"></div>
      <div class="roundborder c7"></div>
      <div class="roundborder c6"></div>
      <div class="roundborder c5"></div>
      <div class="roundborder c4"></div>
      <div class="roundborder c3"></div>
      <div class="roundborder c2"></div>
      <div class="roundborder c1"></div>
</div>
</body>
</html>
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now