Hi Mitko!
I left out what I thought was irrelevant to your questions from the
quotes. Read on.
On 5/9/06, Mitko Gerensky-Greene <[EMAIL PROTECTED]> wrote:
>
> 1. The #quotes appear to have a tiny top margin even though I am trying to
> neutrialize the #content's top padding with the #quotes top margin:
>
> #content
> {
> padding-top: 1em;
> padding-right: 1em;
> padding-bottom: 1em;
> padding-left: 1em;
> }
>
> #quotes {
> margin-top: -1em;
> margin-right: -1em;
> font-size: 90%;
> }
>
In the #content DIV, the width and height of '1 em' are based around
the font size in that DIV, namely 0.9 em (inherited from your BODY
style declaration). In the #quotes DIV you reduce the font size to
90%, which also reduces the size of '1 em' in that DIV by 10%. So the
padding of 1 em on the #content DIV is 10% larger in size than the top
margin of 1 em of the #quotes DIV. Since the difference is exactly
10%, you can easily solve the problem by adding 0.1 em to the top
margin of #quotes.
So this:
--------- css ----------
#quotes {
margin-top: -1em;
font-size: 90%;
}
--------- css ----------
...becomes this:
--------- css ----------
#quotes {
margin-top: -1.1em;
font-size: 90%;
}
--------- css ----------
> 2. If I attempt to give #content padding-right: 1em, the #quotes appears
> with right margin in Firefox and shifted way to the right in IE6.
Your second problem is caused by the 'double float-margin' bug in IE.
IE basically sees your 'margin-right: -1 em' as 'margin-right: -2em'
and hides some of the #quotes DIV beneath your wrapper DIV. So the
padding is rendered correctly, but the position of the DIV isn't. The
solution is to just put 'display: inline' in your #quotes style
declaration. Floated elements automatically become 'block' elements,
so you don't have to worry about other browsers getting confused with
the rule.
--------- css ----------
#quotes {
float: right;
display: inline;
}
--------- css ----------
More info on the 'double float-margin bug':
http://www.positioniseverything.net/explorer/doubled-margin.html
-Tisho
>
> What I want to accomplish is a simple layout where the #quotes are
> positioned in the top right corner of the #content in both Firefox and IE.
>
> Any assistance would be highly appreaciated!
>
> Thanks in advance!
>
> Mitko
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/
