kwilliams Posted December 13, 2005 Share Posted December 13, 2005 (edited) 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 December 13, 2005 by Skemcin Link to comment Share on other sites More sharing options...
aspnetguy Posted December 13, 2005 Share Posted December 13, 2005 It loaded the same in IE6 and FF on my machine.Have you tested this on multiple machines?? It may be an isolated case. Link to comment Share on other sites More sharing options...
kwilliams Posted December 13, 2005 Author Share Posted December 13, 2005 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 More sharing options...
Skemcin Posted December 13, 2005 Share Posted December 13, 2005 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 More sharing options...
kwilliams Posted December 14, 2005 Author Share Posted December 14, 2005 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 More sharing options...
playmenow Posted December 26, 2005 Share Posted December 26, 2005 I have a bigger problem: My site doesn't show on IE. Just the menu & header are almost fine. http://www.playmenow.tk. Any ways to repair? I won't go back to XHTML 1.0 Transitional just because IE sucks. Link to comment Share on other sites More sharing options...
therich Posted January 1, 2006 Share Posted January 1, 2006 @ kwilliamsJust thought I'd let you know that it works fine on my IE browser. Goodluck. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now