Have something to say? Contribute New Article Reply to this Article
all corner is destroy!pla help
hello my friend
I designed an container but all conrers is destroyed.
pleaz help me to solve this problam.
this is my code:
the ascx file:
<div class="containermaster_blue" align="center" dir"rtl">
<div class="TRM" style=" display: inline-table;" align= "center">
<div class="TR" style="float:right;" dir="rtl">
</div>
<div class="action1">
<dnn:ACTIONS runat="server" ID="dnnACTIONS" />
</div>
<div >
<dnn:ICON runat="server" ID="dnnICON" />
</div>
<div class="caption1" dir="rtl">
<dnn:TITLE runat="server" ID="dnnTITLE" />
</div>
<div class="TL" style="width: 10px; float:left; position:relative;">
</div>
<div class="TLM" align="left" >
<dnn:ACTIONBUTTON5 runat="server" ID="ACTIONBUTTON1" CommandName="ModuleHelp.Action"
DisplayIcon="True" DisplayLink="False" />
<dnn:VISIBILITY runat="server" ID="VISIBILITY1" />
</div>
</div>
<div >
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="ML" valign="top" style="width: 10px" align="left">
<img src="<%= SkinPath %>spacer.gif" width="10" height="1" alt="">
</td>
<td class="containerrow2_blue" id="ContentPane" runat="server" align="center">
</td>
<td class="MR" valign="top" style="width: 19px" align="right">
<img src="<%= SkinPath %>spacer.gif" width="19" height="1" alt="">
</td>
</tr>
</table>
</div>
<div class="BM" align= "center">
<div class="BL">
</div>
<div class="BR">
</div>
</div>///////////////////////////////////
the css file:
.containermaster_blue
{
margin:0px; padding:0px; border:0px;
width: 100%;
background-color: transparent;
border-right: #FFFFFF 1px solid;
border-top: #FFFFFF 0px solid;
border-left: #FFFFFF 1px solid;
border-bottom: #FFFFFF 0px solid;
}
.TR
{
background-image: url(CornerTRight.gif);
background-repeat: no-repeat;
height: 29px;
width: 30px;
}
.action1
{background-repeat: no-repeat;
width:10%;
float: right;
padding:6px 0px 0px 0px;
}
.caption1
{
padding:6px 0 0 0; width:100px; float:right;
}
.TL
{
background-image: url(CornerTLeft.gif);
background-repeat: no-repeat;
height: 29px;
width: 10px;
}
.TLM
{
background-image: url(CornerTLMiddle.gif);
height: 29px;
width: 110px;
text-align : left;
float:left;
}
.TRM
{
background-image: url(CornerTRMiddle.gif);
height: 29px;
width: inherit;
}
.MR
{
background-image: url(MiddleRight.gif);
height: 1px;
width: 19px;
}
.ML
{
background-image: url(MiddleLeft.gif);
height: 1px;
width: 10px;
}
.BR
{
background-image: url(BottomRight.gif);
background-repeat: no-repeat;
height: 30px;
width: 30px;
float:right;
padding:0px;
margin:0px;
border:0;
}
.BL
{
background-image: url(BottomLeft.gif);
background-repeat: no-repeat;
height: 10px;
width: 10px;
float:left;
padding:0px;
margin:0px;
border:0;
position:relative;
display:inline-table;
}
.BM
{
/*filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0, FinishOpacity=100, Style=3);*/
/*filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#F6FCE6', endColorStr='#A0BB54', gradientType='1');*/
background-image: url(BottomMiddle.gif);
background-repeat:repeat-x;
height : 10px;
width: auto;
}///////////////////////////////
and this is the pic of my container with errors:
or: http://www.daniweb.com/forums/attachment.php?attachmentid=8690&stc=1&d=1230533140
////////////////////////
thanks
Your last class, at the bottom of the css file:
.BM { /*filter:progidXImageTransform.Microsoft.Alpha(Opacity=0, FinishOpacity=100, Style=3);*/ /*filter:progidXImageTransform.Microsoft.Gradient(startColorStr='#F6FCE6', endColorStr='#A0BB54', gradientType='1');*/ background-image: url(BottomMiddle.gif); background-repeat:repeat-x; height : 10px; width: auto; }I don't know what the .gif background files looked like, but I take it that the repeat-x for bottommiddle is the culprit. Try changing the repeat-x to no-repeat.
my frien
my bottommiddle.gif is:
i should use the reapet-x.plz help me
By "corner is destroyed" did you mean that a line extends past your rounded corners?
I know that you need repeat-x but have you tried hiding the background, just to test the result? Can you post a screencap of the page if the bottommiddle.gif is hidden?
yes, line extends past my rounded corners.
this is a pic of my page:
see and plz help
Isn't that the same screencap in your first post? Do you have a screencap of what happens when you set
.BL { background-repeat: no-repeat; }Just to know if it's the bottommiddle.gif that's causing it.
Other solutions I could think of is to remove the transparency outside the rounded corners of your .gif backgrounds. But that would cause problems when you have a darker background... =0
First, please post a screencap of your page when bottommiddle.gif is set from repeat-x to no-repeat. You can just post an unlabeled screencap (one without the red markers or labels).
this picture is without reapet(noreapet):
Ok. So it's the bottommiddle.gif that's extending over the rounded corners.
You can do two things. One is to remove the bottommiddle.gif background and just add a
border-bottom: 1px solid #575c72;line in the classes/IDs belonging to the elements or boxes I've highlighted in green in the attached file. (I can't figure out which classes belong to which box in your code, sorry)The other solution is to change your .gif files. Add a solid color outside the rounded corners. (So the bottommiddle.gif won't show through) But this will make your design less 'portable' --- so try adding a border to your boxes first.
hello my friend
my container withborder-bottom: 1px solid #575c72; is:
but not set?
plz help.
You
© 2012 DaniWeb® LLC
