all corner is destroy!pla help

Reply
1 2

•
•
Join Date: Nov 2008
Posts: 11
Reputation: dariush29722 is an unknown quantity at this point 
Solved Threads: 0
dariush29722 dariush29722 is offline Offline
Newbie Poster

all corner is destroy!pla help

 
0
  #1
Dec 29th, 2008
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:
HTML and CSS Syntax (Toggle Plain Text) 
  1. <div class="containermaster_blue" align="center" dir"rtl">
  2.  
  3.  
  4.               <div class="TRM" style=" display: inline-table;" align= "center">
  5.                                         <div class="TR" style="float:right;" dir="rtl">
  6.                                         </div>
  7.                                         <div  class="action1">
  8.                                              <dnn:ACTIONS runat="server" ID="dnnACTIONS" />
  9.                                         </div>
  10.                                         <div >
  11.                                              <dnn:ICON runat="server" ID="dnnICON" />
  12.                                         </div>
  13.                                         <div  class="caption1" dir="rtl">
  14.                                              <dnn:TITLE runat="server" ID="dnnTITLE" />
  15.                                         </div>
  16.                                         <div class="TL" style="width: 10px; float:left; position:relative;">
  17.                                         </div>     
  18.                                          <div class="TLM" align="left" >
  19.                                              <dnn:ACTIONBUTTON5 runat="server" ID="ACTIONBUTTON1" CommandName="ModuleHelp.Action"
  20.                                                             DisplayIcon="True" DisplayLink="False" />
  21.                                               <dnn:VISIBILITY runat="server" ID="VISIBILITY1" />
  22.  
  23.                                          </div>                                                                                   
  24.  
  25.  
  26.  
  27.                </div>
  28.  
  29.                <div >
  30.  
  31.                             <table width="100%" border="0" cellpadding="0" cellspacing="0">
  32.                         <tr>
  33.                             <td class="ML" valign="top" style="width: 10px" align="left">
  34.                                 <img src="<%= SkinPath %> spacer.gif" width="10" height="1" alt="">
  35.                             </td> 
  36.                             <td class="containerrow2_blue" id="ContentPane" runat="server"  align="center"> 
  37.  
  38.                             </td> 
  39.  
  40.                             <td class="MR" valign="top" style="width: 19px" align="right"> 
  41.                                 <img src="<%= SkinPath %>spacer.gif" width="19" height="1" alt="">
  42.                             </td>
  43.                         </tr>
  44.                     </table>
  45.  
  46.  
  47.  
  48.              </div>
  49.              <div class="BM"  align= "center">
  50.              <div class="BL">
  51.                     </div>
  52.              <div class="BR">
  53.                     </div>
  54.              </div>


///////////////////////////////////
the css file:
css Syntax (Toggle Plain Text) 
  1. .containermaster_blue 
  2. {
  3.     margin:0px; padding:0px; border:0px;
  4. 	width: 100%;
  5. 	background-color: transparent;
  6. 	border-right: #FFFFFF 1px solid; 
  7. 	border-top: #FFFFFF 0px solid; 
  8. 	border-left: #FFFFFF 1px solid; 
  9. 	border-bottom: #FFFFFF 0px solid; 
  10.  
  11. }
  12. .TR
  13. {
  14. 	background-image: url(CornerTRight.gif);
  15. 	background-repeat: no-repeat;
  16. 	height: 29px;
  17. 	width: 30px;
  18. }
  19. .action1
  20. {background-repeat: no-repeat;
  21.  width:10%;
  22.  float: right;
  23.   padding:6px 0px 0px 0px;
  24. }
  25. .caption1
  26. {
  27.   padding:6px 0 0 0; width:100px; float:right;    
  28. }
  29.  
  30. .TL
  31. {
  32. 	background-image: url(CornerTLeft.gif);
  33. 	background-repeat: no-repeat;
  34. 	height: 29px;
  35. 	width: 10px;	
  36. }
  37. .TLM
  38. {
  39. 	background-image: url(CornerTLMiddle.gif);
  40.  
  41. 	height: 29px;
  42. 	width: 110px;
  43. 	text-align : left;
  44. 	float:left;
  45.  
  46. }
  47. .TRM
  48. {
  49. 	background-image: url(CornerTRMiddle.gif);
  50. 	height: 29px;
  51. 	width: inherit;
  52. }
  53. .MR
  54. {
  55. 	background-image: url(MiddleRight.gif);	
  56. 	height: 1px;
  57. 	width: 19px;
  58. }
  59. .ML
  60. {
  61. 	background-image: url(MiddleLeft.gif);	
  62. 	height: 1px;
  63. 	width: 10px;	
  64. }
  65. .BR
  66. {
  67. 	background-image: url(BottomRight.gif);
  68. 	background-repeat: no-repeat;	
  69. 	height: 30px;
  70. 	width: 30px;
  71. 	float:right;
  72. 	padding:0px;
  73. 	margin:0px;
  74. 	border:0;
  75. }
  76. .BL
  77. {
  78. 	background-image: url(BottomLeft.gif);
  79. 	background-repeat: no-repeat;
  80. 	height: 10px;
  81. 	width: 10px;
  82. 	float:left;
  83. 	padding:0px;
  84. 	margin:0px;
  85. 	border:0;
  86. 	position:relative;
  87. 	display:inline-table;
  88.  
  89. }
  90. .BM 
  91. {	
  92. 	/*filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0, FinishOpacity=100, Style=3);*/
  93. 	/*filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#F6FCE6', endColorStr='#A0BB54', gradientType='1');*/
  94. 	background-image: url(BottomMiddle.gif);
  95. 	background-repeat:repeat-x;
  96. 	height : 10px;
  97. 	width: auto;
  98.  
  99.  
  100. 	     }
///////////////////////////////
and this is the pic of my container with errors:
Click image for larger version Name: picofcontainer.jpg Views: 8 Size: 124.0 KB ID: 8690
or:
http://www.daniweb.com/forums/attach...1&d=1230533140
////////////////////////
thanks
Last edited by peter_budo; Jan 6th, 2009 at 9:32 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 276
Reputation: kanaku is on a distinguished road 
Solved Threads: 15
kanaku's Avatar
kanaku kanaku is offline Offline
Posting Whiz in Training

Re: all corner is destroy!pla help

 
0
  #2
Dec 29th, 2008
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...
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2008
Posts: 11
Reputation: dariush29722 is an unknown quantity at this point 
Solved Threads: 0
dariush29722 dariush29722 is offline Offline
Newbie Poster

Re: all corner is destroy!pla help

 
0
  #3
Dec 29th, 2008
hello my friend
but i don't use the repeat-x in codes??
plz help
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 276
Reputation: kanaku is on a distinguished road 
Solved Threads: 15
kanaku's Avatar
kanaku kanaku is offline Offline
Posting Whiz in Training

Re: all corner is destroy!pla help

 
0
  #4
Dec 29th, 2008
Your last class, at the bottom of the css file:
HTML and CSS Syntax (Toggle Plain Text) 
  1. .BM
  2. {
  3. /*filter:progidXImageTransform.Microsoft.Alpha(Opacity=0, FinishOpacity=100, Style=3);*/
  4. /*filter:progidXImageTransform.Microsoft.Gradient(startColorStr='#F6FCE6', endColorStr='#A0BB54', gradientType='1');*/
  5. background-image: url(BottomMiddle.gif);
  6. background-repeat:repeat-x;
  7. height : 10px;
  8. width: auto;
  9. }

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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2008
Posts: 11
Reputation: dariush29722 is an unknown quantity at this point 
Solved Threads: 0
dariush29722 dariush29722 is offline Offline
Newbie Poster

Re: all corner is destroy!pla help

 
0
  #5
Dec 29th, 2008
•
•
•
•
Originally Posted by kanaku View Post
Your last class, at the bottom of the css file:
HTML and CSS Syntax (Toggle Plain Text) 
  1. .BM
  2. {
  3. /*filter:progidXImageTransform.Microsoft.Alpha(Opacity=0, FinishOpacity=100, Style=3);*/
  4. /*filter:progidXImageTransform.Microsoft.Gradient(startColorStr='#F6FCE6', endColorStr='#A0BB54', gradientType='1');*/
  5. background-image: url(BottomMiddle.gif);
  6. background-repeat:repeat-x;
  7. height : 10px;
  8. width: auto;
  9. }

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:
Name: BottomMiddle.gif Views: 14 Size: 44 Bytes

i should use the reapet-x.plz help me
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 276
Reputation: kanaku is on a distinguished road 
Solved Threads: 15
kanaku's Avatar
kanaku kanaku is offline Offline
Posting Whiz in Training

Re: all corner is destroy!pla help

 
0
  #6
Dec 29th, 2008
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 With Quote Quick reply to this message  
•
•
Join Date: Nov 2008
Posts: 11
Reputation: dariush29722 is an unknown quantity at this point 
Solved Threads: 0
dariush29722 dariush29722 is offline Offline
Newbie Poster

Re: all corner is destroy!pla help

 
0
  #7
Dec 29th, 2008
•
•
•
•
Originally Posted by kanaku View Post
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:

Click image for larger version Name: picofcontainer.jpg Views: 4 Size: 124.0 KB ID: 8697
see and plz help
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 276
Reputation: kanaku is on a distinguished road 
Solved Threads: 15
kanaku's Avatar
kanaku kanaku is offline Offline
Posting Whiz in Training

Re: all corner is destroy!pla help

 
0
  #8
Dec 29th, 2008
Isn't that the same screencap in your first post?
Do you have a screencap of what happens when you set
HTML and CSS Syntax (Toggle Plain Text) 
  1. .BL
  2. {
  3. background-repeat: no-repeat;
  4. }
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).
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2008
Posts: 11
Reputation: dariush29722 is an unknown quantity at this point 
Solved Threads: 0
dariush29722 dariush29722 is offline Offline
Newbie Poster

Re: all corner is destroy!pla help

 
0
  #9
Dec 29th, 2008
•
•
•
•
Originally Posted by kanaku View Post
Isn't that the same screencap in your first post?
Do you have a screencap of what happens when you set
HTML and CSS Syntax (Toggle Plain Text) 
  1. .BL
  2. {
  3. background-repeat: no-repeat;
  4. }
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):
Click image for larger version Name: container.jpg Views: 9 Size: 104.5 KB ID: 8698
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 276
Reputation: kanaku is on a distinguished road 
Solved Threads: 15
kanaku's Avatar
kanaku kanaku is offline Offline
Posting Whiz in Training

Re: all corner is destroy!pla help

 
0
  #10
Dec 29th, 2008
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.
Attached Thumbnails
container2.jpg  
Reply With Quote Quick reply to this message  
Reply
1 2

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



Tag cloud for HTML and CSS
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity create css design development displayimageinsteadofflash dreamweaver drupal emailmarketing epilepsy explorer firefox flash font fonts form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. templates textcolor theme timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 wordpress xml xsl
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC