需要覆蓋主題CSS

Question

我一直在解決這個問題好幾天了，我似乎無法找到答案。

我正在使用Drupal 7，我正嘗試在FrontPage中的一個塊中使用E-junkie的購物車。彈出疊加等等，但很顯然，我的Drupal主題的CSS樣式覆蓋了我的購物，所以它出錯了。

這是我工作的網站：http://eastwestcards.com - 在大查看購物車按鈕下有一個添加到購物車按鈕，您可以使用它添加免費產品，以便能夠看到我的意思購物車出錯了。我的結帳按鈕就在左邊，如果你點擊底部的空白空間，它實際上會將你發送給結帳，項目列表和其他表格沒有邊框或單元格間距/填充以及其他一些內容。

另一方面，現在這個站點是我的購物車應該如何：http://pixilate.com/fonts/gardenia-px - 只需點擊添加到購物車的產品，你會看到我的購物車和網站之間的不同。我一直在尋找所有的建議給我，我試圖從我的CSS樣式表中豁免購物車的設計，我試圖覆蓋我的drupal主題的CSS等，我甚至試圖使用Firefox的View Source Chart插件來嘗試和確定哪些標籤等。我應該試圖修正以改變網站上購物車的外觀。我使用了查看源圖表插件，因爲查看我的網頁源通常不會顯示購物車的HTML代碼彈出，因爲它是由我簡單地放在我的網站上的電子垃圾提供的JavaScript代碼。我對這一切都很新，但我已經盡力解決這個問題，希望有人能夠幫助我！先謝謝你！

---

我做了這個改變「邊界崩潰：獨立」和「邊框間距：2px的」我也以我的CSS樣式表的末尾添加這玩意，它的一些工作，一些它不」噸，但似乎現在沒事了一下：

#EJEJC_window table { 
    background-color: white; 
     !important; 
} 

div#EJEJC_iframeContent td 

#EJEJC_iframeContent div { 
    border-width: 3px; 
    border-spacing: 20px; 
    border-style: solid; 
    border-color: green; 
    border-collapse: collapse; 
    background-color: white; 
     !important; 
} 

#EJEJC_iframeContent th { 
    border-width: 3px; 
    border-spacing: 20px; 
    border-style: solid; 
    border-color: green; 
    border-collapse: collapse; 
    background-color: white; 
     !important; 
} 

#ejejctable table { 
font-family: arial; 
font-size: 12pt; 
background-color: white; 
border-style: solid; 
border-color: white; 
padding: 4 px; 
!important; 
} 

#ejejctable th { 
border-width: 4px; 
border-style: solid; 
border-color: white; 
padding: 4px; 
!important; 
} 

#ejejctable td { 
border-width: 4px; 
border-style: solid; 
border-color: white; 
padding: 4px; 
!important; 
} 

#ejejctable tr { 
border-width: 4px; 
border-style: solid; 
border-color: white; 
padding: 4px; 
!important; 
} 

#ejejctable tbody { 
border-width: 4px; 
border-style: solid; 
border-color: white; 
padding: 4px; 
!important; 
} 



#tdHeader { padding: 25px; !important; } 

td#tdPmntOptions tr { float:right; !imporant; } 

#tdPmntOptions tr { float:right; !imporant; } 

img#btnEJ { float:right; !imporant; } 

#btnEJ { float:right; !imporant; } 

Answer 1

如果你看看這個screenshot，你會看到的問題是什麼。藍色區域就是你的鏈接標籤，而結賬按鈕實際上只是一個在所有這些空白空間中晃動的圖像。點擊白色區域會讓您結帳，因爲就計算機而言，您實際上是點擊了鏈接標記（只是不在人類用戶期望點擊的圖像上）。

快速簡單的解決方案是隻給鏈接標籤「float：right」。除了定位元素外，浮動屬性還使容器圍繞其內容物「收縮包裹」。在這種情況下，鏈接標記將縮小到按鈕圖像的大小。 你也可以給鏈接標籤固定的寬度和高度，但浮動解決方案更靈活。

希望有幫助！

編輯：只是發現element.style.css設置標籤爲「顯示：塊」。這是你的問題。將其更改爲「display：inline」並且它應該正常運行。

至於表格上的行間距，style.css將border-collapse設置爲摺疊並將border-spacing設置爲0.將它們更改爲「border-collapse：separate」和「border-spacing：2px」應該修理它。