how to make "overflow: hidden" work for all browsers
Problem:
I am currently creating a webpage layout using divs and css rather than an HTML table layout. I want, of course, for this to be able to operate across all major browsers.
I have a pane for a banner, which has a floated menu over the left portion of it. The problem is that if the banner is too wide for the space provided, it jumps to a space below the menu (where it is wider) and takes all of the pages content with it.
Attempted solutions:
The obvious solution is to use the "overflow: hidden" property in my css. The problem is that this doesn't work in IE. I read that this is because I have it positioned relatively (which is true), but I don't see any way around using relative positioning in this case. I must keep it.
I also read that you could set the width of the pane to something besides the default, and then the "overflow: hidden" property would take effect. This DOES solve the problem in IE (setting width to 100%), but creates a problem in chrome (and potentially other browsers as well) where the alloted space for the banner is too wide for the page, and then chrome behaves the same way IE had originally - pushing the banner to the bottom of the page. This workaround could work, but I would need to define the width value as "100% - menuWidth" since there is a menu over the left side. I tried this:
style="width:expression(document.compatMode=='CSS1Compat'? document.documentElement.clientWidth-(Menu Width goes here)+'px' : body.clientWidth-(And here too)+'px');"
But using the expression doesn't appear to enable the "overflow" property, even though directly setting the width a simple value does.
EDIT: At request I have attached my code.
HTML:
<div id="ControlPanel" runat="server" class="contentpane" align="center"></div>
<div id="Link" runat="server" align="right" onclick="location.href='address.html';"></div>
<div id="Header" runat="server" class="header" align="right"></div>
<div id="Links" runat="server" class="header" align="center">LINKS</div>
<div id="Search" runat="server" class="skingradient" align="right">[SEARCH]</div>
<div id="LeftPane" runat="server" class="leftpane" al开发者_高级运维ign="left">[USER]</br>LEFT</div>
<div id="TopPane" runat="server" class="toppane" align="left"><img src="image.jpg" alt="" /></div>
<div id="RightPane" runat="server" class="rightpane" align="center">RIGHT</div>
<div id="ContentPane" runat="server" class="contentpane" align="center">CONTENT</div>
<div></div>
<div id="BottomPane" runat="server" class="bottompane" align="center">BOTTOM</div>
<div id="Footer" runat="server" class="skingradient" align="center">[COPYRIGHT]</div>
</body>
</html>
CSS:
#Search
{
position: relative;
top: -20;
background-color: transparent;
z-index: 1;
}
#Header
{
height: 77px;
background-color: #0860A8;
background-image: url(ImagePath.gif);
background-position: right;
background-repeat: no-repeat;
border-bottom: 1 solid white;
}
#Links
{
background-color: #E6E6E6;
}
#TopPane
{
border-top: 1 solid #0860A8;
position: relative;
top: -20;
overflow: hidden;
}
#LeftPane
{
float: left;
position: relative;
top: -20;
width: 200px;
height: 100%;
background-color: #E6E6E6;
border-right: 1 solid #0860A8;
}
#ContentPane
{
position: relative;
top: -20;
width: 100%;
height: 100%;
background-color: Green;
z-index: -1;
}
#RightPane
{
z-index: 0;
position: relative;
top: -20;
height: 100%;
float: right;
width: auto;
background-color: Red;
max-width: 40%;
width:expression(document.compatMode=='CSS1Compat'? document.documentElement.clientWidth*2/5+'px' : body.clientWidth*2/5+'px');
}
The color coding is to allow for easy previewing and editing of the site.
Make sure your file begins with a doctype, for one. It goes a long way toward making browsers act alike.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
...
I eventually hacked a solution that implemented slightly different styling for IE browsers.
IE has something called conditional comments, and has a 'comment' tag. Neither of these are recognized by other browsers, and are both simply passed over. The conditional comments take the following form:
<!--[if IE]> DO THIS <![endif]-->
Since it has the same structure as a typical comment (<!-- Commented code -->) it is passed over by all browsers besides IE, which apparently parses all comments looking for certain statements.
The comment tag:
<comment> HTML comment </comment>
This is recognized as a comment by IE, and is passed over, but other browsers just skip the unrecognized <comment> tag and process the line of code contained inside normally.
So my solution to this problem then since I could get IE to work one way, and other browsers another, was to place the HTML solution inside conditional comments:
<!--[if IE]><div id="TopPane" runat="server" class="toppane" align="left" style="width: 100%; overflow:hidden;"><img src="i5Banner.jpg" alt="" /></div><![endif]-->
and the solution for the remaining browsers inside the HTML 'comment' tags:
<comment><div id="TopPane" runat="server" class="toppane" align="left"><img src="i5Banner.jpg" alt="" /></div></comment>
This way I could treat IE browsers separately from other browsers. It may look ugly, but IE has apparently supported it through all IE versions and it causes no harm when encountered by other browsers, so I think I can consider it a safe and stable solution if nothing else is available.
I believe that this may offer a way around many of IE's other problems and idiosyncrasies.
If you wrap this floated element, and the others, in another (non-floated) div, and set the overflow property on that, it should work:
HTML:
<div id="wrapper">
<div id="the_problem_div">
</div>
</div>
CSS:
#wrapper {
overflow: hidden;
}
加载中,请稍侯......
精彩评论