Internet Explorer Display/Drop Down Menu Issues

[bksbeat]

This is my 3rd post now on this matter but I am determined not to give up and hopefully someone out there can help me.

 

My site is www.nontando.com

 

A few weeks ago we redesigned our site, which included quite alot of changes to css to accomodate the redesign. I will include the css file.

 

Basically my issues lie with only Internet Explorer when viewing my site (all other browsers seem to be working fine).

Two issues (best way to see them is compare IE view and another browser view of my site as per what I am describing below:

 

1. The drop down menu from my top (in red) category menu and right (in grey) category menu are not been displayed at all in IE. For example, if you put your mouse over "Wire Product" category, 3 sub categories should appear. This applies to both the top (red) and right (grey) menu.

 

2. More concerning to me is this issue. I probably could live with the drop downs not working in IE.

The spacing of the right (grey) category menu is all screwed up and as you can see in IE 8 (what I am using) is overlapping into the image below. The way it is displayed, in say Chrome or Firefox, is the way it should be.

 

These category menus were part of the redesign.

I am really hoping to resolve this.....

 

Please do not hesitate to ask me for any info/doc you may require.

Thks so much, Gary

 

/*
$Id: stylesheet.css,v 1.56 2003/06/30 20:04:02 hpdl Exp $
osCommerce, Open Source E-Commerce Solutions
http://www.oscommerce.com
Copyright (c) 2003 osCommerce
Released under the GNU General Public License
*/
.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 10px; background: #ff0000; font-weight: bold; }
.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #cc0033; }
.productsNotifications { background: #f2fff7; }
.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #70d250; text-decoration: underline; }

/* BODY {
background: #d71c00;
color: #000000;
margin: 0px;
padding:0px;
text-align: center;
}
*/
#centrepage{
width: 1010px;
background: #1C1C10;
margin: 20px auto 0px auto;
text-align: center;
}

/*
A {
color: #000066;
text-decoration: none;
}
A:hover {
color: #CC3300;
text-decoration: underline;
}
*/
hr.{color: #00A5EA;}
FORM {
display: inline;
}
TR.header {
background: #FFFFFF;
}
TR.headerNavigation {
background: #FFFFFF;
}
TD.headerNavigation {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
padding-top: 10px;
padding-bottom: 10px;
background: #d71c00;
background-image: url('');
color: #ffffff;
font-weight : bold;
}
A.headerNavigation {
color: #FFFFFF;
}
A.headerNavigation:hover {
color: #0a011d;
}
TR.headerError {
background: #ff0000;
}
TD.headerError {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
background: #ff0000;
color: #ffffff;
font-weight : bold;
text-align : center;
}
TR.headerInfo {
background: #00ff00;
}
TD.headerInfo {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
background: #00ff00;
color: #ffffff;
font-weight: bold;
text-align: center;
}
TR.footer {
background: #d71c00;
}
TD.footer {
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
padding-top: 10px;
padding-bottom: 5px;
background: #d71c00;
background-image: url('');
color: #ffffff;
font-weight: bold;
}
.infoBox {
background: #d71c00;
background-image: url('');

}
.infoBoxContents {
background: #1C1C10;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;

}
.infoBoxNotice {
background: #00A5EA;
}
.infoBoxNoticeContents {
background: #d71c00;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
.ImageBorder
{
border-width: 1px;
border-color: Black;
}

TD.infoBoxHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
background: #d71c00;
background-image: url('');
color: #ffffff;
}
TD.infoBox, SPAN.infoBox {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
background: #1C1C10;
}
TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
background: #1C1C10;
}
TABLE.productListing {
border: 1px;
border-style: solid;
border-color: #b6b7cb;
border-spacing: 1px;
}
.productListing-heading {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
background: #cf0021;
color: #FFFFFF;
font-weight: bold;
}
TD.productListing-data {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}
A.pageResults {
color: #F87700;
}
A.pageResults:hover {
color: #F87700;
background: #1C1C10;
}
TD.pageHeading, DIV.pageHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
color: #F77601;
}
TR.subBar {
background: #f4f7fd;
}
TD.subBar {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #000000;
}
TD.main, P.main {
width: 800px;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
line-height: 1.5;
}
TD.smallText, SPAN.smallText, P.smallText {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #fff;
}

TD.accountCategory {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
color: #aabbdd;
}
TD.fieldKey {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
TD.fieldValue {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}
TD.tableHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
SPAN.newItemInCart {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #ff0000;
}
/* CHECKBOX, INPUT, RADIO, SELECT {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}
TEXTAREA {
width: 100%;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
}
*/
SPAN.greetUser {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
color: #f0a480;
font-weight: bold;
}
TABLE.formArea {
background: #f1f9fe;
border-color: #7b9ebd;
border-style: solid;
border-width: 1px;
}
TD.formAreaTitle {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
SPAN.markProductOutOfStock {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
color: #c76170;
font-weight: bold;
}
SPAN.productSpecialPrice {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
}
SPAN.errorText {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
}
.moduleRow { }
.moduleRowOver { background-color: #D7E9F7; cursor: pointer; cursor: hand; }
.moduleRowSelected { background-color: #E9F4FC; }
.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }
/* message box */
.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ff0000; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }
/* input requirement */
.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }
#breadcrumb {padding: 0; margin: 0; }
#breadcrumb li { display:inline; }
body{ width:100%; font-family:Arial, Helvetica, sans-serif; color:#fff; margin:0px; padding:0px; font-size:12px; background-color:#1c1c10;}
.main{ width:990px;background-color:#1c1c10; padding:20px 10px 10px 10px; margin:0px;}
.topa {font-size:12px;color:#FF0000}
/*defaults*/
h1{font-size:20px; color:#c7031a; text-decoration:none; }
h2{ font-size:16px; color:#fefdfd; text-transform:uppercase; padding:0px; margin:0px; font-family: Arial, Helvetica, sans-serif;}
h3{ font-size:18px; color: #990000; padding:0px; margin:0px; font-family: "Times New Roman", Times, serif; background-color:#F7CF32; height:25px; text-align:center;}
h4{ font-size:15px; color: #990000; padding:0px; margin:0px; font-family: "Times New Roman", Times, serif;}
img{ border:none;}
p{font-size:12px;text-align:justify;line-height:22px;}
.clear{clear:both;}
input.chk{border:none;}
input[type="text"]{border:solid 1px #646464;}
a{color:#fff;text-decoration:none;}
a:hover{ color:#fff;text-decoration:none;}
/*header*/
/* .nav{height:53px; background:url(images/nav-gradient.jpg) repeat-x; text-align:center;}
.nav ul{list-style:none; padding-top:17px; padding-left:10px; margin:0px;}
.nav li {float:left;}
.nav ul a {background:url(images/main-nav-divider.jpg)no-repeat; padding-left:12px; padding-right:12px; text-decoration:none; display:block; line-height:15px;font-size:13px; font-weight:bold;}
.nav ul a:hover{ color:#000000;}
.nav ul a.selected { color:#000000;}
*/
.navdiv{height:53px; background:url(images/nav-gradient.jpg) repeat-x; text-align:center;}
#nav{
padding-top:17px; padding-left:10px; margin:0px; list-style:none;
/* Clear floats */
width:100%;
/* Bring the nav above everything else--uncomment if needed.
position:relative;
z-index:5;
*/
}
#nav li{
float:left; position:relative;
}
#nav a{
background:url(images/main-nav-divider.jpg) no-repeat;
padding-left:12px; padding-right:12px; line-height:15px; font-size:13px; font-weight:bold;

display:block; color:#fff; text-decoration:none;
}
#nav a:hover{
color:#000000; text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;position:absolute;left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
left:-30; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background:url(images/nav-gradient.jpg) repeat-x;
color:#fff;text-decoration:none;text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;line-height:30px;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:#333;}
.nav2{ width:180px; height:auto; margin-top:10px; font-size:11px;height:750px;}
.nav2 ul { list-style:none; margin:0px; padding:0px; position:absolute;
/* Hide off-screen when not needed (this is more accessible than display:none;) */}
.nav2 ul li { text-decoration:none;position:relative; }
.nav2 ul li ul {list-style:none;position:absolute;left:-9999px; }
.nav2 li:hover ul{ /* Display the dropdown on hover */
left:-120; /* Bring back on-screen when needed */
top:-10;width:120px;
}
.nav2 li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
line-height:30px;background:url(images/nav-gradient.jpg) repeat-x;
}
.nav2 li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:url(images/nav-gradient.jpg) repeat-x;color:#000;
}
.nav2 ul a {white-space:nowrap;display:block;background:url(images/nav-divider.jpg) no-repeat; padding-bottom:6px; padding-left:8px; padding-top:5px; font-family:Arial, Verdana, sans-serif;}
.nav2 ul a:hover{color:#fe5e02;}
.nav2 ul a.selected{color:#fe5e02;}
#nav li, .nav2 ul li{z-index:100}
/*middle*/
.left-review-div
{ width:186px; height:31px; border: 1px #CCCCCC solid; background:url(images/review-gradient.jpg) repeat-x; text-align:center; font-size:15px; font-weight:bold; text-transform:uppercase; font-family: Arial, Helvetica, sans-serif;}
.review-image
{ width:186px; border: 1px #fcfbfb solid; margin-top:5px;}
.border
{ border: solid 1px #cccaca; margin-top:10px;}
.input-text
{ width:140px; height:25px; color:#232323; font-family:Verdana; font-size:11px; background:url(images/search-gradient.jpg) repeat-x; text-align:left; padding-left:5px;}
.banner-div
{ width:193px; height:189px; margin-top:15px; border: solid 1px #cccaca;}
.feartured-text
{margin-top:3px; text-align:center;}
.feartured-text a{text-decoration:none;}
.feartured-text a:hover{text-decoration:underline;}
.nontando-text-div
{ width:480px; padding-left:35px; padding-top:15px;}
.hr{margin-left:12px; width:542px; border-bottom:2px dotted #999999; margin-top:20px;}
.product-div
{width:160px; height:142px; border:1px solid #fff; }
.pice-div{width:153px; height:23px; background:#000000; text-align:center; font-weight:bold; padding-top:6px; margin-top:4px;}
.pice-div a {text-decoration:none;}
.pice-div a:hover {text-decoration:underline;}
.detail-outer-div
{width:153px; height:27px; margin-top:5px;}
.detail-div
{ width:52px; height:27px; text-align:center; padding-top:6px; background: url(images/detail-box-gradient.jpg) repeat-x; float:left;}
.detail-div a {text-decoration:none;font-size:12px}
.detail-div a:hover {text-decoration:underline;}
.add-to-cart-div
{ width:88px; height:27px; text-align:center; padding-top:6px; background: url(images/add-to-cart-gradient.jpg)repeat-x; float:right;}
.add-to-cart-div a {text-decoration:none;;font-size:12px}
.add-to-cart-div a:hover {text-decoration:underline;}
.cart-div
{ width:88px; height:27px; text-align:center; padding-top:6px; background: url(images/add-to-cart-gradient.jpg)repeat-x; margin-left:35px; margin-top:6px;}
.div a {text-decoration:none;}
.cart-div a:hover {text-decoration:underline; color:#FFCC00;}
.heading-div
{margin-top:10px; margin-left:25px;background:#FF0000; width:520px; height:30px; padding-top:8px; " align="center}
.click
{text-align:center; margin-top:5px;}
.click a{color:#FFf; text-decoration:none;}
.click a:hover{color:#FF0000; text-decoration:underline;}
.price-text
{text-align:center; margin-top:7px; font-size:16px; font-weight:bold; color:#FF3300;}
/*footer*/
.nav-bottom
{height:53px; background:url(images/nav-gradient.jpg) repeat-x; text-align:center;}
.nav-bottom ul{list-style:none; padding-top:17px; padding-left:10px; margin:0px;}
.nav-bottom li {float:left;}
.nav-bottom ul a {background:url(images/main-nav-divider.jpg)no-repeat; padding-left:10px; padding-right:10px; text-decoration:none; display:block; line-height:15px;font-size:13px; font-weight:bold;}
.nav-bottom ul a:hover{ color:#000000;}

[♥kymation]

Your problem is likely in this code:

 

<link rel="[url=""]stylesheet[/url]" href="[url="view-source:http://www.nontando.com/product_info.php/css/lightbox.css"]css/lightbox.css[/url]" type="[url=""]text/css[/url]" media="[url=""]screen[/url]" /> 
<script src="[url="view-source:http://www.nontando.com/product_info.php/js/prototype.js"]js/prototype.js[/url]" type="[url=""]text/javascript[/url]"></script> 
<script src="[url="view-source:http://www.nontando.com/product_info.php/js/scriptaculous.js?load=effects,builder"]js/scriptaculous.js?load=effects,builder[/url]" type="[url=""]text/javascript[/url]"></script> 
<script src="[url="view-source:http://www.nontando.com/product_info.php/js/lightbox.js"]js/lightbox.js[/url]" type="[url=""]text/javascript[/url]"></script>

 

Those 4 lines appear after the end of the head section of the page, when they should be inside the head tags. That's probably enough to confuse IE.

 

You also have other HTML errors on your page. I suggest that you use the W3 validator and View Source in Firefox to find these errors and fix them. Browsers don't all have the same reaction to errors, so some may display correctly while others will not.

 

Regards

Jim

[bksbeat]

Jim, what program is that code from that you have pasted? Thks, Gary

[♥mattjt83]

@@bksbeat I think it has to do with your doctype declaration.

 

You have:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

 

Maybe try this instead:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

Your page works in IE 8 properly if you force the browser to use standards mode instead of quirks mode which it is defaulting to right now. This is probably due to the doctype. Hope that helps!

[MrPhil]

This is my 3rd post now on this matter but I am determined not to give up and hopefully someone out there can help me.

 

And please don't keep starting new threads on the same problem. It clutters up the forum and you won't get any better help when information is scattered all over the place.

[bksbeat]

Matt, which file is this in, i.e. doctype ?

 

Thanks, Gary

 

I thought it would be in the htaccess file but I dont have anything like that....please see below

 

 

# $Id: .htaccess,v 1.3 2003/06/12 10:53:20 hpdl Exp $
#
# This is used with Apache WebServers
#
# For this to work, you must include the parameter 'Options' to
# the AllowOverride configuration
#
# Example:
#
# <Directory "/usr/local/apache/htdocs">
#   AllowOverride Options
# </Directory>
#
# 'All' with also work. (This configuration is in the
# apache/conf/httpd.conf file)
# The following makes adjustments to the SSL protocol for Internet
# Explorer browsers
<IfModule mod_setenvif.c>
 <IfDefine SSL>
   SetEnvIf User-Agent ".*MSIE.*" \
		 nokeepalive ssl-unclean-shutdown \
		 downgrade-1.0 force-response-1.0
 </IfDefine>
</IfModule>
# If Search Engine Friendly URLs do not work, try enabling the
# following Apache configuration parameter
#
# AcceptPathInfo On
# Fix certain PHP values
# (commented out by default to prevent errors occuring on certain
# servers)
#
#<IfModule mod_php4.c>
#  php_value session.use_trans_sid 0
#  php_value register_globals 1
#</IfModule>
RewriteEngine on
RewriteCond %{REQUEST_fileNAME} !-d
RewriteCond %{REQUEST_fileNAME}\.php -f
RewriteRule ^(.*)$ $1.php
RewriteCond %{HTTP_HOST} ^nontando.com [NC]
RewriteRule ^(.*)$ http://www.nontando.com/$1 [R=301,L]

[♥14steve14]

If you were to take notice of what people are telling you in your multitude of threads, you would have gone and tried to validate your site.

 

I just did and guess what, it found the following

 

Errors found while checking this document as HTML 4.01 Transitional!

 

Result: 153 Errors, 46 warning(s) Address: Modified: (undefined) Server: Nginx / Varnish Size: (undefined) Content-Type: text/html Encoding: iso-8859-1 Doctype: HTML 4.01 Transitional Root Element: html

 

The W

 

 

Try doing something about some if not all of these errors. Oscommerce validates as a fresh site, so it must have been something you have done to create all these errors.

[bksbeat]

I apologize Steve.

 

Yes, I have to address the HTML errors which I plan to do, but the issue that I had, which is now been fixed, required an adjustment to the code in the header in the htaccess file

[bksbeat]

Okay, the good news - The issue has been resolved. Thank you for all those that have helped me try and resolve. A special thank you to John Dunlop (for your very useful input) & Graham (g2777) who found it and fixed it. Basically, it was a code adjustment in the header information in the .htaccess file.

 

With regards to the html errors many of you, incl. George and others have found and notified me about, here is the scoop. About 3 weeks ago, I used a developer (Expert Web World in India) to redesign my site. It was really only the front end that was changed. With re. to the IE error, unfortunately they never notified that this bug exists and have not been around (after they have been paid!) to help me fix it....Live and learn...The next issue...is when they implemented the redesign, they upgraded my site from 2.2. to 2.3. They mentioned this to me, but said there would be no consequences or issues. A few days ago when you guys

mentioned template_top.php, I was confused as I had never heard of that file (had only been using application_top.ph

So my guess is that many of the html errors were related to a combo of 2.2 and 2.3 code being used. 2 good examples is that although I have template_top.php, nothing is referencing this file and everything is still tied to application_top. Probably wil hit some issues down the road - I guess I wont be using "Expert" Web World again!