?
Solved

How to fix IE6 Duplicate Content CSS Bug without using display:inline

Posted on 2010-01-12
10
Medium Priority
?
1,094 Views
Last Modified: 2013-12-08
The code I have is doubling content in IE6.  The reason is found here http://www.positioniseverything.net/explorer/dup-characters.html, and is because I am using display:block; and  display:hidden.    The solutions I find say to change any reference to display:block to display:inline.  My code is for a left navigation, and when moused over the content highlights, I need it to display block so that the text is highlighted as a block.  There are 3 levels,   NonGroup which means it is just a navigation item with no sub level links,  Group which means that is a navigation item that has sub level link that it will need to show when clicked, and Option which is the sub level links under Group.     There also is a javascript file that changes the class of the div to show or hide the options.  

My question is:  Is there a way to fix this bug other than changing my code to Display:inline?
I've included the code below:

CSS Code
---------------      
                .show {
            display:inline;
      }
      .hide {
            display:none;
      }
                .NonGroup {
            display: block;
            height: 100%;
            width: 155px;
            line-height: 18px;
            padding-left: 7px;
            padding-bottom:10px;
            text-decoration: none;
            font-weight:bold;
      }
            .NonGroup:hover {
                  text-decoration: none;
                  background-image:url(images/Design/highlight.GIF);
            }
      .Group {
            display: block;
            height: 100%;
            width: 155px;
            line-height: 18px;
            padding-left: 7px;
            padding-bottom:10px;
            text-decoration: none;
            font-weight:bold;
      }
            .Group:hover {
                  text-decoration: none;
                  background-image:url(images/Design/highlight.GIF);
            }
      .Option {
            display: block;
            height: 100%;
            width: 155px;
            line-height: 18px;
            padding-left: 7px;
            padding-bottom:10px;
            text-decoration: none;
            z-index:9999;      
      }
            .Option:hover {
                  background-image:url(images/Design/highlight.GIF);
                  text-decoration: none;
                  z-index:9999;
            }
HTML Code
----------------
  <a href="PublicReports.html" class="NonGroup" id="Public Reports">Public Reports</a>

  <a href="KeepingYouHealthy/default.html" onClick="expandCollapse('Keeping You Healthy')" class="Group" id="Keeping You Healthy">Keeping You Healthy</a>
        <div class="hide" id="Keeping You HealthySubs">
             <a href="GeneralHealthResources.html" class="Option" id="General Health Resources">General Health Resources</a>
              <a href="Prevention.html" class="Option" id="Prevention">Prevention</a>  
              <a href="ManagingYourHealth.html" class="Option" id="Managing Your Health">Managing Your Health</a>    
        </div>

JavaScript
---------------
function expandCollapse (navLevel) {
/*event fires when a group with sublevels is clicked, it either collapses or expands the clicked group*/

      //hide any expanded nav
            hideNav();

      //Now show the new nav level
            var subnavLevel = navLevel + "Subs" //Subs is added so that it expands the sub level and not the item sent
            var selectedNavLevel = document.getElementById(subnavLevel);
            

            if (selectedNavLevel.className=="hide") {
                  selectedNavLevel.className="show";
                  //Set expandCookie
                  createCookie('pwhExpandCookie', navLevel ,0);
            }      
      }
function hideNav(){
      //check to see if there currently is an expanded nav item and collapse it
            var expandedCookieName= readCookie('pwhExpandCookie');
            var navExpanded = document.getElementById(expandedCookieName +"Subs");
            if (navExpanded) {      
                  navExpanded.className="hide";
                  eraseCookie('pwhExpandCookie');
            }
}
   
0
Comment
Question by:jamiemz14
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
10 Comments
 
LVL 4

Expert Comment

by:ruidovisual
ID: 26305242
I haven't read the whole code but you might try with: display:inline-block;
0
 

Author Comment

by:jamiemz14
ID: 26305376
I just tested your suggestion and changed all of the blocks to inline-block, but I'm still getting the same results.  Thanks for the idea, though!
0
 
LVL 4

Expert Comment

by:ruidovisual
ID: 26305434
Can you post a link? it would ease things for me : )
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:jamiemz14
ID: 26305816
I can't provide a link due to security, but I can provide you with a file with the code functioning.  Change the txt file to an html file, and it will show you a general idea of how the navigation will work.  If you view it in IE6, you will see when mousing over the items up and down that the content duplicates and displays improperly.
IE6Bug.txt
0
 
LVL 4

Assisted Solution

by:ruidovisual
ruidovisual earned 400 total points
ID: 26316790
Hi Jami. Well, i have the code in here, i tested it in IE6 and I can't see any element duplicated or any wrong behavior

 :S
0
 
LVL 18

Expert Comment

by:bruno
ID: 26329304
sorry, i have not actually tested your code to see the issue, but have you tried applying hasLayout as the article suggests?
0
 

Author Comment

by:jamiemz14
ID: 26332294
ruidovisual: That's odd that it's not duplicating in IE6 for you, I've had multiple people test this on different machines with the same results - maybe it's because the image background isn't there?  I attached that for you here, if you wanted to add it.  It sometimes takes a few mouseovers up and down to get it to appear.
highlight.GIF
0
 

Author Comment

by:jamiemz14
ID: 26332315
brunobear: I'm not exactly understanding how to apply hasLayout - from what I read one way is to just need to make sure that each of the elements has a width assigned to it in the CSS?  I went thru and did added a width: to each one of the CSS styles for my divs and it didn't seem to make a difference.  If that's the wrong way to implement, let me know, I'd be glad to try it! - Thanks!
0
 
LVL 18

Expert Comment

by:bruno
ID: 26335436
There are other ways to implement it without needing to apply a width, but applying the width should have the same effect of setting hasLayout. setting hasLayout using fixes a lot of IE problems, so just wanted to confirm it had been tested.
0
 

Accepted Solution

by:
jamiemz14 earned 0 total points
ID: 26429789
I somewhat resolved - turns out it had to do with the background image on the mouseover.  I added the below IE6 hack to my CSS - and removed the background image on my hover (so my left navigation will not highlight at this time in IE6, but I will revisit that later to try to fix.  Thanks for testing this!
/*\*/ * html { 
  filter: expression(document.execCommand("BackgroundImageCache", false, true)); } /**/ 


/*I also added this code to each one of my hover classes, to remove the background image if IE6 (the underscore is the hack)*/

_background-image:none; /*IE6 and below hack to remove hover*/

Open in new window

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article discusses how to implement server side field validation and display customized error messages to the client.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question