Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 08-18-2010, 09:28 AM
heliosphan heliosphan is offline
Member
 
Join Date: 03-21-08
Posts: 36
iTrader: 0 / 0%
IE8 CSS Error

My top navigation is not behaving properly in IE8. Looks fine in IE7.

https://dr4lnb.4lnb.com/lnb_new/index.asp

Nav code:
HTML Code:
<div id="globalNav"> <ul> <li><a href="https://dr4lnb.4lnb.com/lnb_new/index.asp">Home<!--[if gte IE 7]><!--></a><!--<![endif]--> </li> <li class="sep">|</li> <li><a class="drop" href="https://dr4lnb.4lnb.com/lnb_new/about/default.asp">About LNB<!--[if gte IE 7]><!--></a><!--<![endif]--> <ul> <li><a href="https://dr4lnb.4lnb.com/lnb_new/invrelations/bancorp/invpr.asp">News</a></li> <li><a href="https://dr4lnb.4lnb.com/lnb_new/about/default.asp">Quick Facts</a></li> <li><a href="https://dr4lnb.4lnb.com/lnb_new/about/contact.asp">Contact Us</a></li> <li><a href="https://dr4lnb.4lnb.com/lnb_new/about/locations.asp">Locations</a></li> <li><a href="https://dr4lnb.4lnb.com/lnb_new/about/employment.asp">Employment</a></li> <li><a href="https://dr4lnb.4lnb.com/lnb_new/about/links.asp">Links</a></li> </ul> </li> <li class="sep">|</li> <li><a href="https://dr4lnb.4lnb.com/lnb_new/investments/default.asp">Investment Services</a><!--[if gte IE 7]><!--></a><!--<![endif]--> </li> <li class="sep">|</li> <li><a href="https://dr4lnb.4lnb.com/lnb_new/trust/default.asp">Trust</a></li> <li class="sep">|</li> <li><a class="drop" href="https://dr4lnb.4lnb.com/lnb_new/invrelations/default.asp">Investor Relations<!--[if gte IE 7]><!--></a><!--<![endif]--> <ul> <li><a class="test" href="https://dr4lnb.4lnb.com/lnb_new/invrelations/default.asp">LNB Bancorp</a> <ul> <li><a href="https://dr4lnb.4lnb.com/lnb_new/invrelations/bancorp/invar.asp">Annual Report</a></li> <li><a href="https://dr4lnb.4lnb.com/lnb_new/invrelations/bancorp/invcg.asp">Corporate Governance</a></li> <li><a href="https://dr4lnb.4lnb.com/lnb_new/invrelations/bancorp/invcp.asp">Corporate Profile</a></li> <li><a href="https://dr4lnb.4lnb.com/lnb_new/invrelations/bancorp/invdiv.asp">Dividends</a></li> <li><a href="https://dr4lnb.4lnb.com/lnb_new/invrelations/bancorp/invfund.asp">Fundamentals</a></li> <li><a href="https://dr4lnb.4lnb.com/lnb_new/invrelations/bancorp/inviq.asp">Investor Questionnaire</a></li> <li><a href="https://dr4lnb.4lnb.com/lnb_new/invrelations/bancorp/invlnbbd.asp">LNBB Direct</a></li> <li><a href="https://dr4lnb.4lnb.com/lnb_new/invrelations/bancorp/invpr.asp">Press Releases</a></li> <li><a href="https://dr4lnb.4lnb.com/lnb_new/invrelations/bancorp/invqr.asp">Quarterly Reports</a></li> <li><a href="https://dr4lnb.4lnb.com/lnb_new/invrelations/bancorp/invsec.asp">SEC Filings</a></li> <li><a href="https://dr4lnb.4lnb.com/lnb_new/invrelations/bancorp/invsec16.asp">SEC Section 16 Filing</a></li> <li><a href="https://dr4lnb.4lnb.com/lnb_new/invrelations/bancorp/invtrans.asp">Transfer Agent</a></li> <li><a href="https://dr4lnb.4lnb.com/lnb_new/invrelations/bancorp/invsc.asp">Stock Chart</a></li> </ul> </li> <li><a href="https://dr4lnb.4lnb.com/lnb_new/invrelations/stockqt.asp">Stock Quotes</a></li> </ul> </li> <li class="sep">|</li> <li><a href="https://dr4lnb.4lnb.com/lnb_new/about/contact.asp">Contact Us</a></li> </ul> </li> </ul> </div>

CSS:

HTML Code:
/*Drop Down Menu */ #globalNav {color:#666;margin:0;padding:0;position:absolute;top:20px;width:800px;z-index:5001;} /* hack to correct IE5.5 faulty box model */ #globalNav * html .menu {width:746px; w\idth:745px;} /* remove all the bullets, borders and padding from the default list styling */ #globalNav ul {padding:0;margin:0;list-style-type:none;} #globalNav ul ul {width:149px;background-color: #fff;} /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */ #globalNav li {float:left;width:auto;position:relative;padding:0 10px 0 15px;} #globalNav li li {float:left;width:auto;position:relative;padding:0 0 0 0;margin:0 0 0 0;;background-color: #fff;} #globalNav li li li{float:left;width:auto;position:relative;padding:0 0 0 5px;;background-color: #fff;} /* style the links for the top level */ #globalNav a {display:block;font-size:12px; text-decoration:none; color:#666; width:auto; height:30px; border:0; line-height:29px; } /* a hack so that IE5.5 faulty box model is corrected */ #globalNav * html .menu a, * html .menu a:visited {width:120px; w\idth:138px;} /* style the second level background */ #globalNav ul li a.drop { background-image:url(https://dr4lnb.4lnb.com/lnb_new/images/down.jpg); background-position: right center; background-repeat:no-repeat;padding:0 20px 0 0;} /* style the second level hover */ #globalNav ul li a.drop:hover{url(https://dr4lnb.4lnb.com/lnb_new/images/right.gif) no-repeat 130px center;} #globalNav ul ul :hover > a.drop { url(https://dr4lnb.4lnb.com/lnb_new/images/right.gif) no-repeat 130px center;} /* style the third level background */ #globalNav ul ul ul a.test {color:#666;padding:0 20px 0 0;} /* style the third level hover */ #globalNav ul:hover ul:hover ul li a.test:hover{url(https://dr4lnb.4lnb.com/lnb_new/images/right.gif) no-repeat 130px center;} #globalNav ul ul ul :hover > a.test { url(https://dr4lnb.4lnb.com/lnb_new/images/right.gif) no-repeat 130px center;} /* hide the sub levels and give them a positon absolute so that they take up no room */ #globalNav ul ul {visibility:hidden; position:absolute;height:0;top:25px;left:0; width:140px;} /* another hack for IE5.5 */ #globalNav * html .menu ul ul {top:24px;t\op:25px;} /* position the third level flyout menu */ #globalNav ul ul ul{left:140px; top:-1px; width:140px;} /* position the third level flyout menu for a left flyout */ #globalNav ul ul ul.left {left:-140px;} /* style the table so that it takes no ppart in the layout - required for IE to work */ #globalNav table {position:absolute; top:0; left:0; border-collapse:collapse;;} /* style the second level links */ #globalNav ul ul a { color:#666; height:auto; line-height:1em; padding:5px 0 5px 15px; width:128px;border-width:0 1px 1px 1px;margin:0;} /* yet another hack for IE5.5 */ #globalNav * html .menu ul ul a {width:141px;w\idth:128px;} /* make the second level visible when hover on first level list OR link */ #globalNav ul li:hover ul, #globalNav ul a:hover ul{visibility:visible;} #globalNav ul:hover ul li a:hover{background-color: #0466af; color:#fff;} /* keep the third level hidden when you hover on first level list OR link */ #globalNav ul:hover ul ul{visibility:hidden;} #globalNav ul:hover ul ul li:hover{background-color: #0466af; color:#fff;} #globalNav ul ul ul a { line-height:1em; padding:5px 0 5px 0; width:140px;border-width:0 1px 1px 1px;} /* make the third level visible when you hover over second level list OR link */ #globalNav ul:hover ul:hover ul{ visibility:visible;} #globalNav ul li.sep{color:#666;margin:0;padding:.8em 0;font-size:80%;}
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 08-18-2010, 10:03 AM
csm's Avatar
csm csm is offline
v7n Mentor
 
Join Date: 12-18-09
Location: Rostock, Germany
Posts: 532
iTrader: 0 / 0%
Code is xhtml invalid anyway:

http://validator.w3.org/check?uri=ht...Inline&group=0

Why you close the a tags with a conditional comment?

There is a JS error in IE8.
 
Reply With Quote
  #3  
Old 08-18-2010, 10:06 AM
csm's Avatar
csm csm is offline
v7n Mentor
 
Join Date: 12-18-09
Location: Rostock, Germany
Posts: 532
iTrader: 0 / 0%
I would try
Code:
$(document).ready(function() {
in line 15 instead of

Code:
jQuery(document).ready(function() {
That's your error. It is not an error of your navigation (at least not for me), it is a simple JS error.
 
Reply With Quote
  #4  
Old 08-18-2010, 10:13 AM
Vittorio Vittorio is offline
Junior Member
 
Join Date: 08-18-10
Posts: 2
iTrader: 0 / 0%
check line 17 ... use "jQuery" instead of "$".

remember u are using jquery min ... that means that $ is not valid.
 
Reply With Quote
  #5  
Old 08-18-2010, 10:15 AM
csm's Avatar
csm csm is offline
v7n Mentor
 
Join Date: 12-18-09
Location: Rostock, Germany
Posts: 532
iTrader: 0 / 0%
Ofcourse $ is valid...

You just need to use $(document)... at the beginning.

LOL, not valid ROFL

If $ would not be valid the whole script won't work in FF, Chrome...
 
Reply With Quote
  #6  
Old 08-18-2010, 10:19 AM
Vittorio Vittorio is offline
Junior Member
 
Join Date: 08-18-10
Posts: 2
iTrader: 0 / 0%
yeah .. u are right ... ... well ... this class "slideFloat" need overflow: hidden...
 
Reply With Quote
  #7  
Old 08-21-2010, 07:39 PM
haleyonline's Avatar
haleyonline haleyonline is offline
Junior Member
 
Join Date: 08-21-10
Posts: 1
iTrader: 0 / 0%
Thanks
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
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 On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Outlook Error: Messaging interface has received an unknown error Dani_938 Tech Talk 2 04-28-2011 03:12 AM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 02:15 PM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC