Extra space between page elements in IE6
It goes without saying that I'm not having any issue with modern browsers. Here is my page code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<body onload="initializeWidgets();">
<!-- ### Banner ### -->
<jsp:include page="part_banner.jsp"></jsp:include>
<!-- Extra space occurs here... -->
<!-- ### Filters and Table ### -->
<div class="G_overallContainer">
<div class="G_subContainer">
<div class="G_subContainerS开发者_运维问答ection">
<h:outputText value="Filtering Options" styleClass="G_subContainerSectionHeader"/>
<!-- ...here... -->
<!-- ### Filter bar ### -->
<jsp:include page="part_filters.jsp"></jsp:include></div>
<!-- ...here... -->
<div class="G_subContainerSection">
<h:form id="tableForm">
<div class="table">
<h:dataTable value="#{tableDataBean.data}" var="data"
headerClass="tableHeaders"
rowClasses="oddRow,evenRow">
</h:dataTable></div>
<!-- ...and somewhere after here -->
</h:form></div></div>
<h:messages layout="table" style="color:red;" showSummary="true" showDetail="false"/></div>
</body>
</f:view>
</html>
Here is my css for the nested div containers:
body {
margin:0px;
border:none;
padding:0px;
width: 100%;
}
.G_overallContainer {
position: static;
display:block;
border:none;
padding: .25em;
border-width: 0;
border-style: none;
border-spacing: 0;
}
.G_subContainer {
display: block;
border: none;
padding: .25em;
margin:0;
border-style: none;
background-color: #0f2d65;
}
.G_subContainerSection {
display: block;
margin: .25em;
border:none;
}
.G_subContainerSectionHeader {
font-style: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
display: block;
padding: .5em;
background: url(../image/steel-blue.png) repeat-x;
color: #000000
}
It looks like there is about 10 to 15px extra space in between each of these elements in IE6. I am tempted to blame the div tags as I am aware that there are some IE6 bugs that cause issues like this due to extra white space within the divs, but the extra space only occurs after certain div tags like the two subContainerSections and after the banner which contains no divs. I have tried setting all margins to zero but that does not solve the problem. It is as if there is something BETWEEN the margin and the border of the offending elements...
What do you guys think?
edit: Threw my DOCTYPE up there for clarification
Here is an extremely cut down version of my page: link. If you view it with IE6 you will see the separation of the "filters" header from the body.
If you could throw up an example on jsFiddle that would help a lot, but I do know that IE6 has problems with horizontal spacing that can be fixed by settings the elemnts zoom,
.myhorzel{
zoom:1;
}
加载中,请稍侯......
精彩评论