需要覆盖主题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”应该修理它。