Rounded corners - DIV

[Toms]

Ir kods:

 <div class="left_top" style="margin-right: auto; margin-left: auto; margin-top: 8%;">
	 <p>Teksts</p>
 </div>

 

Ir CSS:

.left_top{
   width: 235px;
   text-align: left;
   vertical-align: middle;
   padding: 3px 8px 4px 8px;
   color: white;
   font-weight: bold;
   background: url(../img/lefttop.gif) top left no-repeat;
   background-color: #4282DE;
}
.left_top p{
   background: url(../img/righttop.gif) top right no-repeat;
   font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif;
   font-size: 12px;
}

 

Viss ir OK, bet .left_top padding visu bojā. Bet bez šī padding ļoti nesmuki izskatās.

Mēģināju iekš ".left_top p" ielikt padding ar -3px utt., bet pikseļi mīnusos neiet... Noņēmos ilgi pie šī...

 

Varbūt ir priekšlikumi, kā lai iekš ".left_top p" noņem to padding, ko ir radījis ".left_top"?

[Delfins]

http://www.alistapart.com/articles/customcorners/

[Toms]

To tutoriāli jau redzēju, tas nav tas.

Man viss strādā labi, ja nav padding uzlikts. (Bet bez padding dizains nesmuks)

 

Jautājums ir - kā lai apiet padding mantošanu?

[bubu]

Nu tak elementāri :) Uzstādi mantotajam elementam padding uz 0 vai nu cik tev tur vajag.

[Toms]

EDIT:

.left_top p{
margin: -3px -8px 0px 0px;
padding: 3px 0px 0px 0px;

izdarīju savādāk, ar pliku 0px padding nepietika. Pastūmu atpakaļ ar margin un tad pa jaunu piemetu klāt padding, lai "nullējas" :)

 

Bet ir jauna problēma - tagad apakšējie stūri:

Kreisais stūris ir savā vieā, bet labo apakšējo neizdodas novietot..

 

.left_bottom{
   font-size: 11px;
width: 235px;
text-align: left;
padding: 8px 8px 8px 8px;
background: url(../img/bottomleft.gif) bottom left no-repeat;	
background-color: #E7EFFF;
}
.left_bottom p{
background: url(../img/bottomright.gif) bottom right no-repeat;
display:block;
padding:15px;
margin:-2em 0 0 0;	
}

 

EDIT:

Sataisīju,bet IE joprojām gļuks.

.left_bottom{
   font-size: 11px;
width: 235px;
text-align: left;
padding: 8px 8px 8px 8px;
background: url(../img/bottomleft.gif) bottom left no-repeat;	
background-color: #E7EFFF;
}
.left_bottom p{
background: url(../img/bottomright.gif) bottom right no-repeat;
display: block;
padding: 0px 8px 8px 0px;
margin: 0px -8px -8px 0px;
}

Edited July 27, 2005 by Toms