Belated updates after a holiday break...
Original message:
> From: Lisa Goettel <[EMAIL PROTECTED]>
>
>> I have a few issues in IE with a new site:
>> www.bigsurarts.org/newsite
>> CSS:
>> www.bigsurarts.org/newsite/public/css/main.css
>> (with some IE specific sheets in that directory as well)
>>
>> Primary issues:
>>
>> - In IE 5.5 the site is not rendering at all
>>
>> - In IE 6 the two images above the content (with the menu) are not
>> displaying inline
>
On Nov 20, 2007, at 2:45 PM, Holly Bergevin wrote:
> Hi Lisa,
>
> The thing I see that is causing you the most problems on your main
> page is the xml declaration that comes before the doctype. If/
> since you are not serving the page as xml, you do not need that.
> What it's doing is throwing IE6 into quirks mode [1], and it may be
> what is preventing IE5.5 from displaying the page at all.
>
> I suggest you remove it.
>
> After that, you can make some small changes in main.css that will
> make IE6 look very much like FF (2.0.0.9) and therefore will
> probably get you at least started on fixing any other issues.
> Following are the changes/additions/deletions you will want to try
> (all of them at together fix the issues, though individually they
> correct little things).
>
> You have a number of elements that you have given a {width: 100%;}.
> While most of them do not seem to cause problems, this following
> one does. Adding a width, or a height to a block element,
> fundamentally changes the way IE browsers view that element. The
> dimension you use gives the element "layout" [2] and while
> sometimes this can be useful, sometimes it is most definitely not.
> The following is one of those times.
>
> .content .container {
> float: left;
> padding: 11px;
> /* width: 100%; */ /* remove */
> }
>
> Add the following selector, which will clear up a couple of
> misunderstandings IE6 (at least) is having about images.
>
> .content .frame-left-top img,
> .content .frame-right-bottom img {margin-right: 0;}
>
> Add {display: inline;} to the following selector to overcome IE's
> margin doubling bug [3] -
>
> .content .frame-right-top {display: inline; other: styles;}
>
> Change the padding value in the following selector -
>
> .content .cont-fr-l {
> float: left;
> width: 465px;
> padding: 22px; /* change from 23px */
> padding-top: 8px;
> }
>
> Note: With the removal of the xml declaration at the start of the
> page, there is likely no longer a need for a specific IE6 stytle
> sheet, at least for the page I looked at. Indeed, all my
> suggestions above are made without that ie6.css style sheet
> "engaged." I did not test in IE7, though its specific style sheet
> may not be needed either, depending on the page.
>
> None of the changes I've suggested need to be placed in a separate
> style sheet. The main.css sheet is fine.
Removing the xml declaration has indeed fixed most of the issues.
Can't believe I didn't notice that... :P And with all your
additional suggestions in place, IE is much, much happier. Thank you!
>
>> - In IE 6 & 7, on the sub pages ( www.bigsuarts.org/newsite/
>> contact.html ) the text is not wrapping around the right-floated
>> green
>> box.
>
> I did not look at any pages other than the main page, but it's
> possible that the changes I suggest above will solve some of the
> issues, as long as there is no xml declaration at the beginning of
> those pages.
>
> What you describe in the above paragraph *sounds* like it might be
> a case where an element 'has layout' and that "property" is causing
> problems. I don't know for sure, as I didn't check.
This is still an issue, and I think you're right that the hasLayout
is causing the problem - I'm going to get to troubleshooting this
more tomorrow and if anyone has an offering it would be appreciated
and undoubtedly speed things along for me.
>
>> I've tried the basic IE fixes that I know of to no avail. Help is
>> much appreciated.
>
> "Basic IE fixes" are not always useful, as you have found, when
> their addition actually causes a problem or two (or more).
> Sometimes the only way to discover what is causing the problem is
> to cut chunks of the style sheet out until the display resembles
> the display in another browser and then put the styles back little
> by little, observing the changes (in both the targed and comparison
> browsers) and thus discovering which styles are actually causing
> the problems. You can find more information in this technique in
> the "Mystery Bug" article on PIE. [4]
>
> I hope that this helps,
>
> ~holly
>
Thank you so much for your thorough and useful insights and tips
Holly. I really appreciate it.
I have found one additional issue that has cropped up that I'd love
another pair of eyes on. The dropdown menu (main horizontal nav at
the top should drop down for the first four menu items) is not
working in IE6.
Thanks all,
Lisa
______________________________________________________________________
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/
