Diane Ross wrote:
> On 2/4/07 11:31 PM, "francky" <[EMAIL PROTECTED]> wrote:
>
>> * testpage 2
>> <http://home.tiscali.nl/developerscorner/css-discuss/test-base2.html>
>>
>> So I guess it must be some margin or padding in the inner parts of the
>> #sidebar, for when we make the width of the #sidebar some 10px smaller,
>> it's ok.
>>
>
> How did you come up with 10px?
>
>> * testpage 3
>> <http://home.tiscali.nl/developerscorner/css-discuss/test-base3.html>
>>
It was just a guess to see what should happen, not deliberated.
> I have some questions on the change you suggested to the sidebar.
>
> <div class="quicklinks" style="width: 140px;">
>
> You mention margins...do I adjust margins for divs inside the sidebar or
> simply change the size as you suggested?
>
> Rather than just "do-it", I want to understand what I'm doing.
Yes, that is a good attitude. I pointed to the direction, but now I've
to do some further investigations to see what is really going on! ;-)
...
Back here: it appears to be the left and right border of 1px around the
.quicklinks and the other boxes in the #sidebar.
If we disable them, IE is showing good, and also FF doesn't have a
horizontal scrollbar anymore.
* See testpage 4
<http://home.tiscali.nl/developerscorner/css-discuss/test-base4.html>
And if we make the border larger, we see more overlap with the yellow
background'ed #content in IE, while FF is giving a larger horizontal
sidebar.
* See testpage 5
<http://home.tiscali.nl/developerscorner/css-discuss/test-base5.html>
> I really appreciate your patience with me on this.
> #quicklinks is inside the #sidebar. I have both set for width 150. Is this
> wrong thinking to make them the same?
>
> #sidebar {
> text-align: left;
> width: 150px;
> float: right;
> margin-top: 0;
> margin-right: 0;
> margin-bottom: 0; }
>
> /*Quicklinks
> */
> .quicklinks {
> width: 150px;
> border: solid 1px #ccc;
> margin: 0;
> }
>
> You can view the site with just the cleanup for the divs here:
> <http://www.entourage.mvps.org/>
>
Indeed, this is the direction to find the culprit. You assigned the
{width:150px} to the .quicklinks and so on, but then the border-width is
added to the box-width. Then FF is giving overflow + hor. scrollbar to
see the overflow, and IE is extending the surrounding right-floated
#sidebar (thus extending to the left, coming in conflict with the width
of the content, and dropping down because later in the normal flow).
* See css box model specs
<http://www.w3.org/TR/CSS21/visudet.html#the-width-property>
If we omit the width in .quicklinks, .highlight and the other boxes
below, then these boxes _inclusive everything_ (borders, paddings, ...)
have to stay inside the width of the surrounding container #sidebar.
* That's done in testpage 6
<http://home.tiscali.nl/developerscorner/css-discuss/test-base6.html>
Now no more drop of the #sidebar in IE, and no more horizontal scrollbar
in FF. :-)
Success and greetings,
francky
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
