Scratch

sparks · 2011-02-09 08:13:17

Hey Guys, I have a div on a site I'm building and it uses CSS to curve the edges of the div with images. The problem is that the bottom image curves refuse to fall to the bottom of the "left column" tag. Any ideas?

Code:

<html>     
<head>
<style>

#leftColumn{
          background-color:#333333;
          width:19%;
          height:100%;
          float:left;
}

.bl {background: url(http://dl.dropbox.com/u/6273449/bottomLeft.gif) 0% 100% no-repeat}

.br {background: url(http://dl.dropbox.com/u/6273449/bottomRight.gif) 100% 100% no-repeat}

.tl {background: url(http://dl.dropbox.com/u/6273449/topLeft.gif) 0 0 no-repeat}

.tr {background: url(http://dl.dropbox.com/u/6273449/topRight.gif) 100% 0 no-repeat; padding:10px}


</style>


</head>


<body bgcolor = "#000000">

<div id="leftColumn">
   <div class="bl"><div class="br"><div class="tl"><div class="tr">
   <font color= "red"> Lorem ipsum dolor sit amet consectetur adipisicing elit
   for some stupid reason the bottom corners fall up to the
   last thing in the div tag...
   </div></div></div></div>
   <div class="clear">&nbsp;</div>
   </div>
<br />
<div id="footer" style="background-color:#000000; width:100%; height:20px;">
.  © Crazyman47 & Sparks 2011
</div>
</body>
</html>

thanks!

TheSuccessor · 2011-02-09 14:08:25

Maybe this?

Code:

<html>
<head>
<style>

#leftColumn, #middle{
          background-color:#333333;
          width:19%;
          height:100%;
          float:left;
}
#middle{
          width:100%;
}

.bl {background: url(http://dl.dropbox.com/u/6273449/bottomLeft.gif) 0% 100% no-repeat}

.br {background: url(http://dl.dropbox.com/u/6273449/bottomRight.gif) 100% 100% no-repeat}

.tl {background: url(http://dl.dropbox.com/u/6273449/topLeft.gif) 0 0 no-repeat}

.tr {background: url(http://dl.dropbox.com/u/6273449/topRight.gif) 100% 0 no-repeat; padding:10px}


</style>
</head>
<body>     
<div id="leftColumn">
   <div class="bl"><div class="br"><div class="tl"><div id="middle" class="tr">
   <font color="red"> Lorem ipsum dolor sit amet consectetur adipisicing elit
   for some stupid reason the bottom corners fall up to the
   last thing in the div tag...
   ...but they might work now, I don't know...
   </font></div></div></div></div>
<font color="red">   </font><div class="clear"><font color="red">&nbsp;</font></div>
<font color="red">   </font></div>
<font color="red"><br>
</font><div style="background-color: rgb(0, 0, 0); width: 100%; height: 20px;" id="footer">
<font color="red">.  &copy; Crazyman47 &amp; Sparks 2011
</font></div>
</body></html>

sparks · 2011-02-09 14:22:29

nope.... all the corners are missing in that...

TheSuccessor · 2011-02-09 15:03:38

This works!

Code:

<html>
<head>
<style>

#leftColumn{
          background-color:#333333;
          width:19%;
          height:100%;
          float:left;
}
#middle{
          height:100%;
}

.bl {background: url(http://dl.dropbox.com/u/6273449/bottomLeft.gif) 0% 100% no-repeat}

.br {background: url(http://dl.dropbox.com/u/6273449/bottomRight.gif) 100% 100% no-repeat}

.tl {background: url(http://dl.dropbox.com/u/6273449/topLeft.gif) 0 0 no-repeat}

.tr {background: url(http://dl.dropbox.com/u/6273449/topRight.gif) 100% 0 no-repeat;}


</style>
</head>
<body>     
<div id="leftColumn">
   <div class="bl"><div class="br"><div class="tl"><div id="middle" class="tr">
   <font color="red"> Lorem ipsum dolor sit amet consectetur adipisicing elit
   for some stupid reason the bottom corners fall up to the
   last thing in the div tag...
   ...but they might work now, I don't know...
   </font></div></div></div></div>
<font color="red">   </font><div class="clear"><font color="red">&nbsp;</font></div>
<font color="red">   </font></div>
<font color="red"><br>
</font><div style="background-color: rgb(0, 0, 0); width: 100%; height: 20px;" id="footer">
<font color="red">.  &copy; Crazyman47 &amp; Sparks 2011
</font></div>
</body></html>

waveOSBeta · 2011-02-09 16:55:31

use the border-radius and moz-border-radius properties. They work better.

00eek · 2011-02-09 19:17:22

How Do U Create A New Forum?

agscratcher · 2011-02-09 19:24:10

00eek wrote:
How Do U Create A New Forum?

What is this I don't even

waveOSBeta · 2011-02-10 15:42:43

waveOSBeta wrote:
use the border-radius and moz-border-radius properties. They work better.

sparks · 2011-02-10 16:33:31

How do I apply them? ^

waveOSBeta · 2011-02-11 16:52:05

For firefox and all others:

Code:

#div {
moz-border-radius: 'radius';
border-radius: 'radius';
}

And may I suggest using an external CSS file? Much easier to manage.

Last edited by waveOSBeta (2011-02-11 16:52:51)

waveOSBeta · 2011-02-14 10:11:37

bump

Scratch

archived forums

#1 2011-02-09 08:13:17

div tag help :(

Code:

#2 2011-02-09 14:08:25

Re: div tag help :(

Code:

#3 2011-02-09 14:22:29

Re: div tag help :(

#4 2011-02-09 15:03:38

Re: div tag help :(

Code:

#5 2011-02-09 16:55:31

Re: div tag help :(

#6 2011-02-09 19:17:22

Re: div tag help :(

#7 2011-02-09 19:24:10

Re: div tag help :(

00eek wrote:

#8 2011-02-10 15:42:43

Re: div tag help :(

waveOSBeta wrote:

#9 2011-02-10 16:33:31

Re: div tag help :(

#10 2011-02-11 16:52:05

Re: div tag help :(

Code:

#11 2011-02-14 10:11:37

Re: div tag help :(

Board footer