[英]Mysterious White Space at Top of Page
I'm having trouble with some whitespace above my table. 我在桌子上方的空白处遇到麻烦。 I have a table that holds two buttons and then right below it is a Google map. 我有一张桌子,上面放着两个按钮,下面是一张Google地图。 I would like to float the table over top of the map instead of having them listed, if you will. 如果您愿意的话,我想将表格放在地图上方,而不是将其列出。 I get about ten pixels of white space and I am having so much trouble figuring out why. 我得到大约十个像素的空白,并且我很难找出原因。 Any ideas? 有任何想法吗? Here is the first part of my HTML: 这是我的HTML的第一部分:
<body onload="initMap()">
<div>
<table width="100%" >
<tr>
<th height="45" align="right" bgcolor="#CED0D0" scope="col">
<a href = http://search.html class="classname">Search</a>
<a href = http://loggedout.html class="classname">Log Out</a>
</th>
</tr>
</table>
</div>
<div id="map_canvas" style="float:left; width:100%; height:100%"></div>
Map CSS 地图CSS
html { height: 100% }
body { height: 100%; margin: 0; padding: 0; }
#map_canvas { height: 100% }
table.alerts {
border-width: 8px;
border-spacing: 2px;
border-style: outset;
border-color:#FFF;
border-collapse: separate;
background-color:#FFF;
bottom:0;
position:absolute;
font-family:Lucida Grande, Tahoma, Arial, Verdana, sans-serif;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
float:left;
margin-right: 5px;
}
table.alerts th {
border-width: 8px;
padding: 0px;
border-style: none;
border-color:#999;
background-color:#FFFFFF;
font-family:Arial-Black,Helvetica,sans-serif;
height: 40px;
text-align: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-size:130%;
}
table.alerts td {
border-width: 0px;
padding: 3px;
border-style: none;
border-color:#039;
background-color: rgb(247, 247, 242);
font-family:"Arial", Gadget, sans-serif;
font-weight:bold;
}
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.60;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 20%;
left: 13%;
width: 100%;
height: 60%;
padding: 10px;
background-color: white;
z-index:1002;
overflow: auto;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
#bar {
position:absolute;
top: 0px;
right: 0px;
}
#body {
margin:0;
padding:0;
}
.greyBox{
padding:7px;
background-color:#c6c6c6;
margin-bottom:0px;
margin-left:4px;
width:200px;
height:26px;
font-family:Arial,Helvetica,sans-serif;
text-align : center;
font-size:130%;
}
.bottom{
position: absolute;
bottom: 0;
}
p.hide {
display: none;
}
Button CSS: 按钮CSS:
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}.classname:active {
position:relative;
top:1px;
}
I saved your code and loaded it in chrome and saw the whitespace at the top. 我保存了您的代码并将其加载到chrome中,并在顶部看到了空白。 Looks to be from the tr
, because you have the table set to border-collapse: separate and border-width : 8px and border-spacing set to 2px. 看起来是来自tr
,因为您已将表设置为border-collapse:split和border-width:8px,border-spacing设置为2px。 spacing + width = 10px. 间距+宽度= 10像素。
So not seeing why you did this (or why you're using a table at all, honestly), I would add the following: 因此,我不知道为什么要这样做(或者说真的为什么要使用表),我将添加以下内容:
table {
border-width: 0px;
border-spacing: 0px;
border-collapse: collapse;
}
用这个替换您的<table width="100%">
标记-
<table width="100%" cellpadding="0" cellspacing="0" border="0">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.