Weird internet explorer issue
boles - March 7, 2007 - 11:26
Again, another problem with Internet Explorer.
I am using a moderated version of the Arcmateria theme. When launching my site in Firefox everything works as it should be working. When launching it in IE6 however it acts weird. The first seconds you see the site as if no css is used and than it suddenly switches to the css-layout as it should be. For some reason it is only doing this when switching between subpages. When launching the mainpage it doesn't do it anymore (it did before, but I don't know why it works as it should right now).
Seems like some problem with css loading.
My html head:
<head>
<title>Workshops | Debatclub Cicero</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">@import "/drupal-test/modules/event/event.css";</style>
<style type="text/css" media="all">@import "/drupal-test/modules/node/node.css";</style>
<style type="text/css" media="all">@import "/drupal-test/modules/system/defaults.css";</style>
<style type="text/css" media="all">@import "/drupal-test/modules/system/system.css";</style>
<style type="text/css" media="all">@import "/drupal-test/modules/user/user.css";</style>
<style type="text/css" media="all">@import "/drupal-test/themes/arcmateria/style.css";</style>
</head>and my stylesheet:
/* CSS Document */
html {
margin: 0px;
padding: 0px;
}
body {
background-color:#fff;
background-image:url(images/body.png);
background-position:top;
background-repeat:repeat-x;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:75%;
color:#666;
margin:0px;
padding: 0px;
}
#container {
width:770px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}
#header {
margin: 0px;
padding: 0px;
height: 69px;
}
#header h1 {
margin: 0px;
padding: 0px;
}
#header h1.site-name {
font-size: 24px;
margin: 0px;
padding-top: 24px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#header a {
color:#fff;
text-decoration:none;
border: none;
margin: 0px;
padding: 0px;
}
#header .site-slogan {
color: #CCCCCC;
}
#header .logo {
margin: 0px;
float: left;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 0px;
}
#header .logo a img {
color:#fff;
text-decoration:none;
border: none;
margin: 0px;
padding: 0px;
float: left;
}
#header p {
display: block;
padding: 0px;
color: #CCCCCC;
margin: 0px;
position: relative;
top: 36px;
left: 100px;
width: 400px;
}
#header form {
float: right;
margin-top: 25px;
padding-right: 30px;
}
#header .form-text {
color: #FFFFFF;
background-color: #525151;
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 5px;
line-height: normal;
}
#header .form-submit {
font-size: 12px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-color: #525151;
padding: 4px;
}
#sidebar_bottom {
background-image:url(images/sidebarbottom.gif);
height:64px;
margin-top: 32px;
}
#nav {
margin-top: -15px;
margin-right: -20px;
margin-bottom: 0;
margin-left: -10px;
padding-left: 288px;
display: block;
}
#nav li {
margin:0;
padding:0;
list-style:none;
float:left;
}
#nav li a {
display:block;
padding:7px 8px 14px 5px;
margin:0 1px 0 1px;
color:#e0e0ff;
text-decoration:none;
font-weight:bold;
line-height: 14px;
font-size: small;
}
#nav li a:hover, #nav li a.active {
background-image:url(images/menu_a_hover.gif);
background-position:bottom;
background-repeat:repeat-x;
color:#fff;
}
#sidebar {
width:250px;
background-color:#fff;
margin-top: -20px;
padding-top: 30px;
padding-right: 5px;
padding-bottom: 20px;
padding-left: 5px;
float: left;
}
#content {
padding-top: 30px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 20px;
margin: 0px;
float: right;
width: 450px;
}
#content .breadcrumb {
font-size: 9px;
margin: 0px;
padding: 0px;
}
#content h1 {
font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size:24px;
text-transform:uppercase;
letter-spacing:1px;
margin:16px 0 18px;
color:#FFA40B;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFBA3B;
}
#content h2 {
font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
text-transform:uppercase;
letter-spacing:1px;
margin:16px 0 18px;
color:#FFA40B;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFBA3B;
}
#content h2 a {
color: #FFA40B;
text-decoration: none;
}
#content h2 a:hover {
}
#content h3 {
font-size:16px;
color:#333;
font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
margin:10px;
}
#content p {
line-height:20px;
word-spacing:2px;
margin-top: 20px;
margin-right: 0;
margin-bottom: 20px;
margin-left: 0;
}
#content .node .content ul li {
list-style:none;
background-image:url(images/li.gif);
background-position:top left;
background-repeat:no-repeat;
margin-top: 10px;
margin-right: 0;
padding-top: 0;
padding-right: 0;
padding-left: 15px;
margin-left: -20px;
}
#content .node .content ol li {
margin-top: 10px;
}
#content #sideblock {
width:180px;
padding:10px;
background-color:#fff;
float:right;
font-size:90%;
margin:0 0 0 20px;
}
#content a {
color:#000;
}
#content a:hover {
background-color:#FFCC57;
color:#000;
}
/*
#content form {
line-height:20px;
word-spacing:2px;
padding:0 0 0 20px;
margin:20px 0 20px 0;
}
*/
.submitted {
font-size: 10px;
color: #999999;
}
blockquote {
background-image:url(images/bq.jpg);
background-position:top;
background-repeat:repeat-x;
border:1px solid #eee;
font-size: 11px;
padding: 5px;
margin: 2px;
}
/*
.sidebarfooter {
background-color:#eee;
text-align:left;
padding:7px 5px 7px 5px;
font-size:80%;
}
.sidebarfooter a {
background-color:#f6f6f6;
padding:3px;
text-decoration:none;
}
.sidebarfooter a:hover {
color:#000;
background-color:#fff;
}
*/
/*
#content #sideblock h1 {
text-transform:none;
font-size:120%;
color:#000;
margin:0;
letter-spacing:0;
}
#sideblock p {
text-indent:0;
line-height:17px;
padding:5px;
margin:5px 0 5px 0;
color:#bbb;
}
#sideblock ul {
margin:0 0 5px 5px;
border:none;
}
#sideblock li {
margin: 0;
background-image:none;
padding:0;
border:none;
}
#sideblock li a {
text-decoration:none;
display:block;
background-color:#fff;
padding:5px 5px 5px 10px;
color:#888;
}
#sideblock li a:hover {
background-color:#f9f9f9;
color:#666;
background-image:url(images/sideblock_li_a_hover.gif);
background-position:left;
background-repeat:no-repeat;
}
*/
/*
a:hover {
text-decoration:none;
}
*/
#sidebar h2 {
font-family:"Century Gothic", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
color:#777;
font-weight:bold;
letter-spacing:-1px;
margin: 0px;
padding-top: 0.3em;
padding-right: 0px;
padding-bottom: 0.3em;
padding-left: 0px;
}
#sidebar a {
color:#000;
text-decoration: underline;
}
#sidebar a:hover {
background-color:#FFCC57;
color:#000;
}
#sidebar a.active {
background-color:#FFCF80;
}
#sidebar h1 {
font-family:Century Gothic, "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
color:#777;
font-weight:normal;
letter-spacing:-1px;
}
#sidebar p {
font-size:90%;
line-height:19px;
margin:10px 0 10px 0;
}
#sidebar form {
margin-bottom: 30px;
margin-top: 0px;
text-align: center;
}
#sidebar input {
border: 1px solid #FFA40B;
}
#footer {
border-top:3px double #FFA40B;
color:#ccc;
text-align:center;
display: block;
margin: 0px;
clear: both;
padding-top: 20px;
padding-right: 16px;
padding-bottom: 20px;
padding-left: 16px;
}
#footer p {
margin: 6px;
}
#footer a {
color:#999;
text-decoration: underline;
}
#footer a:hover {
color:#333;
text-decoration: none;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #FFA40B;
}
.form-submit {
color: #fff;
background-color: #FFBA3B;
font-weight: bold;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 1px;
}
.content a:hover {
background-color:#FFCC57;
color:#000;
text-decoration: underline;
}
/*
input, textarea, select {
border: 1px solid #FFA40B;
}
*/
/*
.form-checkbox, .form-radio {
border-style: none;
}
*/
.comment {
background-color: #FBFBFB;
margin-top: 8px;
margin-right: 0px;
margin-bottom: 4px;
margin-left: 0px;
padding-top: 2px;
padding-right: 4px;
padding-bottom: 8px;
padding-left: 4px;
border-top-width: 4px;
border-top-style: double;
border-top-color: #FFCC66;
color: #333333;
}
#container #content .comment h3 {
margin: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 8px;
padding-left: 0px;
}
.comment .title {
padding: 0px;
margin: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-size: 11px;
}
div#mission {
background-image:url(images/bq.jpg);
background-position:top;
background-repeat:repeat-x;
border:1px solid #E4E4E4;
padding: 3px;
margin: 0px;
}
table {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
tbody {
border: 0;
}
tr.odd {
background: #e4edf2;
border-bottom: 0px;
}
tr.even {
background: #f8fbfc;
border-bottom: 0px;
}
td.view-field {
vertical-align: top;
}
td.view-field a {
text-decoration: none;
}
/* replace list-style menu */
li.expanded {
list-style-type: circle;
list-style-image: url(images/menu-expanded.gif);
margin: 0;
padding-top: 0.3em;
padding-right: 0.5em;
padding-bottom: 0;
padding-left: 0;
}
li.collapsed {
list-style-type: disc;
list-style-image: url(images/menu-collapsed.gif);
margin: 0;
padding-top: 0.3em;
padding-right: 0.5em;
padding-bottom: 0;
padding-left: 0;
}
li.leaf {
list-style-type: square;
list-style-image: url(images/menu-leaf.gif);
padding: 0.2em 0.5em 0 0;
margin: 0;
}
ul.links {
margin: 0;
padding: 0;
display: inline;
}
ul.links li {
padding: 0.5em;
}
.block {
padding-bottom: 1.5em;
}
#cicero-pic {
position: absolute;
top: 200px;
right: 0;
}
Options >> Settings
Options > Settings > "Check for newer versions of stored pages"
When set to "Every visit to the page" I see that type of behaviour. When set to "Automatic" the problem, err, fixes itself. Try that.
That is a FOUC
Flash Of Unstyled Content
Read this page to learn all about it! And how fix that issue.
http://www.bluerobot.com/web/css/fouc.asp/
--
Serge
This was exactly what was
This was exactly what was wrong. Thanks.