2012-08-13 181 views
0

好吧,我把這個淺灰色的顯示靠近了標題欄「獨立新聞」中的曲線。它實際上顯示的背景不是一個邊框。刪除標題欄周圍的邊框

Link to image

我有這個作爲我的HTML,我認爲它有一個表的表內造成的?但不確定。

<div id="contentwrapper"> 
    <!-- NEWS START --> 
    <table width="100%"><tr><td> 
     <div class="rounded"> 
      <div class="rounded_top"> 
       <div>Indie News</div> 
      </div> 
      <div class="rounded_content"> 
       <font align='Right'><a href="#" >Submit Your Story</a> </font>   
      </div> 
      <div class="rounded_bottom"> 
      </div> 
     </div> <!-- end of rounded--> 
     <table><tr><td align='center'> 
      <div id='coin-slider'> 
       <a href="images/newsimage/minecraft1.jpg" target="_blank"> 
        <img src='images/newsimage/minecraft1.jpg' > 
        <span> 
        Minecraft still an indy game? 
        </span> 
       </a> 
       <a href="images/newsimage/spider1.jpg"> 
        <img src='images/newsimage/spider1.jpg' > 
        <span> 
        Spider just released! 
        </span> 
       </a> 
      </div><!--end of coin slider--> 
     </td></tr></table><!--end of coinslider table--> 
    </td></tr></table><!--end of news start table--> 

    <!-- Reviews start --> 
    <!-- Review #1 --> 
    <table style="border:none;"> 
     <tr> 
      <th rowspan="4" width="30%" bgcolor='#7e7e7e'><IMG SRC="images/review image/dj.jpg" ALT="Dinomight jack"></th> 
      <td><a href="#" style="text-decoration:none" >Review of Dynimite Jack </a> 
      </td> 
     </tr> 
     <tr> 
      <td>By <i>Bob Bobby</i></td> 
     </tr> 
     <tr> 
      <td>Now here's a surprisingly nice piece of news. Stealthy demolition game Dynamite Jack has already been a reasonable .</td> 
     </tr> 
     <tr> 
      <td bgcolor='#7e7e7e'><a href="#" > 0 comments</a> | <a href="#" >Leave a comment</a> </td> 
     </tr> 
    </table><!--end of review table--> 

</div><!--end of contenet wrapper--> 

也CSS ..

/***************/ 
/* CONTENT */ 
/***************/ 
#contentwrapper{ 
display: table-cell; 
width: 700px; 
background: #919191; 
border: None; 

} 

#contentcolumn{ 
margin: 0 20% 0 20%; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/ 
} 

#contentwrapper table { 
border: none; 
width: 100%;/*around 700 max for images*/ 
border-collapse: collapse; 
} 




/***************/ 
/*content round box*/ 
/***************/ 
.rounded { 
    background: #000000; 
    width: auto; 
} 
.rounded_top div { 
    background: url(../images/up-left641.png) no-repeat top left; 
} 
.rounded_top { 
    background: url(../images/up-right641.png) no-repeat top right; 
} 
.rounded_bottom div { 
    background: url(../images/down-left641.png) no-repeat bottom left; 
} 
.rounded_bottom { 
    background: url(../images/down-right641.png) no-repeat bottom right; 
} 

.rounded_top div, .rounded_top, 
.rounded_bottom div, .rounded_bottom { 
    width: auto; 
    height: 25; 
    font-size: 24px; 
    font-weight:bold; 
    text-align:center; 
    color:#ffffff; 
padding:-40px; 
} 
.rounded_content { margin: 0 20 0 20;} 
.rounded { color:#000000;} 

所有建議都歡迎。 感謝 格倫

+0

灰色邊框是一個已經設定保證金的結果。 – Terry 2012-08-13 09:53:51

回答

2

它通常是建立一個網站時,瀏覽器確保之間的兼容性重置樣式是一個好主意。風格會去是這樣的:

*{ 
margin:0; 
padding:0; 
border:0; 
} 

,你可以在這裏更詳細地看到這一點:http://www.cssreset.com/

+0

工作得很好..我將它添加到我的身體標記下的CSS。或者我應該把它放在上面嗎?還是不重要:D – 2012-08-13 11:10:53

+0

它沒有區別。很高興我能幫上忙 :) – Clayton 2012-08-13 13:37:28

0

嗨現在定義#contentwrapper, .roundedborder raius

#contentwrapper, .rounded{ 
border-radius:20px 20px 0 0; 
-webkit-border-radius:20px 20px 0 0; 
-moz-border-radius:20px 20px 0 0; 
}