#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    2
    Rep Power
    0

    Text not visible in CSS drop menu IE8 ONLY


    Hi everyone,
    This is my first time posting about a css issue. Usually I find the answer I'm looking for with Google searches or find an alternative approach but this issue has been troubling me for far to long so I'll see what the power of the forums can do...

    I have attempted to use css ul li drop down menus with the following code. It works perfect in every browser except IE 8.0.
    I'm sure there is a workaround or someone has experienced this before. Please help!

    You can test it out http://bugg.selfip.com/canadianmixedcurling/

    It will work with every browser I tried except IE8

    If you don't use IE8 to try it, here is a screenshot.
    http://www.flickr.com/photos/6449462...in/photostream

    the black background was for troubleshooting. The font is a grey color that should appear on a white or black background but doesn't. The hyperlinks when clicking the text still works.

    relevant portion of css file
    Code:
    li {list-style-type:square; background:transparent; } 
     /***************************/
     .navigation {
     float:left;
     padding : 0px 0px 0px 20px;
     margin-left:0; 
     text-align:left;
     font-family:LeagueGothicRegular, Helvetica, Arial;
     color:#666;
     }
    .navigation h1 { margin-bottom:10px; position:relative; margin-top:26px; }
    .navigation ul {font-weight:normal; margin-left:0px; padding-bottom:0px; list-style:none; position:relative; top:0px; z-index:1000; }
    
    .navigation ul li {
    	float: left;
    	margin-right: 14px;
    	padding-bottom: 0px;
    	padding: 0px 0px;
    	position: relative;
    	display: block;
    	color: #666;
    	vertical-align: top;
    	text-decoration: none;
    	font-size: 100%;
    	line-height: 15px;
    	text-transform: capitalize;
    	background:#fff;
    }	
    
    	#tickets {
    	width: 70px;
    	height: 15px;
    }
    	#teams { width:55px; height:15px; }
    	#schedule_results { width:95px; height:30px; }
    	#media { width:60px; height:15px; }
    	#volunteers {
    	width: 105px;
    	height: 15px;
    }
    	#ottawa { width:65px; height:15px; }
    	#contact { width:70px; height:15px; }
    	#sponsors {
    	width: 90px;
    	height: 15px;
    }
    Navigation drop menus
    /* STYLING THE MENU-----------------------------------*//* 1st level */
    	.navigation ul li a {
    	display: block;
    }	
    	.navigation ul li > a {
    	color: #666;
    	display: block;
    }	
    	.navigation ul li:hover > a { color:#ce4044; display:block;}
    	.navigation ul li.current > a { color:#ce4044; }
    	.navigation ul li.current > a:hover { color:#ce4044; }
    /* 2nd level and above */
    		.navigation ul ul { border-radius: 0px; padding: 0; position: absolute; top: 100%;} 
    		.navigation ul li ul { float:none; 
    
    		color: #888;
    		min-width:170px;
    		position:absolute;
    		top:33px; 
    		  }
    		.navigation ul li ul li { width:100%; }
    		.navigation ul li ul li a { color:#888; background-color:#000;		
    		border-bottom: 1px dotted #ddd;
    		padding: 5px 0px 5px 0;
    		margin:6px 0 0 0; } 
    		.navigation ul li ul li:last-child a { border:0px; } 		
    		/* IE7 Fix */ 		
    		.navigation li:hover ul { display:block; color:#666;}
    Code:
     <div class="navigation">      
                     <h1>november 14 - 23, 2013</h1> 
                  <nav>      
                  <ul> 
                            <li id="tickets"><a href="tickets.php">TICKETS</a></li>
                            
                            <li  id="teams"><a href="">TEAMS</a>
                                <ul>
                           		    <li><a href="http://www.curling.ca/championships/mixed/competing-teams/">Profiles</a></li>
                                    <li><a href="">Email a team</a></li> 
                                </ul>
                            </li>
                            
                            
                            <li id="schedule_results" ><a href="">SCHEDULE & RESULTS</a>
                            	<ul>
                                    <li><a href="">Game schedule</a></li>
                                    <li><a href="">Game results</a></li>
                                    <li><a href="">Entertainment schedule</a></li>
                                </ul>
                            </li>                        
     						
                            <li id="media" ><a href="">MEDIA</a>
                            	<ul>
                                    <li><a href="">Photos</a></li>
                                    <li><a href="">Newsletter</a></li>
                                    <li><a href="">Articles</a></li>
                                </ul>
                            </li>
                            <li id="volunteers" ><a href="volunteer-form.php" target="_blank">VOLUNTEERS</a></li>
                            <li id="ottawa" ><a href="">OTTAWA</a>
                                 <ul>
                                    <li><a href="">Hotel</a></li>
                                     <li><a href="">Transportation</a></li>
                                     <li><a href="">Ottawa Tourism</a></li>
                                </ul></li>
                            <li id="contact" ><a href="">CONTACT</a>
                                <ul>
                                   <li><a href="">Rideau CC</a></li>
                                   <li><a href="">Committee</a></li>
                                   <li><a href="">Teams</a></li>
                              </ul></li>
                            <li id="sponsors"><a href="sponsors.php">SPONSORS</a>
                            </li>
                     </ul> 
                     </nav>     	                                                            	  	               
    	      </div>
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Welcome to DevShed Forums, abugg.

    Does the problem still happen when you disable Cufón? IE is known to have issues with it sometimes.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    2
    Rep Power
    0
    Originally Posted by Kravvitz
    Welcome to DevShed Forums, abugg.

    Does the problem still happen when you disable Cufón? IE is known to have issues with it sometimes.
    You were right! removed the Cufón scripts and now the text is showing up. Thank you!

    One thing that's weird is if I re-add the script, the font is visible for many page refreshes, then eventually it stops appearing.

    Thoughts?
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    18
    Rep Power
    0
    Originally Posted by abugg
    You were right! removed the Cufón scripts and now the text is showing up. Thank you!

    One thing that's weird is if I re-add the script, the font is visible for many page refreshes, then eventually it stops appearing.

    Thoughts?
    your best bet for hassle free ie8 fixes is to add a conditional .ie8 class to the entire html block. something like:

    Code:
    <!--[if IE 8]> <html class="ie8"> <![endif]-->


    then, go into your style.css file (or whatever you may have named your master css file) and target the master div of whichever area you're having problems with in ie8 only and apply the following css:

    Code:
    .ie8 .(yourdivhere) {filter:none !important;}


    ie8 sucks, and this takes away the pain of trying to manipulate your code for users still running such an obsolete/crappy browser

IMN logo majestic logo threadwatch logo seochat tools logo