Kim Brooks Wei wrote:
> I had a look at some browser shots of this site, and it seems to have
> issues in IE 5.5/6. In fact, I couldn't see any content in either of
> these browsers. Can someone take a look and see what might be the
> problem here?
>
> http://thewei.com/sandbox/briarhall/
>
> Thanks,
> Kimi
Hi Kim, Browser-shots just couldn't show the full page content since it is
about 66,000px wide (really, I'm serious). You have the xml prolog before the
doctype so that puts IE6 into quirks mode making IE5.5 and IE6 show much the
same thing (this is ok to do). The page is initially showing the box model
difference [1] with IE5.5 (always in quirks mode) and IE6 in quirks modes. The
same browsers have the double float margin bug [2]. These two things mixed in
with the use of percentages produce your very wide page. All side padding can
be replaced with side margins to overcome the box model differences. Only two
style blocks need to be changed to address the IE5~6/Win double float margin
bug and all percentage's can be easily replaced with pixels.
1)
#main {
margin-bottom: 26px;
float: left;
padding-left: 6%; /* DELETE to remove box model issues */
width: 60%; /* CHANGE, see below */
}
change to
#main {
margin-bottom: 26px;
float: left;
display:inline; /* stops the double margin bug in IE6/Win and earlier */
margin-left: 46px; /* ADD */
width: 460px;
}
2)
#sidebar {
font-size: 95%;
margin-bottom: 26px;
float: right;
padding-left: 4%; /* DELETE to remove box model issues */
padding-right: 6%; /* DELETE to remove box model issues */
width: 21%; /* CHANGE, see below */
vertical-align: top;
color: #454545;
}
change to
#sidebar {
font-size: 95%;
margin-bottom: 26px;
float: right;
display:inline; /* ADD stops the double margin bug in IE6/Win and
earlier */
margin-right: 46px; /* ADD */
width: 200px;
vertical-align: top;
color: #454545;
}
You need to add the below to center the table element in IE5~6/Win and earlier
since they don't center elements with auto side margins which the table element
has.
* html body {
text-align: center;
}
The "* html* proceeding the body selector above is the star html hack used to
feed IE5~6/Win the special rules they sometimes need. Other browsers (apert
from IE5/Mac) will just drop the rule and flag an error since the selector
should match nothing.
Now the validation errors.
body, html {
background-image: url("pattern.gif") }
font-size: .9em;
}
replace the "}" after the background image declaration with a ";" semicolon.
body, html {
background-image: url("pattern.gif") ;
font-size: .9em;
}
and in the html at the end of the last paragraph
The Wei</a><div>
close the paragraph properly by adding the forward "/" slash
The Wei</a></div>
Now the page should looks quite similar in most browsers.
1. <http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41>
2. <http://www.positioniseverything.net/explorer/doubled-margin.html>
CSS Validator <http://jigsaw.w3.org/css-validator/>
HTML Validator <http://validator.w3.org/>
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/
