Width of div is affected in IE7 by contents of another div
Here is an example of an HTML page that consists of a header and a footer and a div that contains another div which contains some content:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Testing 123</title>
<link rel="stylesheet" href="css/testing.css">
</head>
<body>
<div id="main_body">
<div id="header"></div>
<div id="content_container">
<div id="content">
Some text<br>
</div>
</div>
<div id="footer"></div>
</div>
</body>
<html>
Here's the css:
* {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: none;
z-index: 10;
font-family: Arial;
font-size: 20px;
text-decoration: none;
text-align: left;
}
html, body {
height: 100%;
background-color: rgb(255, 255, 255);
}
#main_body {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px 20px 0px 20px;
}
#header {
position: absolute;
top: 20px;
left: 0px;
height: 50px;
width: 100%;
background-color: rgb(40, 40, 40);
}
#content_container {
padding: 80px 10px 50px 10px;
}
#content {
padding: 0px 4px 0px 4px;
position: relative;
}
#corner_top_left {
position: absolute;
width: 7px;
height: 7px;
top: 0;
left: 0;
background-color: rgb(40, 40, 40);
}
#footer {
position: absolute;
bottom: 20px;
left: 0px;
height: 20px;
width: 100%;
background-color: rgb(40, 40, 40);
}
Notice that I haven't yet used style corner_top_left. I want to have nice round corners for content. I know there are lots of different ways to achieve this. I choose to have a container of relative position in which you can set absolutely positioned small corner divs. This method works fine for me but has one very strange effect in IE7 in this particular example that I cannot explain.
Watch what happens when you add the content_top_left div to the example, like this:
....
<div id="header"></div>
<div id="content_container">
<div id="content">
<div id="corner_top_left"></div>
Lots of text<br>
</div>
</div>
<div id="footer"></div>
....
For some reas开发者_如何学Pythonon the width of the footer is now adjusted (it's shorter). I have no clue why this happens in IE7 (works fine in FF). The footer should not be affected by the content. Does anybody know what is happening here and how to solve this?
EDIT: I changed the example a bit to make it more similar to my current website.
Try to set the padding on #content_container from padding: 0 10px 0 10px; to padding:0. It fixed the problem in IE7 but i'm running it in IEtester.
What an absolutely amazing problem! It even works in Quirks mode but not IE7 Standards.
I first focused on the #content margin but changing it would give different results, then I moved to the footer with no much success, tried the #content_top_left and nothing. Then I returned to the #content and eliminated any left/right margin.
Although you can fix this, it won't be as clean as you probably expected. Here's the code:
#content
{
margin: 80px 0 50px 0;
position: relative;
padding: 0 10px 0 10px;
}
#content_top_left
{
position: absolute;
width: 7px;
height: 7px;
top: 0;
left: 10px;
background-color: rgb(40, 40, 40);
}I dot not know details of your implementation for backgrounds and things like that in the #content container, so an extra padding can be a problem, the 10px left on the corner is aligned with the left padding on the container.
加载中,请稍侯......
精彩评论