I consider myself a novice at CSS 3 so i'd appreciate any help you can give.
我认为自己是CSS 3的新手,所以我很感激你能给予的任何帮助。
The situation is that i'm creating a dashboard for our test automation suite.
情况是我正在为我们的测试自动化套件创建一个仪表板。
So far i've created a decent looking template, however the navigation bar has a different padding appearance across browsers. In IE and Chrome it looks fine, however in firefox 28 the padding seems to add an extra pixel to the bottom of the nav bar item.
到目前为止,我已经创建了一个体面的模板,但导航栏在浏览器中有不同的填充外观。在IE和Chrome中它看起来很好,但是在firefox 28中,填充似乎在导航栏项目的底部添加了一个额外的像素。
Here is my CSS:
这是我的CSS:
<style type='text/css'>
html {
display: table;
margin: auto;
overflow-y: scroll;
}
body {
display: table-cell;
vertical-align: middle;
font: 10pt Arial, Helvetica, Sans-serif;
width: 800px;
margin:0px;
}
#contentPane
{
background-color:#D5D5D5;
border-left: 1px solid #752864;
border-right:1px solid #752864;
border-bottom:1px solid #752864;
}
#logoContainer
{
background-color:#FFFFFF;
height: 60px;
}
#logoLeft
{
float: left;
}
#logoRight
{
float: right;
margin-top: 18px;
margin-right: 20px;
font: bold 20px "Arial";
color: #752864;
}
/*navigation link CSS*/
#nav {
font-weight:bold;
margin-bottom:20px;
text-align: center;
width: 800px;
background-color:#752864;
height: auto;
}
#nav ul {
height: auto;
padding-top: 10px;
padding-bottom: 10px;
margin: 0px;
}
#nav li {
display: inline;
}
#nav li a {
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
color: #FFFFFF;
background-color:#752864;
font-family: 'Verdana', 'Lucida Grande', Sans-Serif;
}
#nav li a:hover {
color: #752864;
background-color: #FFFFFF;
}
#testtitle
{
padding-left: 10px;
}
/*table CSS*/
#gradient-style
{
font-family: 'Verdana', 'Lucida Grande', Sans-Serif;
font-size: 12px;
width: 800px;
text-align: left;
border-collapse: collapse;
}
#gradient-style th
{
font-size: 13px;
font-weight: bold;
padding: 8px;
background: #752864 url('table-images/gradhead.png') repeat-x;
border-bottom: 1px solid #752864;
color: #FFFFFF;
}
#gradient-style td
{
padding: 8px;
border-bottom: 1px solid #752864;
border-left: 1px solid #752864;
color: #000000;
border-top: 1px solid #752864;
background: #D5D5D5 url('table-images/gradback.png') repeat-x;
}
.imagecontainer{
text-align: center;
border-left: 0px !important;
}
#gradient-style tbody tr td.passcell
{
padding: 8px;
border-bottom: 1px solid #752864;
border-left: 1px solid #752864;
color: #FFFFFF;
border-top: 1px solid #752864;
background: #199A19 url('table-images/gradback.png') repeat-x;
}
#gradient-style tbody tr td.failcell
{
padding: 8px;
border-bottom: 1px solid #752864;
border-left: 1px solid #752864;
color: #FFFFFF;
border-top: 1px solid #752864;
background: #FF3333 url('table-images/gradback.png') repeat-x;
}
#gradient-style tbody tr td.warningcell
{
padding: 8px;
border-bottom: 1px solid #752864;
border-left: 1px solid #752864;
color: #FFFFFF;
border-top: 1px solid #752864;
background: #FF6600 url('table-images/gradback.png') repeat-x;
}
#gradient-style tfoot tr td
{
background: #e8edff;
font-size: 12px;
color: #99c;
}
#gradient-style tbody tr:hover td
{
background: #005ECF url('table-images/gradhover.png') ;
color: #FFFFFF;
}
a {
text-decoration: none;
}
#ExpandAllElements{
float: bottom;
}
.expand_all {
cursor: pointer;
}
.collapse_all {
cursor: pointer;
}
.expandCollapse_Collapsed{
cursor: pointer;
font-weight: bold;
color: white;
display: block;
padding: 5px 2px 5px 22px;
width: 150px;
background: #005ECF
url('images/expand.gif') no-repeat 5px 50%;
margin-left: 10px;
}
.expandCollapse_Expanded{
url('images/collapse.gif') no-repeat 5px 50%;
}
/*SubTest CSS*/
#body_log
{
word-wrap: break-word;
}
</style>
Here is my HTML:
这是我的HTML:
<a name = 'top'> </a>
<div id='contentPane'>
<div id='logoContainer'>
<img id='logoLeft' src='images/CPULogof.gif'/>
<div id='logoRight'>Bristol Automation</div>
</div>
<div id='nav'>
<ul>
<li>
<a href='' target='_blank'>Global Automation Hub</a>
</li>
<li>
<a href='' target='_blank'>UK Automation</a>
</li>
<li>
<a href='' target='_blank'>UK QA Home</a>
</li>
</ul>
</div>
<table id='gradient-style' summary='Test Results'>
<thead>
<tr>
<th scope='col' colspan='3'>Automated Test Finished</th>
</tr>
</thead>
<tbody>
<tr>
<td class='imagecontainer' rowspan='8'>
<img height='100' width='100' src='images/AutoTestCogf.png'/>
</td>
</tr>
<tr>
<td rowspan='2'>Test Name: Agent_Registration_TestClass</td>
</tr>
<tr>
<td class='gradient-style td passcell' rowspan='1'>Result Status: Pass</td>
</tr>
<tr>
<td rowspan='2'>Start Time: 12:24</td>
</tr>
<tr>
<td rowspan='1'>EndTime: 12:25</td>
</tr>
<tr>
<td colspan='2' rowspan='1'>Elapsed Time: 0 Seconds</td>
</tr>
<tr>
<td rowspan='2'>Run by: JohnN</td>
</tr>
<tr>
<td rowspan='1'>Machine: BRSL1960</td>
</tr>
</tbody>
</table>
<div id='testtitle'>
<p><font face='Verdana'><h2><b><font color='black'>Test Results For: Agent_Registration_TestClass</font></b></h2></font></p>
</div>
<div><a id='expandAllBoxes' class='expandCollapse_Collapsed'>Expand/Collapse All</a> </div>
<br>
</div>
<div>
<a href= '#top'> Up to Top ^^ </a>
<p>TestResults v0.85 written by Bristol Automation Team
<a href='' target='_blank'>Click here to visit our sharepoint!</a></p>
</div>
I understand that I can use some css to detect if the browser is firefox and change the padding based on that, but that didnt seem to work. From what I can see the following block of code is where the issue is:
我知道我可以使用一些CSS来检测浏览器是否是firefox并根据它更改填充,但这似乎没有用。从我可以看到以下代码块是问题所在:
#nav li a {
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
color: #FFFFFF;
background-color:#752864;
font-family: 'Verdana', 'Lucida Grande', Sans-Serif;
}
Any help would be much appreciated. Cheers.
任何帮助将非常感激。干杯。
UPDATE
Here is the JS fiddle http://jsfiddle.net/Vwr3x/
这是JS小提琴http://jsfiddle.net/Vwr3x/
3 个解决方案
#1
1
You need to add css reset or normalize.css to neutralize browser default styling
您需要添加css reset或normalize.css来中和浏览器默认样式
reset.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Add either of these two at the beginning in your style.css file.
在style.css文件的开头添加这两个中的任何一个。
#2
0
You need to use browser specific CSS to get accurate results on all browsers. I mean not for all but the one you are getting wrong, use mozilla, internet explorer or google chrome specific css.
您需要使用特定于浏览器的CSS才能在所有浏览器上获得准确的结果。我的意思不是除了你错了之外的所有人,使用mozilla,Internet explorer或google chrome specific css。
#3
0
if you want I have a jQuery script to detect all the navigators, then the script add a class to a body with the name of the browser.
如果你想让我有一个jQuery脚本来检测所有导航器,那么脚本会将一个类添加到具有浏览器名称的主体。
#1
1
You need to add css reset or normalize.css to neutralize browser default styling
您需要添加css reset或normalize.css来中和浏览器默认样式
reset.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Add either of these two at the beginning in your style.css file.
在style.css文件的开头添加这两个中的任何一个。
#2
0
You need to use browser specific CSS to get accurate results on all browsers. I mean not for all but the one you are getting wrong, use mozilla, internet explorer or google chrome specific css.
您需要使用特定于浏览器的CSS才能在所有浏览器上获得准确的结果。我的意思不是除了你错了之外的所有人,使用mozilla,Internet explorer或google chrome specific css。
#3
0
if you want I have a jQuery script to detect all the navigators, then the script add a class to a body with the name of the browser.
如果你想让我有一个jQuery脚本来检测所有导航器,那么脚本会将一个类添加到具有浏览器名称的主体。