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

    Join Date
    Feb 2012
    Posts
    4
    Rep Power
    0

    IE compatibility issues (screenshot, html and css included)


    Hey guys, new member here looking for some guidance. I've had experience as a web developer at an amateur and college level, not professionally. A friend asked me to help his company with some website issues they are experiencing and I'm hoping you guys could help out.

    It's a website run on a Wordpress framework, it works fine in Firefox but different versions of Internet Explorer are causing trouble, most specifically to the navigation bar. I've attached a screenshot below.


    edit: looks like they won't allow me to include a link of my screenshot. It's available at
    http://tompa.100mbps.se/img/summary (dot) png


    It looks like the website was done with IE8 in mind but with the arrival of IE9 some issues have arrived. IE6 is a mess, I might try to salvage that but my first priority is to get the navbar to work as intended with IE7 and IE9.

    I'm obviously not asking you to go through all code attached but I'm hoping you guys have some general idea on what might be wrong.

    If you want to visit the website yourselves it's on www.las-jarn (dot) com

    Relevant HTML:
    Code:
    <div id="navbar">
    	<div class="navbarleft">
            <ul id="nav">
     		<li></li>
    		<li class="page_item page-item-2"><a href="http://www.las-jarn.se/nyheter/">Nyheter</a></li>
    		<li class="page_item page-item-123"><a href="http://www.las-jarn.se/om-las-jarn-2/">Om Låssmeden</a>
    			<ul class='children'>
    				<li class="page_item page-item-8"><a href="http://www.las-jarn.se/om-las-jarn-2/foretaget/">Företaget</a></li>
    				<li class="page_item page-item-199"><a href="http://www.las-jarn.se/om-las-jarn-2/dokument/">Dokument</a></li>
    				<li class="page_item page-item-37"><a href="http://www.las-jarn.se/om-las-jarn-2/personal/">Medarbetare</a></li>
    				<li class="page_item page-item-165"><a href="http://www.las-jarn.se/om-las-jarn-2/jobba-hos-oss/">Jobba hos oss</a></li>
    			</ul>
    		</li>
    		<li class="page_item page-item-83"><a href="http://www.las-jarn.se/partners/">Partners</a></li>
    		<li class="page_item page-item-39"><a href="http://www.las-jarn.se/kontakt/">Kontakt</a></li>   
    	</ul>
    	</div>  
    </div>
    (Mostly) Relevant CSS:
    Code:
    #navbar {
    	background: #1a1a1a;
    	width: 960px;
    	height: 35px;
    	font-size: 10px;
    	font-family: Arial, Tahoma, Verdana;
    	color: #FFFFFF;
    	font-weight: bold;
    	margin: 113px auto 0px;
    	padding: 0px;
    	}
    	
    .navbarleft {
    	width: 900px;
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	margin-left: 20px;
    	margin-top: 0px;
    	}
    	
    .navbarright {
    	width: 260px;
    	height: 20px;
    	float: right;
    	margin: 0px;
    	padding: 1px 13px 0px 0px;
    	text-align: right;
    	display: hidden;
    	}
    	
    .navbarright a, .navbarright a:visited {
    	color: #FFFFFF;
    	font-size: 10px;
    	font-family: Arial, Tahoma, Verdana;
    	font-weight: bold;
    	text-transform: uppercase;
    	text-decoration: none;
    	}
    	
    .navbarright a:hover {
    	color: #FFFFFF;
    	text-decoration: underline;
    	}
    	
    #nav {
    	margin: 0px;
    	padding: 0px;
    	}
    	
    #nav ul {
    	float: left;
    	list-style: none;
    	margin: 0px;
    	padding: 0px;
    	}
    	
    #nav li {
    	float: left;
    	list-style: none;
    	margin: 0px;
    	padding: 0px;
    	}
    	
    #nav li a, #nav li a:link, #nav li a:visited {
    	color: #fff;
    	font-size: 13px;
    	display: block;
    	font-weight: normal;
        margin: 0px;
    	padding: 10px 15px 12px 15px;
    	text-decoration: none;
    
    	
    	}
    
    #nav li a:hover, #nav li a:active {
    	/* background: #000000 url(images/navhov.gif); */
    	color: #FFFFFF;
    	
    	}
    	
    
    	
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    	width: 110px;
    	background: #565656;
    	color: #FFFFFF;
    	float: none;
    	margin: 0px;
    	padding: 7px 10px 7px 10px;
    	z-index: 3000;
    	/*
    border-bottom: 1px solid #545454;
    	border-left: 1px solid #545454;
    	border-right: 1px solid #545454;
    */
    	}
    	
    #nav li li a:hover, #nav li li a:active {
    	background: #2d2d2d;
    	color: #FFFFFF;
    	padding: 7px 10px 7px 10px;
    	z-index: 200;
    	}
    /* IF safari */
    #nav li ul {
    	z-index: 9999;
    	position: absolute;
    	left: -999em;
    	height: auto;
    	width: 190px;
    	padding: 2px;
    	margin-top:-12px ;
    	}
    /* IF firefox */	
    .gecko #nav li ul {
    	z-index: 9999;
    	position: absolute;
    	left: -999em;
    	height: auto;
    	width: 190px;
    	padding: 2px;
    	margin-top:-20px ;
    	
    	}
    /* IF ie7 */	
    .ie7 #nav li ul {
    	z-index: 9999;
    	position: absolute;
    	left: -999em;
    	height: auto;
    	width: 190px;
    	padding: 2px;
    	margin-top:-7px ;
    	
    	}
    
    /* IF ie7 */	
    .opera #nav li ul {
    	z-index: 9999;
    	position: absolute;
    	left: -999em;
    	height: auto;
    	width: 190px;
    	padding: 2px;
    	margin-top:-2px ;
    	
    	}
    
    #nav li li {
    
    
    }
    #nav li ul a { 
    	width: 160px;
    	}
    
    #nav li ul a:hover, #nav li ul a:active { 
    	}
    
    #nav li ul ul {
    	margin: 0px 0 0 191px;
    	}
    
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    	left: -999em;
    	}
    
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    	left: auto;
    	}
    
    #nav li:hover, #nav li.sfhover { 
    	position: static;
    	}
    	
    #nav .current_page_item a {
    	/* background: #000000 url(images/navhov.gif); */
    	color: #d41536;
    	}
    Any help is greatly appreciated. Thanks!
  2. #2
  3. The Queen of Typos
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2004
    Location
    Treasure Coast
    Posts
    1,471
    Rep Power
    195
    I would try this:

    Set position: relative on #header_900 and then on #navbar

    Code:
    #navbar {
    	background: #1a1a1a;
    	width: 960px;
    	height: 35px;
    	font-size: 10px;
    	font-family: Arial, Tahoma, Verdana;
    	color: #FFFFFF;
    	font-weight: bold;
    	position: absolute;
    	bottom: 0;	
    }
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2012
    Posts
    4
    Rep Power
    0
    You Sir, are a gentleman and a scholar for taking your time to help.

    The changes did not fix the issues I have with IE9, that's because I figured out what was causing the problems. It's the cufón widget, meant to render different kinds of fonts, that's apparently not working in IE9. I should have figured it out way sooner since other headers weren't being displayed either.

    Once I get that sorted I'll have a close look at your suggestion, maybe it will sort out some issues with the older versions.

    Thanks again, I will probably get back once I sort this cufón business out
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, BigBrown.
    [...] I figured out what was causing the problems. It's the cufón widget, meant to render different kinds of fonts, that's apparently not working in IE9.
    I can't seem to access your web site to check what version you're using, but you might find this thread helpful.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

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

    Join Date
    Feb 2012
    Posts
    4
    Rep Power
    0
    Cheers. Fixing the cufón thing was as simple as downloading the latest version (which is IE9 compliant) and replacing the old javacsript file on the webserver.
  10. #6
  11. The Queen of Typos
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2004
    Location
    Treasure Coast
    Posts
    1,471
    Rep Power
    195
    Awesome, glad you got it working!

IMN logo majestic logo threadwatch logo seochat tools logo