CSS Loads Slowly in IE 6.0/Fine in Firefox

kwilliams · December 13th, 2005, 04:07 PM

I have a site that uses CSS rollovers, but they load very slowly in IE 6.0. They load pretty quickly in Mozilla Firefox. You can view the home page at http://www.douglas-county.com/. If someone could please view the source-code and give me some idea(s) on why it's not loading quickly in IE, it would be greatly appreciated. Also, is there a way to cache CSS? Thanks for any advice.

KWilliams

kwilliams · December 13th, 2005, 04:30 PM

FYI: Here's the CSS code.

Code:

<style type="text/css">/*Page Properties*/
.noPrint { 
display: none; 
} 

a:link {
    font-family:arial,sans-serif;
    font-size:12px;
    font-style:normal;
    font-weight:normal;
    letter-spacing:normal;
    text-decoration:underline;
    color:#330066;
}
a:visited {
    font-family:arial,sans-serif;
    font-size:12px;
    font-style:normal;
    font-weight:normal;
    letter-spacing:normal;
    text-decoration:underline;
    color:#330066;
}
a:hover {
    color:#ff0000;
    text-decoration:none;
}
a:active {
    font-family:arial,sans-serif;
    font-size:12px;
    font-style:normal;
    font-weight:normal;
    letter-spacing:normal;
    text-decoration:underline;
    color:#330066;
}
a.small:link {
    font-family:arial,sans-serif;
    font-size:10px;
    color:#330066;
    text-decoration:underline;
}
a.small:visited {
    font-family:arial,sans-serif;
    font-size:10px;
    color:#330066;
    text-decoration:underline;
}
a.small:hover {
    font-family:arial,sans-serif;
    font-size:10px;
    color:#ff0000;
    text-decoration:none;
}
a.small:active {
    font-family:arial,sans-serif;
    font-size:10px;
    color:#330066;
    text-decoration:underline;
}
l:visited {
    font-family:arial,sans-serif;
    font-size:10px;
    color:#330066;
    text-decoration:underline;
}
body {
    background-color:#ffffff;
    margin-top:0;
    margin-left:0;
    margin-bottom:0;
    margin-right:0;
    color:#000000;
}
p {font-family:arial,sans-serif;
    font-size:12px;
    font-style:normal;
    letter-spacing:normal;
    text-decoration:none;
    color:#000000;
}
p.small {
    font-family:arial,sans-serif;
    font-size:10px;
    font-style:normal;
    letter-spacing:normal;
    text-decoration:none;
    color:#000000;
}
p.red {
    font-family:arial,sans-serif;
    font-size:10px;
    font-style:normal;
    letter-spacing:normal;
    text-decoration:none;
    color:#ff0000;
}
div.small {
    font-family:arial,sans-serif;
    font-size:10px;
    font-style:normal;
    letter-spacing:normal;
    text-decoration:none;
    color:#000000;
}
td {
    font-family:arial,sans-serif;
    font-size:12px;
    font-style:normal;
    letter-spacing:normal;
    text-decoration:none;
}
td.small {
    font-family:arial,sans-serif;
    font-size:10px;
    font-style:normal;
    letter-spacing:normal;
    text-decoration:none;
}
td.topback2 {
background-image:url(../images/topback2.gif)
}
td.btmlines2 {
background-image:url(../images/btmlines2.gif)
}

/* Light blue-gray border */
table.bluegrayborder, table.bluegrayborder td {
border-color:#CCCCCC;
border-style:solid;
border-width:1px;
border-collapse:collapse;
}

/* Medium blue border */
table.medblueborder, table.medblueborder td {
border-color:#6666CC;
border-style:solid;
border-width:1px;
border-collapse:collapse;
}

/* Dark blue border */
table.darkblueborder, table.darkblueborder td {
border-color:#330066;
border-style:solid;
border-width:1px;
border-collapse:collapse;
}

/* Maroon border */
table.maroonborder, table.maroonborder td {
border-color:#660000;
border-style:solid;
border-width:1px;
border-collapse:collapse;
}

/* Black border */
table.blackborder, table.blackborder td {
border-color:#000000;
border-style:solid;
border-width:1px;
border-collapse:collapse;
}

/* White border */
table.whiteborder, table.whiteborder td {
border-color:#FFFFFF;
border-style:solid;
border-width:1px;
border-collapse:collapse;
}

/* Cream border */
table.creamborder, table.creamborder td {
border-color:#FFFFCC;
border-style:solid;
border-width:1px;
border-collapse:collapse;
}

div.red {
    font-family:arial,sans-serif;
    font-size:10px;
    font-style:normal;
    letter-spacing:normal;
    text-decoration:none;
    color:#ff0000;
}
li {
    font-family:arial,sans-serif;
    font-size:12px;
    font-style:normal;
    font-weight:normal;
    letter-spacing:normal;
    text-decoration:none;
    color:#000000;
}
h1 {
    display:inline;
    font-family:arial,sans-serif;
    font-size:16px;
    font-style:normal;
    font-weight:bold;
    letter-spacing:normal;
    text-decoration:none;
    color:#660000;
}
h2 {
    display:inline;
    font-family:arial,sans-serif;
    font-size:14px;
    font-style:normal;
    font-weight:bold;
    letter-spacing:normal;
    text-decoration:none;
    color:#000000;
}
h3 {
    display:inline;
    font-family:arial,sans-serif;
    font-size:12px;
    font-style:normal;
    font-weight:bold;
    letter-spacing:normal;
    text-decoration:none;
    color:#ffffff;
}
h4 {
    display:inline;
    font-family:arial,sans-serif;
    font-size:10px;
    font-style:normal;
    font-weight:bold;
    letter-spacing:normal;
    text-decoration:none;
    color:#ff0000;
}

/*Form Properties*/
#formButton  {
    background-color:#cccccc;
    color:#000000;
    font-size: 8pt;
    font-family: arial,sans-serif;
    font-weight: bold;
    width: auto;
    height: 20px;
    padding: 0px 0px;
    margin: 1px;
    text-align: center;
    cursor:pointer;
}

.formButton  {
    background-color:#cccccc;
    color:#000000;
    font-size: 8pt;
    font-family: arial,sans-serif;
    font-weight: bold;
    width: auto;
    height: 20px;
    padding: 0px 0px;
    margin: 1px;
    text-align: center;
    cursor:pointer;
    border-color:#333366;
}

INPUT, TEXTAREA {
    font-family:arial,sans-serif;    
    padding: 1px;
    font-size: 12px;
    color:#000000;
    background-color:#FFFFFF;
    border: inset 2px #660000;
}

.blueform {
    font-family:arial,sans-serif;    
    padding: 1px;
    font-size: 12px;
    color:#000000;
    background-color:#FFFFFF;
    border: inset 2px #333366;
}

/*Navigation Properties*/
#nav1 {  /* Main Nav Properties */
    border: 1px solid #330066;
    background: #FFFFCC;
    font-family: arial,sans-serif;
    font-size: 10px;
}

#nav1 ul { /* Main Nav Unordered List Properties */
    display: block;
    margin: 0px;
    padding: 0px;
    font-family: arial,sans-serif;
    font-size: 10px;
}

#nav1 li { /* Main List Properties */
      behavior:  url(/scriptlibrary/iefixes.htc);
    display: block;
    list-style: inline;
    line-height: 1.5em;
    font-family: arial,sans-serif;
    font-size: 10px;
}

#nav1 li:hover, 
#nav1 li.hover { /* List Hover Properties */
    background: #CCCCFF;
    display: inline;
}

#nav1 ul.sub1 { /* Nav Unordered List 'Sub1' Properties */
    position: absolute;
    border: 1px solid #330066;
    padding: 0px;
    background: #FFFFCC;
    margin: 0px 0px 0px -1px;
    width: 90px; /* MUST BE HERE FOR NS TO WORK*/
    display: none;
}

#nav1 ul.sub2 {  /* Nav Unordered List 'Sub2' Properties */
    position: absolute;
    border: 1px solid #330066;
    padding: 0px;
    background: #FFFFCC;
    margin: -16px 0px 0px 90px;
    width: 90px; /* MUST BE HERE FOR NS TO WORK*/
    display: none;
}

#nav1 ul.sub3 {  /* Nav Unordered List 'Sub3' Properties */
    position: absolute;
    border: 1px solid #330066;
    padding: 0px;
    background: #FFFFCC;
    margin: -16px 0px 0px 90px;
    width: 90px; /* MUST BE HERE FOR NS TO WORK */
    display: none;
}

#nav1 li>ul.sub1 {  /* Nav <LI> to <UL> 'Sub1' Properties */
    margin: 0em 0px 0px 0em;
} 

#nav1 li>ul.sub2 {  /* Nav <LI> to <UL> 'Sub2' Properties */
    margin: -1.5em /*Width*/ 0px /*Width*/ 0px /*Width*/ 90px /*Width*/; /* NS */
}

#nav1 li>ul.sub3 {  /* Nav <LI> to <UL> 'Sub3' Properties */
    margin: -1.5em /*Width*/ 0px /*Width*/ 0px /*Width*/ 90px /*Width*/; /* IE */
}

#nav1 ul.root li:hover ul.sub1, 
#nav1 ul.root li.hover ul.sub1 { 
    display: block;
}

#nav1 ul.sub1 li:hover ul.sub2, 
#nav1 ul.sub1 li.hover ul.sub2 { 
    display: block;
}

#nav1 ul.sub2 li:hover ul.sub3, 
#nav1 ul.sub2 li.hover ul.sub3 { 
    display: block;
}

#nav1 a {  /* IE */
    color: #330066;
    text-decoration: none;
    line-height: 1.5em;
    display: block;
    width: 90px;
    height: auto;
    font-family: arial,sans-serif;
    font-size: 10px;
}

#nav1 a:hover,
#nav1 a.hover {
    color: #330066;
    background: #CCCCFF;
    display: block;
    width: 90px;
}

.hassub3 { 
    background: url('http://www.douglas-county.com/images/arrows.gif') no-repeat right center;
}</style>

KWilliams

richard.york · December 14th, 2005, 10:58 AM

The best way to troubleshoot problems with speed is to methodically disable stylesheets/rules/markup till you have the problem code isolated. That is to say, comment out code till the problem goes away, once you have the problem isolated we'll be a better position to help out.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

kwilliams · December 14th, 2005, 06:33 PM

Thanks for the advice richard. I was able to isolate the problem to the iefixes.htc document.

I was originally forwarded this idea from Vladdy in another forum, which you can see at http://www.vladdy.net/Demos/IEPseudoClassesFix.html. It's an IE hack that uses the behavior property to only load in IE. It basically makes the hover property work in IE.

It used to work great, but now loads extremely slowly in IE. I think that it may have to do with the latest service pkg downloaded for IIS that came with a patch for IE 6.0.

When I comment-out the reference to that document, the page loads normally. If you or anyone else let me know why this would be happening, that would be great.

Also, I've tried to get this stylesheet to work in IE without the .htc doc, but the popups don't work. I tried the IE hack of adding "border:0;" to any "hover" reference in the stylesheet, but it didn't get the popups to show up. If you can see another way to accomplish this without the use of the IE hack, that would also be great.

Thanks.

New CSS Stylesheet:

Code:

/*Page Properties*/
.noPrint { 
    display: none; 
} 

a {
    background: transparent;
    font-family: arial, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    text-decoration: underline;
}
a:link,
a:visited {
    color: #306;
}
a:hover {
    color: #F00;
    text-decoration: none;
}
a:active {
    color: #306;
}

a.small {
    background: transparent;
    font-family: arial, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    text-decoration: underline;
}
a.small:link,
a.small:visited {
    color: #306;
}
a.small:hover {
    color: #F00;
    text-decoration: none;
}
a.small:active {
    color: #306;
}

body {
    font-family: arial, sans-serif;
    background-color:#FFF;
    margin-top:0;
    margin-left:0;
    margin-bottom:0;
    margin-right:0;
    color:#000000;
}

p {
    font-size:12px;
    font-style:normal;
    letter-spacing:normal;
    text-decoration:none;
    color:#000;
}
p.small {
    font-size:10px;
}
p.red {
    font-size:10px;
    color:#F00;
}

div {
    font-family: arial, sans-serif;
    font-size:10px;
    font-style:normal;
    letter-spacing:normal;
    text-decoration:none;
    color:#000;
}

div.small {
    font-size:10px;
}

div.red {
    font-size:10px;
    color:#F00;
}

td {

    font-size:12px;
    font-style:normal;
    letter-spacing:normal;
    text-decoration:none;
}

td.small {
    font-size:10px;
}

td.topback2 {
    background-image:url(../images/topback2.gif)
}

td.btmlines2 {
    background-image:url(../images/btmlines2.gif)
}

table {
    font-family: arial, sans-serif;
    border-collapse:collapse;
}

/* Light blue-gray border */
table.bluegrayborder, table.bluegrayborder td {
    border-width:1px;
    border-style:solid;
    border-color:#CCC;
}

/* Medium blue border */
table.medblueborder, table.medblueborder td {
    border-width:1px;
    border-style:solid;
    border-color:#66C;
}

/* Dark blue border */
table.darkblueborder, table.darkblueborder td {
    border-width:1px;
    border-style:solid;
    border-color:#306;
}

/* Maroon border */
table.maroonborder, table.maroonborder td {
    border-width:1px;
    border-style:solid;
    border-color:#600;
}

/* Black border */
table.blackborder, table.blackborder td {
    border-width:1px;
    border-style:solid;
    border-color:#000;
}

/* White border */
table.whiteborder, table.whiteborder td {
    border-width:1px;
    border-style:solid;
    border-color:#FFF;
}

/* Cream border */
table.creamborder, table.creamborder td {
    border-width:1px;
    border-style:solid;
    border-color:#FFC;
}

li {

    font-size:12px;
    font-style:normal;
    font-weight:normal;
    letter-spacing:normal;
    text-decoration:none;
    color:#000000;
}
h1, h2, h3, h4, h5, h6 {
    display:inline;
    font-style:normal;
    font-weight:bold;
    letter-spacing:normal;
    text-decoration:none;
}

h1 {
    font-size:16px;
    color:#600;
}

h2 {

    font-size:14px;
    color:#000;
}

h3 {

    font-size:12px;
    color:#FFF;
}

h4 {
    font-size:10px;
    color:#F00;
}

/*Form Properties*/
form {
    color:#000;
    font-size: 12px;
}

.formButton  {
    background-color:#ccc;
    font-size: 8pt;
    font-weight: bold;
    width: auto;
    height: 20px;
    padding: 0px 0px;
    margin: 1px;
    text-align: center;
    cursor:pointer;
    border-color:#336;
}

input, textarea {
    padding: 1px;
    background-color:#FFF;
    border: inset 2px #600;
}

.blueform {    
    padding: 1px;
    background-color:#FFF;
    border: inset 2px #336;
}

/*Navigation Properties*/
#nav1 {  /* Main Nav Properties */
    border: 1px solid #306;
    background: #FFFFCC;
    font-family: arial,sans-serif;
    font-size: 10px;
}

#nav1 ul { /* Main Nav Unordered List Properties */
    display: block;
    margin: 0px;
    padding: 0px;
    font-family: arial,sans-serif;
    font-size: 10px;
}

#nav1 li { /* Main List Properties */
      behavior:  url(/scriptlibrary/iefixes.htc);
    display: block;
    list-style: inline;
    line-height: 1.5em;
    font-family: arial,sans-serif;
    font-size: 10px;
}

#nav1 li:hover, 
#nav1 li.hover { /* List Hover Properties */
    background: #CCCCFF;
    display: inline;
    border: 0;
}

#nav1 ul.sub1 { /* Nav Unordered List 'Sub1' Properties */
    position: absolute;
    border: 1px solid #330066;
    padding: 0px;
    background: #FFFFCC;
    margin: 0px 0px 0px -1px;
    width: 90px; /* MUST BE HERE FOR NS TO WORK*/
    display: none;
}

#nav1 ul.sub2 {  /* Nav Unordered List 'Sub2' Properties */
    position: absolute;
    border: 1px solid #330066;
    padding: 0px;
    background: #FFFFCC;
    margin: -16px 0px 0px 90px;
    width: 90px; /* MUST BE HERE FOR NS TO WORK*/
    display: none;
}

#nav1 ul.sub3 {  /* Nav Unordered List 'Sub3' Properties */
    position: absolute;
    border: 1px solid #330066;
    padding: 0px;
    background: #FFFFCC;
    margin: -16px 0px 0px 90px;
    width: 90px; /* MUST BE HERE FOR NS TO WORK */
    display: none;
}

#nav1 li>ul.sub1 {  /* Nav <LI> to <UL> 'Sub1' Properties */
    margin: 0em 0px 0px 0em;
} 

#nav1 li>ul.sub2 {  /* Nav <LI> to <UL> 'Sub2' Properties */
    margin: -1.5em 0px 0px 90px ; /* NS */
}

#nav1 li>ul.sub3 {  /* Nav <LI> to <UL> 'Sub3' Properties */
    margin: -1.5em 0px 0px 90px ; /* IE */
}

#nav1 ul.root li:hover ul.sub1, 
#nav1 ul.root li.hover ul.sub1 { 
    display: block;
    border: 0;
}

#nav1 ul.sub1 li:hover ul.sub2, 
#nav1 ul.sub1 li.hover ul.sub2 { 
    display: block;
    border: 0;
}

#nav1 ul.sub2 li:hover ul.sub3, 
#nav1 ul.sub2 li.hover ul.sub3 { 
    display: block;
    border: 0;
}

#nav1 a {  /* IE */
    color: #330066;
    text-decoration: none;
    line-height: 1.5em;
    display: block;
    width: 90px;
    height: auto;
    font-family: arial,sans-serif;
    font-size: 10px;
}

#nav1 a:hover,
#nav1 a.hover {
    color: #330066;
    background: #CCF;
    display: block;
    width: 90px;
    border: 0;
}

.hassub3 { 
    background: url('arrows.gif') no-repeat right center;
}

.htc Doc:

Code:

<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoHover()" />
<PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="RestoreHover()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="DoActive()" />
<PUBLIC:ATTACH EVENT="onmouseup"   ONEVENT="RestoreActive()" />
<script language="JScript">
function DoHover()
  { element.className += ' hover';
  }

function DoActive()
  { element.className += ' active';
  }

function RestoreHover()
  { element.className = element.className.replace(/\bhover\b/,'');
  }

function RestoreActive()
  { element.className = element.className.replace(/\bactive\b/,'');
  }
</script>

KWilliams