Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old April 11th, 2006, 04:53 PM
Banned
Points: 1,561, Level: 16
Points: 1,561, Level: 16 Points: 1,561, Level: 16 Points: 1,561, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2005
Location: , , .
Posts: 317
Thanks: 0
Thanked 0 Times in 0 Posts
Default CSS2 :hover Problem in IE6

I've continued to have this problem with our old site, which is live until we get our new site out. Basically, our site loads fine in Firefox, but very slowly in IE6. I think it's because of an extra .hta file that exists to make the CSS popups with in IE. So now I'm trying to get rid of that file, and use the CSS :hover fix noted on several articles (Ex: http://www.tanfa.co.uk/css/articles/...popups-bug.asp and http://www.quirksmode.org/css/ie6_purecsspopups.html).

Here's what I have:

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

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

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;
    border: 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;
    border:none;
}
a.small:active {
    color: #306;
}

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

}

/* 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;
}

li.square {
    list-style-type: square;
    list-style-position:inside;
}

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*/
div#nav1 {  /* Main Nav Properties */
    border: 1px solid #306;
    background: #FFFFCC;
    font-family: arial,sans-serif;
    font-size: 10px;
}

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

div#nav1 li { /* Main List Properties */
    display: block;
    list-style: inline;
    line-height: 1.5em;
    font-family: arial,sans-serif;
    font-size: 10px;
}

div#nav1 li:hover, 
div#nav1 li.hover { /* List Hover Properties */
    background: #CCCCFF;
    display: inline;
    border-width:1px;
    text-decoration: none;
}

div#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;
}

div#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;
}

div#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;
}

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

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

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

div#nav1 ul.root li:hover ul.sub1, 
div#nav1 ul.root li.hover ul.sub1 { 
    display: block;
    border-width:1px;
    text-decoration: none;
}

div#nav1 ul.sub1 li:hover ul.sub2, 
div#nav1 ul.sub1 li.hover ul.sub2 { 
    display: block;
    border-width:1px;
    text-decoration: none;
}

div#nav1 ul.sub2 li:hover ul.sub3, 
div#nav1 ul.sub2 li.hover ul.sub3 { 
    display: block;
    border-width:1px;
    text-decoration: none;
}

div#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;
}

div#nav1 a:hover,
div#nav1 a.hover {
    color: #330066;
    background: #CCF;
    display: block;
    width: 90px;
    border-width:1px;
    text-decoration: none;
}

.hassub3 { 
    background: url('arrows.gif') no-repeat right center;
}
I've followed the instructions in both articles by adding text-decoration:none; and border:none; properties to all of the :hover properties, but it's still not working for me in IE6. So if anyone could let me know what I'm doing wrong, that would be great. Thanks for any help.

KWilliams

Last edited by kwilliams; December 23rd, 2008 at 01:43 PM..
Reply With Quote
  #2 (permalink)  
Old April 12th, 2006, 08:06 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

I don't see any difference between the two. They seem to take the same amount of time to load.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html
Reply With Quote
  #3 (permalink)  
Old April 12th, 2006, 08:09 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

BTW, if you're having problems with Explorer, sometimes it can be a cache issue. Documents get stuck in Explorer's cache all the time, clearing the cache often and refreshing repeatedly may cause your problem to go away.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html
Reply With Quote
  #4 (permalink)  
Old April 12th, 2006, 09:30 AM
Banned
Points: 1,561, Level: 16
Points: 1,561, Level: 16 Points: 1,561, Level: 16 Points: 1,561, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2005
Location: , , .
Posts: 317
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hi Rich,

Thanks for the replies. I've posted this problem in the past, and some users are able to load the page in both browsers with no problem. But a lot of users (including me) are having an extremely slow load time for this page in IE6.

I believe that I've come up with another possible solution. I think that the problem I was having with the .htc file was that it was located within the CSS stylesheet using the behavior: url method. I think that was loading the .htc file for each list-item in IE, like this:
div#nav1 li { /* Main List Properties */
behavior: url(/scriptlibrary/iefixes.htc);
...}
...which was causing the problem.

So I think that if I remove the .htc from the CSS file, and include it on the correct section of the HTML page, it will work properly in IE. I found an article (http://www.howtocreate.co.uk/tutorials/testMenu.html) that tells you to place the .htc file within the (X)HTML, but it's still not working for me in IE. If anyone has any advice on this idea, it would be greatly appreciated. Thanks.

KWilliams
Reply With Quote
  #5 (permalink)  
Old April 13th, 2006, 02:17 PM
Banned
Points: 1,561, Level: 16
Points: 1,561, Level: 16 Points: 1,561, Level: 16 Points: 1,561, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2005
Location: , , .
Posts: 317
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Ok, with the help of Fang on another forum (see http://www.webdeveloper.com/forum/sh...d.php?p=551558), I was able to come up with another solution. But I'm still running into one of the same problems. The arrow background image for the list-items that contain a sub-menu is not working properly in IE6, but it works fine in all other browsers. It basically reloads the arrows image each time a user hovers over the list-item that contains one. You can see this on a test page at http://www.douglas-county.com/suckertest.asp. You can view all of the code, including the CSS stylesheet, by viewing the source code.

If anyone knows of how/if I can get this to work, that would be great. Thanks.

KWilliams
Reply With Quote
  #6 (permalink)  
Old April 13th, 2006, 02:26 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

That's the infamous flicker bug: http://dean.edwards.name/my/flicker.html

HTH!

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html
Reply With Quote
  #7 (permalink)  
Old April 13th, 2006, 02:28 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

My IE only downloads the arrow pic once. Do you have your cache settings set to "Every visit to the page", perhaps?

--
http://yupapa.com
Reply With Quote
  #8 (permalink)  
Old April 13th, 2006, 02:28 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

Also, I've had to reboot machines in the past to get that fix to work. So, don't forget to clear IE's cache, close IE, reboot and then see if it worked.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html
Reply With Quote
  #9 (permalink)  
Old April 13th, 2006, 02:32 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

Quote:
quote:Originally posted by richard.york
 That's the infamous flicker bug: http://dean.edwards.name/my/flicker.html
You were quicker this time! :D

--
http://yupapa.com
Reply With Quote
  #10 (permalink)  
Old April 13th, 2006, 02:43 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

> You were quicker this time!


I just saw this bug yesterday. I beleive that the "Every visit to page" cache setting was the cause of that one, I switched it back to "Auto", plugged in the server changes, rebooted, and it was gone.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
IE6 Hover Bug - Causing containing DIV to collapse socoolbrewster CSS Cascading Style Sheets 0 August 1st, 2008 09:46 AM
IE6: Hover stops working on AJAX page sigilaea Ajax 0 March 17th, 2008 09:58 AM
problem with my menu in ie6 johnficca CSS Cascading Style Sheets 1 May 6th, 2007 07:41 PM
Front Page 98’s hover buttons problem...need help mIsS.cOlLy_cOoL Javascript 5 July 10th, 2006 12:35 AM
Having problem with hover buttons to function andyin Java Basics 0 July 9th, 2006 07:35 AM



All times are GMT -4. The time now is 12:32 AM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.