Renée Hellenbrecht wrote:
>> <http://neptune.he.net/~swdnbrg/cow/re/template.html>
>> One word Renee....... hasLayout [1]. Your page look fine in IE8
>> since this browser doesn't use > hasLayout for layout. For IE7 or
>> IE6 the problem is this.
>
> I had heard about hasLayout before looking at the resources I've been
> using to learn CSS, but I wasn't really sure how to actually write the
> comments for it/exactly where and when to use it. Thank you for
> showing me what to put in the CSS. It worked perfectly and saved me
> from ripping out hair.
My pleasure. :-)
> And thank you for having these links for me. I want to be able to
> understand how and when I need to use hasLayout in other situations,
> too. Thanks for helping with my learning curve. Are there any other
> really commonly used IE hacks, or is hasLayout the main one?
>
>
> --
> --Renée Hellenbrecht
Renee hasLayout isn't a hack, you needed a hack for IE6 and IE7 because of the
unwanted affects of hasLayout. In your case you floated (triggering hasLayout)
the #footer #footer_church div and this causes some default vertical margins of
child elements to disappear. All I did was add the margin-bottom back on to the
paragraph with the words "The Swedenborgian Church of North America."
Since it OK to use floats we just tidy up all the adverse affects that IE5~IE7
has when hasLayout plays havoc. Without hasLayout page layouts would just flop
around the place in IE5~IE7. All we are doing is stiffening up layouts with
correctly placed hasLayout triggers or we are using a CSS property that
inadvertently triggers hasLayout. I do suggest reading on-having-layout [1]
several times over (it does take a while to all sink in).
You will often hear the mantra "code for good browsers and hack for IE." You
will find that you will rarely if ever need to hack for IE7 but since it was
important that the lines were correct in placement, you had no other option.
IE6 is another story and as you progress in your coding you will discover all
thing go wrong with this browser. Many fixes for IE6 bugs are found on PIE [3].
The very short lists of IE hacks are.
p {color:lime} /* normal style */
* html p {color:orange} /* this only targets IE5~IE6 and IE/Mac */
*+html p {color:red} /* this only targets IE7~IE8, can also target Opera but
not in your case */
*:first-child+html p {color:red} /* this only targets IE7~IE8 */
Before the release of IE8b the IE7 targeting hacks were quite safe but now they
are also used by IE8 and since IE8 is a more CSS standard compliant browser a
new safe (is there such a thing) hack for IE7 is.
*+html/*/* /**/ p {color:purple} /* this only targets IE7 and filters IE8 */
The CSS validator [4] will not show the comment /*/* /**/ and just show this.
*+html p {color:purple}
but IE8 incorrectly drops the selector since it considers it invalid syntax.
IE8 sees this instead.
*+html* p {color:purple}
Eventually IE8 will stop parsing the comment /*/{ ...}/**/ incorrectly and drop
support for *+html. When this happens we can all hope that all the new bugs
with IE8 are gone. I would suggest you read the list wiki to hack or not to
hack [5] and css hacks [6].
The most important thing to realize is that you don't hack unless you
understand why they are needed in the first place (truly understand!). If you
do use them comment them so you know why they are in your style sheet (I see
that you have done this). The test case [2] on my site looks different in
IE5~IE7 compared to IE8 and the good browsers. You will slowly understand what
is happening when you analyze each example (cross browser) in this test case
but this is just one test case out of the many thousands on the web where IE
and other browsers show different rendering.
I wouldn't normally provide such help but I did like your design and one from a
beginner in CSS. Keep up the good work. Please note that I couldn't hack a fix
for the 3px text jog bug seen in IE6. :-)
[1] <http://www.satzansatz.de/cssd/onhavinglayout.html>
[2] <http://css-class.com/test/css/box/margins/iehaslayoutmarginswithfloats.htm>
[3] <http://www.positioniseverything.net/explorer.html>
[4] <http://jigsaw.w3.org/css-validator/>
[5] <http://css-discuss.incutio.com/?page=ToHackOrNotToHack>
[6] <http://css-discuss.incutio.com/?page=CssHack>
Alan
http://css-class.com/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
