943,865 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > all corner is destroy!pla help
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Dec 29th, 2008
0

all corner is destroy!pla help

Expand Post »
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: 34 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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
dariush29722 is offline Offline
11 posts
since Nov 2008
Permalink
Dec 29th, 2008
0

Re: all corner is destroy!pla help

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...
Reputation Points: 70
Solved Threads: 15
Posting Whiz
kanaku is offline Offline
378 posts
since Jan 2007
Permalink
Dec 29th, 2008
0

Re: all corner is destroy!pla help

hello my friend
but i don't use the repeat-x in codes??
plz help
Reputation Points: 10
Solved Threads: 0
Newbie Poster
dariush29722 is offline Offline
11 posts
since Nov 2008
Permalink
Dec 29th, 2008
0

Re: all corner is destroy!pla help

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.
Reputation Points: 70
Solved Threads: 15
Posting Whiz
kanaku is offline Offline
378 posts
since Jan 2007
Permalink
Dec 29th, 2008
0

Re: all corner is destroy!pla help

Click to Expand / Collapse  Quote originally posted by kanaku ...
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: 63 Size: 44 Bytes


i should use the reapet-x.plz help me
Reputation Points: 10
Solved Threads: 0
Newbie Poster
dariush29722 is offline Offline
11 posts
since Nov 2008
Permalink
Dec 29th, 2008
0

Re: all corner is destroy!pla help

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?
Reputation Points: 70
Solved Threads: 15
Posting Whiz
kanaku is offline Offline
378 posts
since Jan 2007
Permalink
Dec 29th, 2008
0

Re: all corner is destroy!pla help

Click to Expand / Collapse  Quote originally posted by kanaku ...
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: 18 Size: 124.0 KB ID: 8697

see and plz help
Reputation Points: 10
Solved Threads: 0
Newbie Poster
dariush29722 is offline Offline
11 posts
since Nov 2008
Permalink
Dec 29th, 2008
0

Re: all corner is destroy!pla help

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).
Reputation Points: 70
Solved Threads: 15
Posting Whiz
kanaku is offline Offline
378 posts
since Jan 2007
Permalink
Dec 29th, 2008
0

Re: all corner is destroy!pla help

Click to Expand / Collapse  Quote originally posted by kanaku ...
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: 28 Size: 104.5 KB ID: 8698
Reputation Points: 10
Solved Threads: 0
Newbie Poster
dariush29722 is offline Offline
11 posts
since Nov 2008
Permalink
Dec 29th, 2008
0

Re: all corner is destroy!pla help

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
Click image for larger version Name: container2.jpg Views: 9 Size: 100.8 KB ID: 8699  
Reputation Points: 70
Solved Threads: 15
Posting Whiz
kanaku is offline Offline
378 posts
since Jan 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Blogger-not accepting HTML
Next Thread in HTML and CSS Forum Timeline: Need Help!!! Internet Explore not reading my webpage...





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC