CSS Forum

**heta** · 01-22-2008, 01:37 AM

hi all,
I need help regarding CSS...
I have used code from http://www.sitepoint.com/article/css...s-boxes-curves

now the problem appeared when I added some good amount of data into the DIV & changed CSS for tr class::

overflow: auto;
height: 50px;
overflow-x: hidden;

Now the output is something which gives bad look to the DIV.. as the scroll bar looks like its out of the DIV..

Do anyone know the solution??

**heta** · 01-22-2008, 03:24 AM

Me waiting for help!!!

**chrishirst** · 01-22-2008, 05:16 AM

Quote:

Do anyone know the solution??

Line 34 in your CSS would be my guess.

If that isn't right, (and I'd be very surprised if it is) try showing us the problem

**heta** · 01-22-2008, 06:46 AM

MY HTML CODE:::

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<br class="clear">

<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">
Lorem ipsum dolor sit amet <br>
Lorem ipsum dolor sit amet <br>
Lorem ipsum dolor sit amet <br>
Lorem ipsum dolor sit amet <br>
</div>
</div>
</div>
</div>
<br class="clear">
</body>
</html>

THIS IS MY CSS

.bl {
background: url(bl.gif) 0 100% no-repeat #e68200;
width: 20em
}

.br {
background: url(br.gif) 100% 100% no-repeat
}

.tl {
background: url(tl.gif) 0 0 no-repeat
}

.tr {
background: url(tr.gif) 100% 0 no-repeat;
position:relative;
padding: 10px;
overflow: auto;
height: 50px;
overflow-x: hidden;
margin: 0 auto;
}

images are :::

**heta** · 01-22-2008, 06:57 AM

if you see the result.. you will find

which gives bad look... as the scroll bar appears like out of DIV...
Thats my problem..