Test site to reference:
<!-- m --><a class="postlink" href="http://www.ksu.edu/projects/carbon/james/">http://www.ksu.edu/projects/carbon/james/</a><!-- m -->
Ok, in all browsers that use the mozilla code base are fine, however in IE6, the section below the tabs gets messed up. What happens is that the left side of the whole page gets mashed against the side of the viewport, though it should have a 20px gap between the content and the viewport. I've determined this is because my div, #centerContent, and my div, #rightContent, use %'s for widths, 80% and 20%, respectively. When I lower one of the percentages, to, say 79% or 19%, it looks fine until you start to shrink the window. Then, after a while - depending on how much I lowered the original percentage, the same problem occurs.
Any way to fix / get around this in IE6?
Thanks.You're running into the "50% + 50% does not equal 100%" problem.
When not defining widths in tables, the width of an element is taken in respect to ONLY it's parent element. Meaning that two DIVs have no relation to one another. Take this example:
<style type="text/css">
<!--
#container {
width: 101px;
}
#left {
width: 50%;
float: left;
}
#right {
width: 50%;
float: left;
}
-->
</style>
.
.
.
<body>
<div id="container">
<div id="left"> </div>
<div id="right"> </div>
</div>
#left and #right have no relation to one another, other than their parent element is 101 pixels wide. When the browser calculates the width of #left, it simply does:
.5 * 101 = 50.5
The problem is, a computer screen cannot display 50.5 pixels, so the browser rounds it up to 51 pixels. It repeats the same calculation for #right. And gets the same pixel value: 51 pixels.
#left is calculated to be 51 pixels wide. #right is ALSO calculated to be 51 pixels wide, for a total width of 102 pixels. The #container DIV that houses both #left and #right is only 101 pixels wide, and thus #left and #right do not fit side-by-side.
This is a rather simple example of what's going on in your page. Somewhere along the line, the width of an element requires the browser to round up or down, the number of pixels wide the element is, making one element too wide to fit in the alotted space.
Tables are different. The browser KNOWS that the pixel values of the cell widths MUST be equal to the total table width, and fudges the cell dimensions to get things to fit. This does not occur when sizing DIVs using percentages.
The workaround is simple. Use floats and margins:
<style type="text/css">
<!--
#container {
width: 80%;
float: left;
}
#left {
width: 180px;
float: left;
}
#center {
margin-left: 180px;
}
#right {
margin-left: 80%;
}
#
-->
</style>
.
.
.
<body>
<div id="container">
<div id="left"> </div>
<div id="center"> </div>
</div>
<div id="right"> </div>
That untested code should work. Like I said, it should, but I don't have the time to fool around with it myself.
Hope this helps out. Essentially, the workaround (for all browsers) is to float one DIV, give it a width. In the DIV you want to float beside it, DON'T float it, and DON'T give it a width. Give it a left or right margin equal to the width of the floated DIV.toicontien,
When you finish being a student, you should become a teacher. Seriously.Thanks. I'd actually considered going into teaching after about 10 - 15 years in the biz. You just made my day
You're welcome. It's a very difficult thing to explain a technical issue in simple terms.
Now you may have a problem; when I need something explained so I can understand it, I know who to ask!I ended up getting rid of the percentages, as I needed a fixed width on the right side as well as the left. As such, this shored up the problem I was having, however this has oddly created a margin/padding problem for my center section. Instead of posting it here, I posted it as a new thread. The title is "Freaky Padding/Margin Problems", feel free to take a look and help me out.
Thanks.
<!-- m --><a class="postlink" href="http://www.ksu.edu/projects/carbon/james/">http://www.ksu.edu/projects/carbon/james/</a><!-- m -->
Ok, in all browsers that use the mozilla code base are fine, however in IE6, the section below the tabs gets messed up. What happens is that the left side of the whole page gets mashed against the side of the viewport, though it should have a 20px gap between the content and the viewport. I've determined this is because my div, #centerContent, and my div, #rightContent, use %'s for widths, 80% and 20%, respectively. When I lower one of the percentages, to, say 79% or 19%, it looks fine until you start to shrink the window. Then, after a while - depending on how much I lowered the original percentage, the same problem occurs.
Any way to fix / get around this in IE6?
Thanks.You're running into the "50% + 50% does not equal 100%" problem.
When not defining widths in tables, the width of an element is taken in respect to ONLY it's parent element. Meaning that two DIVs have no relation to one another. Take this example:
<style type="text/css">
<!--
#container {
width: 101px;
}
#left {
width: 50%;
float: left;
}
#right {
width: 50%;
float: left;
}
-->
</style>
.
.
.
<body>
<div id="container">
<div id="left"> </div>
<div id="right"> </div>
</div>
#left and #right have no relation to one another, other than their parent element is 101 pixels wide. When the browser calculates the width of #left, it simply does:
.5 * 101 = 50.5
The problem is, a computer screen cannot display 50.5 pixels, so the browser rounds it up to 51 pixels. It repeats the same calculation for #right. And gets the same pixel value: 51 pixels.
#left is calculated to be 51 pixels wide. #right is ALSO calculated to be 51 pixels wide, for a total width of 102 pixels. The #container DIV that houses both #left and #right is only 101 pixels wide, and thus #left and #right do not fit side-by-side.
This is a rather simple example of what's going on in your page. Somewhere along the line, the width of an element requires the browser to round up or down, the number of pixels wide the element is, making one element too wide to fit in the alotted space.
Tables are different. The browser KNOWS that the pixel values of the cell widths MUST be equal to the total table width, and fudges the cell dimensions to get things to fit. This does not occur when sizing DIVs using percentages.
The workaround is simple. Use floats and margins:
<style type="text/css">
<!--
#container {
width: 80%;
float: left;
}
#left {
width: 180px;
float: left;
}
#center {
margin-left: 180px;
}
#right {
margin-left: 80%;
}
#
-->
</style>
.
.
.
<body>
<div id="container">
<div id="left"> </div>
<div id="center"> </div>
</div>
<div id="right"> </div>
That untested code should work. Like I said, it should, but I don't have the time to fool around with it myself.
Hope this helps out. Essentially, the workaround (for all browsers) is to float one DIV, give it a width. In the DIV you want to float beside it, DON'T float it, and DON'T give it a width. Give it a left or right margin equal to the width of the floated DIV.toicontien,
When you finish being a student, you should become a teacher. Seriously.Thanks. I'd actually considered going into teaching after about 10 - 15 years in the biz. You just made my day
You're welcome. It's a very difficult thing to explain a technical issue in simple terms.Now you may have a problem; when I need something explained so I can understand it, I know who to ask!I ended up getting rid of the percentages, as I needed a fixed width on the right side as well as the left. As such, this shored up the problem I was having, however this has oddly created a margin/padding problem for my center section. Instead of posting it here, I posted it as a new thread. The title is "Freaky Padding/Margin Problems", feel free to take a look and help me out.
Thanks.