PDA

View Full Version : Off-color line ends

rfresh
07-27-2008, 04:24 AM
Can someone tell me why the rounded corners in these lines have an off-color look? It looks like a dark gray at the end of the lines.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
div.boxhead h2 {
background: url("rounded2.png") top left no-repeat;
}
.boxhead {
background: url("rounded2.png") top right no-repeat;
}
.boxbody {
background: url("rounded2.png") bottom right no-repeat;
}
.rounded {
background: url("rounded2.png") bottom left no-repeat;
width: 50%; /* could be whatever you want,
as long as your image is large enough */
}
.boxheaders {
padding: .4em 0 0 .6em;
border-bottom: 1px dotted white;
}
.centered { margin: 0 auto; }
.boxtext { padding: 0 1em 1em 1em; }
.green { background-color: #FFCC33; }

</style>

</head>
<body>

<div class="rounded green centered">
<div class="boxhead">
<h2 class="boxheaders"></h2>
</div>
<div class="boxbody boxtext">
<p>This is the body.</p>
</div>
</div>

</body>
</html>
effpeetee
07-27-2008, 01:25 PM
Can someone tell me why the rounded corners in these lines have an off-color look? It looks like a dark gray at the end of the lines.

Cannot see your graphics. Can't you give us a site url?

You may find this site useful. (http://exitfegs.co.uk/RndCorn.html)

especially this one. (http://www.roundedcornr.com/)

Frank
FWDrew
07-27-2008, 01:49 PM
Frank,

The graphics are in the corners of the attached images, they are small and light so you may have trouble seeing them.

Regards,

Drew
effpeetee
07-27-2008, 02:41 PM
The graphics are in the corners of the attached images, they are small and light so you may have trouble seeing them.


The bits that I see are intended to match the background colour which is the normal way to do them.

If the BG colour is the same as they are the rounded corners will then appear normal. They can be altered in a good Paint type program or in this one at this site. (http://www.roundedcornr.com/)

Frank
bazz
07-27-2008, 02:54 PM
Frank they are there but, you need to click the image to enlarge it.

I don't know quite why the image had to be so big when its only an example.

when loading it in ff, you need to click the mouse to enlarge. then the corners are visiable but the image is so big (on 1024x768), that it introduces huge scrollbars.

a link to the page would be helpful.

bazz
effpeetee
07-27-2008, 05:33 PM
Bazz,

It's rather weird, It uses the same png in each of the four corners. It does not seem to rotate any of them. Rather odd don't you think.

div.boxhead h2 {
background: url("rounded2.png") top left no-repeat;
}
.boxhead {
background: url("rounded2.png") top right no-repeat;
}
.boxbody {
background: url("rounded2.png") bottom right no-repeat;
}
.rounded {
background: url("rounded2.png") bottom left no-repeat;
width: 50%;

Frank
bazz
07-27-2008, 06:08 PM
well its one huuuuuge image. :) I guess it's meant to be the size of a specific div and give it its corners.

I haven't worked out how to do rounded corners yet - still busy coding the back end - but I hope to get there soon.

bazz