css curve box -ie problem

Posted on 2006-03-25
Last Modified: 2007-12-19
I am trying to create a box with curves. The problem is ie puts a large gap bewteen divs. What causes this?

Have used this previously

.Skin1 {
  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>

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.
Question by:roscoeh23
    LVL 12

    Expert Comment

    Divs are block level elements, use spans instead.
    LVL 5

    Expert Comment

    Do yourself a favor and check out

    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

    LVL 1

    Accepted Solution

    Here is rounded corners with cross compatibillity as shown from The Css Anthology

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    <html xmlns="">
    <title>Rounded Corners</title>
    <meta http-equiv="content-type"
        content="text/html; charset=iso-8859-1" />
    #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;

    <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>

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: Create Mobile App Prototypes with Adobe XD

    This is a project-based course: we go through all the steps of creating a prototype from start to finish, using all the tools and features currently available in Adobe XD. You can complete the course in less than a day, plus all project files and fonts are included.

    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
    In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now