all corner is destroy!pla help

Question

dariush29722 0 Newbie Poster

15 Years Ago

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

web-design

2 Contributors
12 Replies
127 Views
2 Days Discussion Span
Latest Post 15 Years Ago Latest Post by dariush29722

All 12 Replies

kanaku 60 Posting Whiz

15 Years Ago

Eep. That's a load. Have you tried toggling the bottommiddle.gif on or off? It's the only thing with repeat-x that I could see in your code...

kanaku 60 Posting Whiz

15 Years Ago

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.

kanaku 60 Posting Whiz

15 Years Ago

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?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

dariush29722 0 Newbie Poster · Answer 1 · 2008-12-29T19:20:15+00:00

hello my friend
but i don't use the repeat-x in codes??
plz help

dariush29722 0 Newbie Poster · Answer 2 · 2008-12-29T23:46:46+00:00

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

dariush29722 0 Newbie Poster · Answer 3 · 2008-12-30T02:04:32+00:00

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

kanaku 60 Posting Whiz · Answer 4 · 2008-12-30T02:49:10+00:00

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).

dariush29722 0 Newbie Poster · Answer 5 · 2008-12-30T03:16:32+00:00

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):

kanaku 60 Posting Whiz · Answer 6 · 2008-12-30T03:36:09+00:00

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.

dariush29722 0 Newbie Poster · Answer 7 · 2008-12-31T14:12:05+00:00

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.

kanaku 60 Posting Whiz · Answer 8 · 2008-12-31T14:43:15+00:00

Try adding padding-bottom: 6px; to the boxes with border-bottom. BUT that's a bit primitive. =(

Can you post the current html and css codes?

OR when you have the page open in your browser, view the source, copy all and post it here.

dariush29722 0 Newbie Poster · Answer 9 · 2008-12-31T15:15:25+00:00

Try adding padding-bottom: 6px; to the boxes with border-bottom. BUT that's a bit primitive. =(
Can you post the current html and css codes?
OR when you have the page open in your browser, view the source, copy all and post it here.

hello my friend
this is pieces of container that is destroy, please see and help:
http://www.daniweb.com/forums/thread163558.html
thanks very much my friend.

all corner is destroy!pla help

Recommended Answers Collapse Answers

All 12 Replies

Recommended Answers