开发者

Background color property not being obeyed in IE8

I have a problem with my site found here: http://minecraftskinner.com

If you view the site in any browser other than IE8, the background looks blue which is the way it should be. If you try it in IE8 however, the background is blue but then changes to a solid white after the page has loaded.

I've looked over the CSS and at first I thought it was the *{} selector I used (I've changed it now, I used it back when I didn't know it was bad) but that didn't fix it. The facebook iframe also isn't at fault, as I've commented it out of the HTML and it still happens. It's worth noting that this happens on the homepage and on any other page of the site.

Any ideas whats going wrong here? I've been at this for hours and I'm clueless.

Here's the sites CSS, but I think the HTML output of the page is a little too big to copy.

body {
    background-color: #8cbdff;
    font-family: "Trebuchet MS";
    font-size: 1em;
    margin: 0;
}

#container {
    width: 836px;
    margin: 0 auto;
    padding: 0;
}

#header {
    width: 836px;
    height: 120px;
}

p {
    padding: 0;
    margin: 0;
}

#header ul {
    float: right;
    list-style-type: none;
    margin: 95px 0px 0px 0px;
    padding: 0;
}

#header ul li {
    float: right;
    padding: 0;
    margin: 0;
}

#header ul li a {
    padding: 6px 10px 6px 10px;
    margin: 0px 5px 0px 5px;
    text-decoration: none;
    color: #ffffff;
    outline: none;
}

#header ul li a:hover {
    background: #505050;
    border-radius: 3px;
}

#header ul li form input[type="text"] {
    padding: 2px;
    margin: 0;
}

#header ul li form input[type="submit"] {
    padding: 2px;
    margin: 0;
}

#site_logo {
    margin: 10px 0px 0px 0px;
}

#guy {
    background: url('images/guy.png');
    width: 118px;
    height: 239px;
    position: fixed;
    bottom: 0;
    left: 0;
}

#content_top {
    background: url('images/content_top.png') no-repeat;
    width: 836px;
    height: 19px;
    padding: 0;
    margin: 0;
}

#content {
    background: url('images/content.png') repeat-y;
    padding: 0px 15px 0px 15px;
    width: 806px;
    font-size: 0.95em;
    margin-bottom: -5px;
}

#content_foot {
    background: url('images/content_foot.png') no-repeat;
    width: 836px;
    height: 19px;
    padding: 0;
    margin: 0;
}

h1 {
    color: #555555;
    text-shadow: 0 1px 1px #cccccc;
    font-weight: normal;
    border-bottom: 1px solid #cccccc;
    font-size: 1.5em;
    padding: 0;
    margin: 0;
}

h2 {
    color: #555555;
    text-shadow: 0 1px 1px #cccccc;
    font-weight: normal;
    border-bottom: 1px solid #cccccc;
    font-size: 1.35em;
    margin: 15px 0px 0px 0px;
    margin: 0;
}

#content table {
    border-top: 1px solid #7bc4df;
    border-left: 1px solid #7bc4df;
    border-right: 1px solid #7bc4df;
    margin: 5px 0px 10px 0px;
    width: 100%;
    font-size: 0.8em;
    padding: 0;
}

#content table a {
    color: #003366;
    text-decoration: none;
    padding: 0px 5px 0px 5px;
    margin: 0;
}

#content table a:hover {
    background: #3a4d6e;
    color: #ffffff;
    padding: 0px 5px 0px 5px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

#content table tr {
    background: #f5fdfe;
}

#content table tr td {
    padding: 3px;
    border-bottom: 1px solid #7bc4df;
}

#upload_form {
    margin: 10px 0px 0px 0px;
    padding: 0;
}

#upload_form input[type="text"] {
    width: 300px;
    padding: 2px;
    margin: 0;
}

#upload_form input[type="button"] {
    padding: 2px;
    margin: 10px 0px 0px 0px;
}

p.error {
    padding: 3px;
    background: #ffabab;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid red;
    margin: 0;
}

.title {
    font-size: 1.1em;
    font-weight: bold;
}

td.preview {
    width: 42px;
}

td.links {
    text-align: center;
    width: 50px;
}

td.time {
    text-align: center;
}

td.auth {
    text-align: center;
}

td.preview {
    text-align: center;
}

.left-page {
    float: left;
}

.right-page {
    float: right;
}

.clear {
    clear: both;
}

p.gen {
    font-size: 0.75em;
    text-align: right;
    margin: 0px 15px 0px 0px;
    color: #5fa3ff;
}

strong {
    font-weight: normal;
}

#like_wrap {
    position: absolute;
    top: 100px;
    margin-left: 15px;
}

.table_head {
    background: #DDFBFF;
    text-align: center;
    font-size: 1.2em;
}

tr:hover td {
    background: #DDFBFF;
}

#afil {
    padding: 5px;
    background: #bfdaff;
    position: fixed;
    bottom: 0px;
    right: 0px;
    margin: 0px 5px 5px 0px;
    border-radius: 5px;

}

#afil ul {
    list-style-type: none;
}

#afil ul li {
    display: inline;
}

#skinPreviewPanel {
    width: 100%;
    background: #A0B0E0;
    border-radius: 5px;
    margin: 10px 0px 0px 0px;
    border: 1px solid #859BDB;
    text-align: center;
    position: relative;
}

.floatingButton {
    positio开发者_高级运维n: absolute;
}

.downloadButton {
    padding: 4px;
    text-decoration: none;
    bottom: 3px;
    border-radius: 4px;
    right: 3px;
}

.downloadButton:hover {
    background: #3A4D6E;
    color: #FFFFFF;
}

.remoteButton {
    padding: 4px;
    text-decoration: none;
    bottom: 35px;
    border-radius: 4px;
    right: 3px;
}

.remoteButton:hover {
    background: #3A4D6E;
    color: #FFFFFF;
}

.comment_wrap {
    padding: 3px;
    background: #cbe1ff;
    margin: 5px 0px 5px 0px;
    border-radius: 3px;
    border: 1px solid #accfff;
}

#comment_toggle {
    font-size: 1em;
    color: #333;
    font-weight: bold;
    margin: 5px;
    display: block;
}

#comment_form {
    display: none;
    margin: 10px;
}

#comment_form label {
    font-weight: bold;
}

#comment_form input[type="text"] {
    width: 200px;
    padding: 2px;
    font-family: "Trebuchet MS";
}

#comment_form textarea {
    width: 260px;
    padding: 2px;
    font-family: "Trebuchet MS";
    font-size: 0.9em;
}

.comment_time {
    font-size: 9.6px;
    color: #606060;
}

.comment_author {
    font-size: 13px;
    color: #333;
    font-weight: bold;
}

p.comment {
    margin: 5px 0px 0px 0px;
}

Thanks!


It's a bug in the version of jQuery you're using, 1.6.1.

I came across the same problem in this previous question: Weird IE8 layout glitch - why does the body background disappear?

Upgrading to the now available 1.6.2 will solve the problem.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜