Stop div moving to next line

[heldenbrau]

http://www.kangercourt.com/maincase.php?case=20

 

In the above page I am trying to do rounded corners.  I can do the top ones ok, but on the bottom one, it needs 3 divs, one left 1 right and 1 middle.  I am using the following CSS for the 3 divs.

 

#caseconlc{
  height:5px;
  width:5px;
  padding:0px;
  margin-left:35px;
  float:left;
  clear:none;
  border-width:0px;
  background-image: url(defbotcornl.jpg);
  background-repeat: repeat-x;
}

#caseconbot{
  height:5px;
  width:auto;
  padding:0px;
  margin-left:40px;
  margin-right:5px;
  float:none;
  clear:none;
  border-width:0px;
  background-image: url(defbot.jpg);
  background-repeat: repeat-x;
}

#caseconrc{
  height:5px;
  width:5px;
  padding:0px;
  margin:0px;
  float:right;
  clear:none
  border-width:0px;
  background-image: url(defbotcornr.jpg);
  background-repeat: repeat-x;
}

[heldenbrau]

and in internet explorer, there is an annoying gap between the corner and the bottom.  How do you get rid of this?

[Simon Mayer]

This is the code that I use and it works for me. Obviously you would have to rename this for the relevant image files and class names that you wish to apply

 

The CSS is

.page_tl
{
background: url(../images/tq_tl.png) 0 0 no-repeat;
}
.page_tr
{
background: url(../images/tq_tr.png) 100% 0 no-repeat;
}
.page_bl
{
background: url(../images/tq_bl.png) 0 100% no-repeat;
}
.page_br
{
background: url(../images/tq_br.png) 100% 100% no-repeat;
}

 

The HTML is

<div'><div class='page_tl'><div class='page_tr'><div class='page_br'><div class='page_bl'>
Your text here
</div></div></div></div></div>

 

[heldenbrau]

That doesn't work for me, even though I put no repeat, the picture repeats all across the screen and isn't anywhere near the place it should be.  I changed the CSS to do the bottom corners to this:

 

#caseconlc{

  background-image: url(defbotcornl.jpg);
  background-repeat: 0 100% no-repeat;
}

#caseconrc{

  background-image: url(defbotcornr.jpg);
  background-repeat: 0 100% no-repeat;
}

 

If you look at the link I posted earlier, you will see what I mean.

[heldenbrau]

sorry, I did it wrong, but now I have done

#caseconlc{background-image: url(defbotcornl.jpg) 0 100% no-repeat;}

#caseconrc{background-image: url(defbotcornr.jpg) 0 100% no-repeat;}

 

and it is showing nothing.

[heldenbrau]

the html is

 

<div id=\"casecontent\">

<div class='caseconlc'>

<div class='caseconrc'>

 

casecontent is:

#casecontent {
  width:auto;
  padding-left:30px;
  padding-right:30px;
  padding-top:15px;
  padding-bottom:15px;
  margin-left:35px;
  border-right:1px solid black;
  border-bottom:0px solid black;
  border-left:1px solid black;
  border-top:1px solid black;
  text-align: left;
  float:none;
  background-color:rgb( 203, 210, 218 );
}

[Simon Mayer]

I think it's because 'caseconlc' and 'caseconrc' are marked as IDs with the # sign but they are called as classes

<div class='caseconlc'>

and so would require

.caseconlc{background-image: url(defbotcornl.jpg) 0 100% no-repeat;}