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
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.
>- In IE 6 & 7, on the sub pages ( www.bigsuarts.org/newsite/
>about.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.
>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
[1] http://www.communitymx.com/content/article.cfm?cid=E2F258C46D285FEE (see
page 2 under Caution! specifically)
[2] http://www.satzansatz.de/cssd/onhavinglayout.html
[3] http://www.positioniseverything.net/explorer/doubled-margin.html
[4] http://www.positioniseverything.net/articles/mys-bug.html
______________________________________________________________________
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/
