Jump to content

CSS Loads Slowly in IE 6.0/Fine in Firefox


kwilliams

Recommended Posts

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/, and the CSS code is posted below. 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.CSS 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>

[edit]changed code to codebox to preserver space - skemcin

Edited by Skemcin
Link to comment
Share on other sites

Yes I have. On some machines, it loads ok in IE. But on others it loads extremely slowly, including my own. To test this out, I removed the CSS rollovers from the home page on a test page, and it did load much more quickly in IE 6.0. So that's why I think this is at least a major part of the problem.

Link to comment
Share on other sites

I've tried similar nested div menus and ran into issues with IE. I was never able to resolve them so I've found and used other code:CSS

<style type="text/css">/* *********************************** *//* site default stylesheet definitions *//* *********************************** */P.chapters {	margin: 7px 7px 7px 7px;	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;	font-size: 10px;	background-color: white;	color: black;	background-image: url(../_images/backgroundpattern.gif);	text-align:left;}TABLE.chapters,TD.chapters,TH.chapters  {	margin: 0px 0px 0px 0px;	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;	font-size: 10px;	background-color: white;	color: black;}/* ******************************** *//* menu item stylesheet definitions *//* ******************************** */td.button {	color: #333399;	background-color: #EEEEEE;	border: 1px solid #333399;	margin: 0px 0px 0px 0px;	padding: 5px;	font-weight: bold;}p.button {	font-size: 10px;	color: #333399;	background-color: #EEEEEE;	border: 0px solid #333399;	margin: 0px 0px 0px 0px;	padding: 5px;	font-weight: bold;	display: block;}div.exp {	width:100%;	margin: 0px 0px 0px 0px;	padding: 0px 0px 0px 0px;	font-weight: normal;	background-color: #FFFFFF;	border: 1px solid #333399;}a.menuitem:link {	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;	text-decoration: none;	color: #333399;	display: block;}a.menuitem:visited {	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;	text-decoration: none;	color: #333399;	display: block;}a.menuitem:hover {	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;	text-decoration: none;	color: #FFFFFF;	background-color:#333399;	display: block;}a.menuitem:active {	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;	text-decoration: none;	color: #333399;	display: block;}a.submenuitem:link {	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;	text-decoration: none;	color: #333399;	display: block;	position:relative;	top:-10px;}</style><script language="JavaScript" type="text/javascript"><!-- // ******************************************** //// define the parent navigation image drop down //// ******************************************** //function expand(s, m){  var myWidth = 0, myHeight = 0;  if( typeof( window.innerWidth ) == 'number' ) {    //Non-IE    myWidth = window.innerWidth;    myHeight = window.innerHeight;  } else if( document.documentElement &&      ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {    //IE 6+ in 'standards compliant mode'    myWidth = document.documentElement.clientWidth;    myHeight = document.documentElement.clientHeight;  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {    //IE 4 compatible    myWidth = document.body.clientWidth;    myHeight = document.body.clientHeight;  }   var browser = window.navigator.appName;   var dif = 0;   var sideMargin = 0;   var topMargin = 180;   if (browser == "Microsoft Internet Explorer") {   		sideMargin =  ((myWidth - 570) / 2) + 65;		}		else {   		sideMargin = ((myWidth - 570) / 2) + 57;		}   if (browser == "Microsoft Internet Explorer") {   		topMargin = topMargin + 35;		}		else {   		topMargin = topMargin + 25;		}   var d = document.getElementById(m);   var td = document.getElementById(s);   var left = td.offsetLeft + sideMargin;   var top = td.offsetTop + topMargin;   var width = td.offsetWidth - dif;   td.style.color = "#FFFFFF";   td.style.backgroundColor = "#333399";   d.style.top = top + "px";   d.style.left = left + "px";   d.style.width = width + "px";   d.style.position = "absolute";   d.style.visibility = "visible";   d.style.display = "inline";}function collapse(s, m){   var d = document.getElementById(m);   var td = document.getElementById(s);   td.style.color = "#333399";   td.style.backgroundColor = "#EEEEEE";   d.style.position = "static";   d.style.visibility = "hidden";   d.style.display = "none";}function collapseAll(){   var menuDiv = document.getElementById("menu");   var divs = menuDiv.getElementsByTagName("div");   var div;   for (i = 0; i < divs.length; i++)   {      div = divs[i];      div.style.visibility = "hidden";      div.style.display = "none";   }} --></script>

and HTML:

<table border="0" width="160" align="center" class="chapters"><tr><td width="160" class="button" id="item1" onmouseover="expand(this.id, 'menu1');" onmouseout="collapse(this.id, 'menu1');" valign="middle"> General Chapter Info<br /><div id="menu1" class="exp" onmouseout="collapse('item1', this.id);" style="display:none;"> <p class="button"><a href="xxxxxx.xxx" class="menuitem">Chapter Contact List</a></p><p class="button"><a href="xxxxxx.xxx" class="menuitem">Chapter Web Sites</a></p><p class="button"><a href="xxxxxx.xxx" class="menuitem">Officer Rosters</a></p><p class="button"><a href="xxxxxx.xxx" class="menuitem">Meeting Calendar</a></p><p class="button"><a href="xxxxxx.xxx" class="menuitem">Chapter Profiles</a></p><p class="button"><a href="xxxxxx.xxx" class="menuitem">Profile Summary</a></p><p class="button"><a href="xxxxxx.xxx" class="menuitem">Fact Sheets</a></p><p class="button"><a href="xxxxxx.xxx" class="menuitem">Chapter/District List </a></p><p class="button"><a href="exxxxxx.xxx" class="menuitem">ED Profiles</a></p><p class="button"><a href="xxxxxx.xxx" class="menuitem">Chapters by Size</a></p></div></td></tr></table>

not ideal, but it worked and meets the requirement that a user can edit this is in a WYSIWYG(links removed to protect the innocent):)

Link to comment
Share on other sites

Thanks for the info Skemcin. I may be forced to use JavaScript if I can't find a solution to this. But I'm trying to stay away from JS after some bad previous experience.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:

/*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:

<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>

Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...