We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now

x

css curve box -ie problem

roscoeh23
roscoeh23 asked
on
Medium Priority
1,137 Views
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?

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.
Comment
Watch Question

jessegivyDeveloper
CERTIFIED EXPERT

Commented:
Divs are block level elements, use spans instead.

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

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.