Dreamweaver tables not displaying correctly in internet explorer browser, please help!!!!
Could someone please help me with this issue i've been having for almost a year now and can't find any information on getting this fixed, for some reason the features specs and required tables rows are not displaying correctly, the image is out of aligned when viewing the results using the internet explorer browser only, the firefox browser works just as needed but when i try to view the same code in IE the tables are not aligned properly and the text is not margined correctly either, i tried playing around with the css style that i have and no results. Please help me fix this issue so that my page would display in internet explorer just like under Firefox. Below are the pictures of the problem i'm having.
This picture shows how i want it displayed on the internet explorer and firefox browser:
Here is results in firefox browser:
Here is results in internet explorer browser:
As you can see the tables are all messed up, text is not centered properly even if i coded it right.
Here is the coding for this page:
PLEASE HELP ME OUT WITH THIS PROBLEM, I NEED TO FIGURE OUT HOW TO MAKE INTERNET EXPLORER TO DISPLAY THE INFORMATION CORRECTLY JUST LIKE FIREFOX?
<style type="text/css">
<!--
.title {
background-image: url(http://www.ehobbyplanet.com/eBay/Layout/Title.jpg);
background-position: center center;
font-size: 24px;
font-weight: bold;
color: #FFF;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
vertical-align: middle;
.description {
background-image: url(http://www.ehobbyplanet.com/eBay/Layout/Description.jpg);
background-position: center center;
font-family: "Times New Roman";
font-size: 16px;
line-height: 20px;
font-weight: bold;
color: #000;
text-align: left;
vertical-align: middle;
padding-right: 20px;
padding-left: 20px;
.text {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
font-weight: bold;
color: #F00;
text-indent: 2em;
.features {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-style: italic;
font-weight: bolder;
text-decoration: underline;
color: #666666;
.featurebackground {
background-image: url(http://www.ehobbyplanet.com/eBay/Layout/Features.jpg);
background-position: center center;
font-size: 14px;
font-family: "Times New Roman";
font-style: normal;
font-weight: normal;
line-height: 18px;
background-repeat: no-repeat;
padding-right: 10px;
.policy {
.fsr_style { font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
font-style: normal;
background-color: #FFFFFF;
padding-top: 5em;
padding-right: 20px;
background-image: url(http://www.ehobbyplanet.com/eBay/Layout/Features.jpg);
.number {
.policy {
padding-left: 20px;
font-family: "Times New Roman", Times, serif;
font-weight: normal;
font-size: 14px;
padding-top: 10px;
padding-right: 7px;
padding-bottom: 10px;
-->
</style>
<body>
<table width="935" border="0">
<tr>
<td><img src="http://www.ehobbyplanet.com/eBay/Layout/eHobbyShortHeader.jpg" width="928" height="165" /></td>
</tr>
<tr>
<td height="44" align="center" valign="middle" class="title">HPI 1/5 Baja 5T Gas Truck RTR<td></td>
</tr>
<tr>
<td height="31" align="center" valign="middle" class="number">HPI Item #10620<td width="10"></td>
</tr>
</table>
<table width="925" height="326" border="0">
<tr>
<td width="16"> </td>
<td width="549"><img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-1md.jpg" width="549" height="429" id="mainPic"/></td>
<td width="35"> </td>
<td width="1559"><p><img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-1sm.jpg" width="116" height="85" onClick="changePic('Image-1')"/> <img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-2sm.jpg" width="116" height="85" onClick="changePic('Image-2')"/></p>
<p><img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-3sm.jpg" width="116" height="85" onClick="changePic('Image-3')"/> <img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-4sm.jpg" width="116" height="85" onClick="changePic('Image-4')"/></p>
<p><img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-5sm.jpg" width="116" height="85" onClick="changePic('Image-5')"/> <img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-6sm.jpg" width="116" height="85" onClick="changePic('Image-6')"/></p>
<p><img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-7sm.jpg" width="116" height="85" onClick="changePic('Image-7')"/> <img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-8sm.jpg" width="116" height="85" onClick="changePic('Image-8')"/></p>
<p class="text">Click to enlarge picture</p></td>
</tr>
</table>
<table width="928" height="124" border="0">
<tr>
<td height="320" class="description"><p>HPI Racing is proud to present the Baja 5T, a <strong>ready-to-run</strong> (RTR) 1/5th scale off-road truck that expands on the award-winning Baja 5B family. With the Baja 5T you get aggressive desert truck looks, high performance new features, and compatibility with many of the existing Baja 5B spare parts and option parts, wrapped up in a RTR package that gets you running in just a few minutes.</p>
<p>Includes: HPI Baja 5T RTR Truck with 1.6 cu in gasoline engine, 27MHz FM Radio, two water resistant servos, 3.4oz (100cc) 2-cycle oil, 2oz (60cc) shock oil, 1oz (30cc) diff oil, 1oz (30cc) air filter oil, tube of gear grease, 3000mAh receiver pack, wall charger, body with wing, extra air filter, wrenches, decal sheet and illustrated instruction manual.</p></td>
</tr>
</table>
<table width="928" border="0">
<tr>
<td width="290"> </td>
<td width="17"> </td>
<td width="292"> </td>
<td width="17"> </td>
<td width="290"> </td>
</tr>
<tr>
<td align="center" class="features">Features:</td>
<td align="center"> </td>
<td align="center"><span class="features">Specifications:</span></td>
<td align="center"> </td>
<td align="center"><span class="features">Required:</span></td>
</tr>
<tr>
<td height="526" class="featurebackground"><ul>
<li>Ventilated Disc Brake System</li>
<li>Heavy Duty Rear Dogbones</li>
<li>Moulded Nylon Rear Spoiler</li>
<li>Aluminum Alloy Diff Case</li>
<li>Dirt Guards</li>
<li>Full Metal Ball Bearings</li>
<li>Front & Rear Sway Bars</li>
<li>Modified Rear Shock Tower</li>
<li>Heavy Duty Inner Foam</li>
<li>Revised Gearing</li>
<li>High Flow Muffler</li>
<li>SFL-10MG2 Metal Gear Steering Servo</li>
<li>Heavy Duty Beadlocks</li>
<li>8000 RPM Clutch</li>
<li>Anodized Aluminum Parts</li>
<li>Double Wishbone Suspension</li>
<li>Adjustable Suspension</li>
<li>Baja 5T-1 Truck Body</li>
<li>Extended Roll Cage</li>
<li>Outlaw Truck Wheels / Desert Buster Tires</li>
<li>Fuelie 26 Engine (26cc)</li>
<li>All Metal Transmission Gears</li>
<li>High Quality Radio Gear</li>
</ul>
<td> </td>
<td class="featurebackground"><ul>
<li>Drive System: 2WD viscous Diff</li>
<li>Tires (front & rear): Truck Wheels / Desert Buster</li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p></td>
<td> </td>
<td class="featurebackground">
<ul>
<li class="featurebackground">Unleaded Gasoline: 87-93 octane, mix gasoline with two cycle oil at 25:1 ratio</li>
<li class="featurebackground">Transmitter Batteries: 8x AA</li>
<li class="featurebackground">Screwdriver: Flat blade, 3/16" (4-5mm) wide</li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p></td>
</tr>
</table>
<table width="928" height="621" border="0">
<tr>
<td> </td>
</tr>
<tr>
<td height="135" background="http://www.ehobbyplanet.com/eBay/Layout/ePaymentMethod.jpg" class="policy"><p>We accept Visa, Mastercard and Discover Card and PayPal. If your unable to send payment using these methods please contact us at [email protected]. All payments need to be sent within 5 days.
</p>
<p> </p></td>
</tr>
<tr>
<td height="21"> </td>
</tr>
<tr>
<td height="220" background="http://www.ehobbyplanet.com/eBay/Layout/eNormalShipping.jpg" class="policy"><p>All our orders are shipped out within 72 business hours unless stated. We ship everything out using the best packaging material to insure safe deliveries using shipping companies such as USPS Postal Office and UPS services (Shipping times will vary depending on the service you choose). Tracking information will be automatically sent via email after an order has been shipped out. We Definitely Combine Shipping for multiple items, if for some reason our eBay checkout isn’t combining your items please wait for a custom eBay invoice which will have your order combined into one, reducing the shipping price. For international customers, please note: "that Import duties, taxes, and charges are not included in the item price or shipping charges. These charges are the buyer's responsibility. Check with your country's customs office to find out what these additional costs will be before you bid or buy".</p>
<p>Please Note for International Customers Only: Due to the large size of this item there are several countries that have a size limitation which we are not able to ship to, if by any means your order goes through to us and it falls in the country size restrictions and your order cannot be shipped out we have the right to cancel your order (before cancelling the order we will contact the customer via email).</p></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="104" background="http://www.ehobbyplanet.com/eBay/Layout/eInsurance.jpg" class="policy">We offer insurance which is optional during checkout for both Domestic and International customers which will cover the full amount paid by customer, if insurance isn't purchased we are not responsible for packages that are missing during transit. If you use the USPS First Class Mail International shipping service please allow 10 - 25 business days for the delivery of your package.</td>
</tr>
<tr>
<td height="21"> </td>
</tr>
<tr>
<td height="135" background="http://www.ehobbyplanet.com/eBay/Layout/eReturns.jpg" class="policy">We want you to be completely happy with your purchases. So we do everything we can to assure you get the exact merchandise you order, delivered on time. If by any means your unsatisfied with your purchase we will be happy to accept returns for an exchange or a refund within 14 days. If shipping the item back, customer is responsible for freight charges to us. We offer refunds & exchanges if your not satisfied with your purchase. The returned product needs to be in the same condition it was shipped out in, unused and in it’s original packaging. If by any chance there has been an issue with your order and you want to request a return please email us at [email protected].</td>
</tr>
</table>
</body>
<script type="text/javascript">
if(document.images) {
tempImage = new Image();
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-1md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-2md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-3md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-4md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-5md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-6md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-7md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-8md.jpg";
function changePic(newName) {
newPicURL = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/"+newName+"md.jpg";
mainPic.src = newPicURL;
</script>
Here is my contact information:
Paul
[email protected]
Try this without the border images and it will work in all browsers with increased text size. That's assuming eBay supports embedded CSS styles (which I'm not convinced they do). Inline styles are safer IMHO.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.title {
background-image: url(http://www.ehobbyplanet.com/eBay/Layout/Title.jpg);
background-position: center center;
font-size: 24px;
font-weight: bold;
color: #FFF;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
vertical-align: middle;
h2 {font-size:1.7em; color:#000; margin-top:0em; margin-bottom: 2px;}
ul,li {
font-size:14px;
list-style:disc;
line-height:1.5;
font-family: "Times New Roman", Times, serif;
.description {
font-family: "Times New Roman";
font-size: 16px;
line-height: 1.2;
font-weight: bold;
color: #000;
text-align: left;
vertical-align: middle;
border: 4px solid red;
padding: 0 20px 20px 20px;
.text {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
font-weight: bold;
color: #F00;
text-indent: 2em;
.features {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-style: italic;
font-weight: bolder;
text-decoration: underline;
color: #666666;
line-height: 3em;
.featurebackground {
padding-right: 10px;
border: 4px solid red;
width: 200px;
vertical-align: top;
padding-top: 1em;
.policy {
border: 4px solid red;
margin-top: -2em;
.fsr_style { font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
padding-top: 5em;
padding-right: 20px;
border: 4px solid red;
.number {
.policy {
font-family: "Times New Roman", Times, serif;
font-weight: normal;
font-size: 14px;
padding: 0 20px 20px 20px;
</style>
</head>
<body>
<table width="935" border="0">
<tr>
<td><img src="http://www.ehobbyplanet.com/eBay/Layout/eHobbyShortHeader.jpg" width="928" height="165" /></td>
</tr>
<tr>
<td height="44" align="center" valign="middle" class="title">HPI 1/5 Baja 5T Gas Truck RTR</td><td></td>
</tr>
<tr>
<td align="center" valign="middle" class="number">HPI Item #10620</td><td width="10"></td>
</tr>
</table>
<table width="925" border="0">
<tr>
<td width="16"> </td>
<td width="549"><img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-1md.jpg" width="549" height="429" id="mainPic"/></td>
<td width="35"> </td>
<td width="1559"><p><img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-1sm.jpg" width="116" height="85" onclick="changePic('Image-1')"/> <img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-2sm.jpg" width="116" height="85" onclick="changePic('Image-2')"/></p>
<p><img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-3sm.jpg" width="116" height="85" onclick="changePic('Image-3')"/> <img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-4sm.jpg" width="116" height="85" onclick="changePic('Image-4')"/></p>
<p><img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-5sm.jpg" width="116" height="85" onclick="changePic('Image-5')"/> <img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-6sm.jpg" width="116" height="85" onclick="changePic('Image-6')"/></p>
<p><img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-7sm.jpg" width="116" height="85" onclick="changePic('Image-7')"/> <img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-8sm.jpg" width="116" height="85" onclick="changePic('Image-8')"/></p>
<p class="text">Click to enlarge picture</p></td>
</tr>
</table>
<table width="928" border="0">
<tr>
<td class="description"><h2>Description</h2>
<p>HPI Racing is proud to present the Baja 5T, a <strong>ready-to-run</strong> (RTR) 1/5th scale off-road truck that expands on the award-winning Baja 5B family. With the Baja 5T you get aggressive desert truck looks, high performance new features, and compatibility with many of the existing Baja 5B spare parts and option parts, wrapped up in a RTR package that gets you running in just a few minutes.</p>
<p>Includes: HPI Baja 5T RTR Truck with 1.6 cu in gasoline engine, 27MHz FM Radio, two water resistant servos, 3.4oz (100cc) 2-cycle oil, 2oz (60cc) shock oil, 1oz (30cc) diff oil, 1oz (30cc) air filter oil, tube of gear grease, 3000mAh receiver pack, wall charger, body with wing, extra air filter, wrenches, decal sheet and illustrated instruction manual.</p></td>
</tr>
</table>
<table width="928" border="0">
<tr>
<td width="290"> </td>
<td width="17"> </td>
<td width="292"> </td>
<td width="17"> </td>
<td width="290"> </td>
</tr>
<tr>
<td align="center"><span class="features">Features:</span></td>
<td align="center"> </td>
<td align="center"><span class="features">Specifications:</span></td>
<td align="center"> </td>
<td align="center"><span class="features">Required:</span></td>
</tr>
<tr>
<td class="featurebackground"><ul>
<li>Ventilated Disc Brake System</li>
<li>Heavy Duty Rear Dogbones</li>
<li>Moulded Nylon Rear Spoiler</li>
<li>Aluminum Alloy Diff Case</li>
<li>Dirt Guards</li>
<li>Full Metal Ball Bearings</li>
<li>Front & Rear Sway Bars</li>
<li>Modified Rear Shock Tower</li>
<li>Heavy Duty Inner Foam</li>
<li>Revised Gearing</li>
<li>High Flow Muffler</li>
<li>SFL-10MG2 Metal Gear Steering Servo</li>
<li>Heavy Duty Beadlocks</li>
<li>8000 RPM Clutch</li>
<li>Anodized Aluminum Parts</li>
<li>Double Wishbone Suspension</li>
<li>Adjustable Suspension</li>
<li>Baja 5T-1 Truck Body</li>
<li>Extended Roll Cage</li>
<li>Outlaw Truck Wheels / Desert Buster Tires</li>
<li>Fuelie 26 Engine (26cc)</li>
<li>All Metal Transmission Gears</li>
<li>High Quality Radio Gear</li>
</ul>
</td>
<td> </td>
<td class="featurebackground"><ul>
<li>Drive System: 2WD viscous Diff</li>
<li>Tires (front & rear): Truck Wheels / Desert Buster</li>
</ul>
</td>
<td> </td>
<td class="featurebackground">
<ul>
<li>Unleaded Gasoline: 87-93 octane, mix gasoline with two cycle oil at 25:1 ratio</li>
<li>Transmitter Batteries: 8x AA</li>
<li>Screwdriver: Flat blade, 3/16" (4-5mm) wide</li>
</ul>
</td>
</tr>
</table>
<table width="928" border="0">
<tr>
<td> </td>
</tr>
<tr>
<td class="policy"><h2>Payment Method </h2>
<p>We accept Visa, Mastercard and Discover Card and PayPal. If your unable to send payment using these methods please contact us at [email protected]. All payments need to be sent within 5 days.
</p></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="policy"><h2>Shipping & Handling </h2>
<p>All our orders are shipped out within 72 business hours unless stated. We ship everything out using the best packaging material to insure safe deliveries using shipping companies such as USPS Postal Office and UPS services (Shipping times will vary depending on the service you choose). Tracking information will be automatically sent via email after an order has been shipped out. We Definitely Combine Shipping for multiple items, if for some reason our eBay checkout isn’t combining your items please wait for a custom eBay invoice which will have your order combined into one, reducing the shipping price. For international customers, please note: "that Import duties, taxes, and charges are not included in the item price or shipping charges. These charges are the buyer's responsibility. Check with your country's customs office to find out what these additional costs will be before you bid or buy".</p>
<p>Please Note for International Customers Only: Due to the large size of this item there are several countries that have a size limitation which we are not able to ship to, if by any means your order goes through to us and it falls in the country size restrictions and your order cannot be shipped out we have the right to cancel your order (before cancelling the order we will contact the customer via email).</p></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="policy"><h2>Insurance</h2>
<p>We offer insurance which is optional during checkout for both Domestic and International customers which will cover the full amount paid by customer, if insurance isn't purchased we are not responsible for packages that are missing during transit. If you use the USPS First Class Mail International shipping service please allow 10 - 25 business days for the delivery of your package.</p></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="policy"><h2>Returns</h2>
<p>We want you to be completely happy with your purchases. So we do everything we can to assure you get the exact merchandise you order, delivered on time. If by any means your unsatisfied with your purchase we will be happy to accept returns for an exchange or a refund within 14 days. If shipping the item back, customer is responsible for freight charges to us. We offer refunds & exchanges if your not satisfied with your purchase. The returned product needs to be in the same condition it was shipped out in, unused and in it’s original packaging. If by any chance there has been an issue with your order and you want to request a return please email us at [email protected].</p></td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
if(document.images) {
tempImage = new Image();
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-1md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-2md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-3md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-4md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-5md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-6md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-7md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-8md.jpg";
function changePic(newName) {
newPicURL = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/"+newName+"md.jpg";
mainPic.src = newPicURL;
</script>
That's the best solution I can offer.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
Similar Messages
-
Website template created in PS not displaying correctly in Internet Explorer. Any ideas?
Hi there
I was wondering if anyone could help me with creating templates in photoshop.
I have cut up my site, centred the table it produces in Dreamweaver and added a background and made the banners rotate but the site does not load correctly in Internet Explorer (even before I did all this stuff). The cells are not correctly aligned.
I have also tired validating the code but it says it is not valid HTML.
Has anyone else had this problem?
My website can be viewed at: https://dl.dropbox.com/u/4966582/intranet/index.html
Thanks in advancePhotoshop is for images only. Don't attempt to use the exported code on real web sites. It won't work in the wild. Why? Because the code isn't good & the tables are too rigid to hold anything other than the image slices. When you attempt to edit this layout in DW or any HTML editor, the whole thing falls apart and produces unsightly gaps between slices.
The reason it doesn't look right in IE is because the code lacks a valid document type declaration on the first line. This causes IE to render the page in Quirks Mode.
The export HTML feature in Photoshop is really only for quick comps to show a client before you begin building the actual web site with HTML and CSS code.
Although written for Fireworks, the 3-part tutorial below describes the procedure for bringing your design comp into a CSS Layout in DW. If you get stuck on anything, feel free to post specific questions in the DW general discussion forum.
Part 1 - Initial Design
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html
Part 2 - Markup preparation
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt2.html
Part 3 - Layout and CSS
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt3.html
Have fun!
Nancy O. -
DW CS4 Horizontal Spry drop down menu not displaying correctly in Internet Explorer 8
Hi,
I have created a horizontal Spry drop down menu in Dreamweaver CS4 with my own background images. I have done various modifications to the CSS script to accommodate the style and feel needed; including making the main buttons' height twice the size of the sub menu buttons and some alignments. It seems to work different depending which browser is used.
It works well in Google Chrome.
It works well in Firefox with the exception that if any of the buttons are clicked, thereafter a thin black line is diplayed horizontally across center of the top main buttons when the mouse rolls over them. I would like to correct this but is not nearly as bad as the problem I'm having in Internet Explorer 8.
Here is my biggest concern and I would greatly appreciate if anyone can shed some light on this matter.
Once opened in Internet Explorer 8 the main navigation buttons appear as they should. IE8 prompts me the following: "To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options..". Once I allow IE8 to run scripts or ActiveX controls, the background image disappears and only shows on any menu or submenu button when the mouse rolls over that particular button. Can someone please help.
The menu can be seen at work by clicking on this link:
www.bargainxchange.com/BXC Main Navigation Spry Drop Menu.html
Below are all the scrips involved.
Here is the CSS script named "SpryMenuBarHorizontal4.css" in use :
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 10;
padding: 0;
list-style-type: none;
font-size: 80%;
cursor: default;
width: auto;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
/*whole menu moves*/
margin-left: 100px;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* My Note --Top buttons' background, height and font size adjust-- */
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
/* My note --I added the height and background-image as Main-Buttons.jpg-- */
height: 55px;
background-image: url(../Main-Buttons.jpg);
margin: -2;
padding: 0;
list-style-type: none;
font-size: 100%;
position: center;
/*text-align: left;*/
cursor: pointer;
width: 99px;
float: left;
/* My note --Submenu font size adjust-- */
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
/*height:38px;*/
margin: 0;
padding: 0;
list-style-type: none;
font-size: 87%;
z-index: 1020;
cursor: default;
width: 160px;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
/* My note --this margin alligns the drop buttons up and down-- */
margin-top: 24px;
height: 25px;
left: auto;
/* My note --drop menu size adjustments-- */
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
height: 25px;
width: 160px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position:absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
/*border: 1px solid #CCC;*/
/* My note --Text Allignment global-- */
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
/*height: 40px;*/
text-align: center;
/*vertical-align: center;*/
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
text-decoration: none;
/*zzzzzzzz Text Color*/
color: #333; /*background-color: #CCC;*/
letter-spacing: -0.00px;
margin-left: 1px;
margin-right: 0px;
/*alligns text up or down globally*/
margin-top: 1px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
/*background-color: #33C;
color: #FFF;*/
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-image: url(../Main-Buttons-mouse-over.jpg); /*background-color: #33C;
color: #FFF;*/
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-repeat: no-repeat;
background-position: 95% 50%;
/* My note --mouse over-- */
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
Here is the JavaScrip file named "SpryMenuBar.js" that has not been modified in any way:
// SpryMenuBar.js - version 0.12 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
// * Neither the name of Adobe Systems Incorporated nor the names of its
// contributors may be used to endorse or promote products derived from this
// software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
SpryMenuBar.js
This file handles the JavaScript for Spry Menu Bar. You should have no need
to edit this file. Some highlights of the MenuBar object is that timers are
used to keep submenus from showing up until the user has hovered over the parent
menu item for some time, as well as a timer for when they leave a submenu to keep
showing that submenu until the timer fires.
var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
(ua.match(/linux/i) ? "linux" :
(ua.match(/mac/i) ? "mac" :
ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.BrowserSniff();
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
this.init(element, opts);
Spry.Widget.MenuBar.prototype.init = function(element, opts)
this.element = this.getElement(element);
// represents the current (sub)menu we are operating on
this.currMenu = null;
this.showDelay = 250;
this.hideDelay = 600;
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
// bail on older unsupported browsers
return;
// Fix IE6 CSS images flicker
if (Spry.is.ie && Spry.is.version < 7){
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
this.hoverClass = 'MenuBarItemHover';
this.subHoverClass = 'MenuBarItemSubmenuHover';
this.subVisibleClass ='MenuBarSubmenuVisible';
this.hasSubClass = 'MenuBarItemSubmenu';
this.activeClass = 'MenuBarActive';
this.isieClass = 'MenuBarItemIE';
this.verticalClass = 'MenuBarVertical';
this.horizontalClass = 'MenuBarHorizontal';
this.enableKeyboardNavigation = true;
this.hasFocus = false;
// load hover images now
if(opts)
for(var k in opts)
if (typeof this[k] == 'undefined')
var rollover = new Image;
rollover.src = opts[k];
Spry.Widget.MenuBar.setOptions(this, opts);
// safari doesn't support tabindex
if (Spry.is.safari)
this.enableKeyboardNavigation = false;
if(this.element)
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
if (i > 0 && this.enableKeyboardNavigation)
items[i].getElementsByTagName('a')[0].tabIndex='-1';
this.initialize(items[i], element);
if(Spry.is.ie)
this.addClassName(items[i], this.isieClass);
items[i].style.position = "static";
if (this.enableKeyboardNavigation)
var self = this;
this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
if(Spry.is.ie)
if(this.hasClassName(this.element, this.verticalClass))
this.element.style.position = "relative";
var linkitems = this.element.getElementsByTagName('a');
for(var i=0; i<linkitems.length; i++)
linkitems[i].style.position = "relative";
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
Spry.Widget.MenuBar.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
return false;
return true;
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
if (!ele || !className || this.hasClassName(ele, className))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
if (!ele || !className || !this.hasClassName(ele, className))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent('on' + eventType, handler);
catch (e) {}
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:""';
layer.frameBorder = '0';
layer.scrolling = 'no';
menu.parentNode.appendChild(layer);
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
while(layers.length > 0)
layers[0].parentNode.removeChild(layers[0]);
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
var menus = root.getElementsByTagName('ul');
for(var i=0; i<menus.length; i++)
this.hideSubmenu(menus[i]);
this.removeClassName(this.element, this.activeClass);
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
if(this.currMenu)
this.clearMenus(this.currMenu);
this.currMenu = null;
if(menu)
this.addClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
menu.style.top = menu.parentNode.offsetTop + 'px';
if(Spry.is.ie && Spry.is.version < 7)
this.createIframeLayer(menu);
this.addClassName(this.element, this.activeClass);
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
if(menu)
this.removeClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
menu.style.top = '';
menu.style.left = '';
if(Spry.is.ie && Spry.is.version < 7)
this.removeIframeLayer(menu);
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
if(menu)
this.addClassName(link, this.hasSubClass);
if(!Spry.is.ie)
// define a simple function that comes standard in IE to determine
// if a node is within another node
listitem.contains = function(testNode)
// this refers to the list item
if(testNode == null)
return false;
if(testNode == this)
return true;
else
return this.contains(testNode.parentNode);
// need to save this for scope further down
var self = this;
this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
if (this.enableKeyboardNavigation)
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
this.lastOpen = listitem.getElementsByTagName('a')[0];
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.hasFocus = true;
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
this.clearSelection(listitem);
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
//search any intersection with the current open element
if (!this.lastOpen)
return;
if (el)
el = el.getElementsByTagName('a')[0];
// check children
var item = this.lastOpen;
while (item != this.element)
var tmp = el;
while (tmp != this.element)
if (tmp == item)
return;
try{
tmp = tmp.parentNode;
}catch(err){break;}
item = item.parentNode;
var item = this.lastOpen;
while (item != this.element)
this.hideSubmenu(item.parentNode);
var link = item.getElementsByTagName('a')[0];
this.removeClassName(link, this.hoverClass);
this.removeClassName(link, this.subHoverClass);
item = item.parentNode;
this.lastOpen = false;
Spry.Widget.MenuBar.prototype.keyDown = function (e)
if (!this.hasFocus)
return;
if (!this.lastOpen)
this.hasFocus = false;
return;
var e = e|| event;
var listitem = this.lastOpen.parentNode;
var link = this.lastOpen;
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
if (!opts[3])
opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
var found = 0;
switch (e.keyCode){
case this.upKeyCode:
found = this.getElementForKey(opts, 'y', 1);
break;
case this.downKeyCode:
found = this.getElementForKey(opts, 'y', -1);
break;
case this.leftKeyCode:
found = this.getElementForKey(opts, 'x', 1);
break;
case this.rightKeyCode:
found = this.getElementForKey(opts, 'x', -1);
break;
case this.escKeyCode:
case 9:
this.clearSelection();
this.hasFocus = false;
default: return;
switch (found)
case 0: return;
case 1:
//subopts
this.mouseOver(listitem, e);
break;
case 2:
//parent
this.mouseOut(opts[2], e);
break;
case 3:
case 4:
// left - right
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
break;
var link = opts[found].getElementsByTagName('a')[0];
if (opts[found].nodeName.toLowerCase() == 'ul')
opts[found] = opts[found].getElementsByTagName('li')[0];
this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
opts[found].getElementsByTagName('a')[0].focus();
//stop further event handling by the browser
return Spry.Widget.MenuBar.stopPropagation(e);
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if (this.enableKeyboardNavigation)
this.clearSelection(listitem);
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
if (listitem.closetime)
clearTimeout(listitem.closetime);
if(this.currMenu == listitem)
this.currMenu = null;
// move the focus too
if (this.hasFocus)
link.focus();
// show menu highlighting
this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
if(menu && !this.hasClassName(menu, this.subHoverClass))
var self = this;
listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
if(!listitem.contains(related))
if (listitem.opentime)
clearTimeout(listitem.opentime);
this.currMenu = listitem;
// remove menu highlighting
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
if(menu)
var self = this;
listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
if (this.hasFocus)
link.blur();
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
var child = element[sibling];
while (child && child.nodeName.toLowerCase() !='li')
child = child[sibling];
return child;
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
var found = 0;
var rect = Spry.Widget.MenuBar.getPosition;
var ref = rect(els[found]);
var hideSubmenu = false;
//make the subelement visible to compute the position
if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
els[1].style.visibility = 'hidden';
this.showSubmenu(els[1]);
hideSubmenu = true;
var isVert = this.hasClassName(this.element, this.verticalClass);
var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
for (var i = 1; i < els.length; i++){
//when navigating on the y axis in vertical menus, ignore children and parents
if(prop=='y' && isVert && (i==1 || i==2))
continue;
//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
continue;
if (els[i])
var tmp = rect(els[i]);
if ( (dir * tmp[prop]) < (dir * ref[prop]))
ref = tmp;
found = i;
// hide back the submenu
if (els[1] && hideSubmenu){
this.hideSubmenu(els[1]);
els[1].style.visibility = '';
return found;
Spry.Widget.MenuBar.camelize = function(str)
if (str.indexOf('-') == -1){
return str;
var oStringList = str.split('-');
var isFirstEntry = true;
var camelizedString = '';
for(var i=0; i < oStringList.length; i++)
if(oStringList[i].length>0)
if(isFirstEntry)
camelizedString = oStringList[i];
isFirstEntry = false;
else
var s = oStringList[i];
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
return camelizedString;
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
var value;
try
if (element.style)
value = element.style[Spry.Widget.MenuBar.camelize(prop)];
if (!value)
if (document.defaultView && document.defaultView.getComputedStyle)
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css.getPropertyValue(prop) : null;
else if (element.currentStyle)
value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
catch (e) {}
return value == 'auto' ? null : value;
Spry.Widget.MenuBar.getIntProp = function(element, prop)
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
if (isNaN(a))
return 0;
return a;
Spry.Widget.MenuBar.getPosition = function(el, doc)
doc = doc || document;
if (typeof(el) == 'string') {
el = doc.getElementById(el);
if (!el) {
return false;
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
//element must be visible to have a box
return false;
var ret = {x:0, y:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
parent = el.offsetParent;
if (parent != el) {
while (parent) {
ret.x += parent.offsetLeft;
ret.y += parent.offsetTop;
parent = parent.offsetParent;
// opera & (safari absolute) incorrectly account for body offsetTop
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
ret.y -= doc.body.offsetTop;
if (el.parentNode)
parent = el.parentNode;
else
parent = null;
if (parent.nodeName){
var cas = parent.nodeName.toUpperCase();
while (parent && cas != 'BODY' && cas != 'HTML') {
cas = parent.nodeName.toUpperCase();
ret.x -= parent.scrollLeft;
ret.y -= parent.scrollTop;
if (parent.parentNode)
parent = parent.parentNode;
else
parent = null;
return ret;
Spry.Widget.MenuBar.stopPropagation = function(ev)
if (ev.stopPropagation)
ev.stopPropagation();
else
ev.cancelBubble = true;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
And last, here is the HTML code that has also not been modified in any way:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="../BXC Main Navigation Spry Drop Menu/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../BXC Main Navigation Spry Drop Menu/SpryAssets/SpryMenuBarHorizontal4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Buy</a>
<ul>
<li><a href="#">Shop from Private Owner</a></li>
<li><a href="#">Shop Direct from Stores</a></li>
<li><a href="#">Help Buying</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Bid</a>
<ul>
<li><a href="#">Shop from Auction</a></li>
<li><a href="#">Help Bidding</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Trade</a>
<ul>
<li><a href="#">Shop for Trades</a></li>
<li><a href="#">Help Trading</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">List Items</a>
<ul>
<li><a href="#">List Items in Auction</a></li>
<li><a href="#">List Items for Sale</a></li>
<li><a href="#">List Items for Trade</a></li>
<li><a href="#">Help Listing Items</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Intro</a>
<ul>
<li><a href="#">Flash Site &amp; Intro</a></li>
<li><a href="#">About Us</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">My Xchange</a>
<ul>
<li><a href="#">Activity</a></li>
<li><a href="#">Account</a></li>
<li><a href="#">Mail</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Help</a>
<ul>
<li><a href="#">Main Help</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
Thanks in advance for any of your help.
Jose H.Hello Nancy,
I was troubleshooting For the next 8 hours after my post here and eventually I got it right, I uploaded the files to the test server and at the time did not have the chance to post the solution here. This is why, as you saw, it is working correctly now. Both the CSS and HTML files needed modifications. While working on the code I had to run IE8, Chrome and Firefox simultaneously and refresh all three after every change in the code because what would fix the problem in one would cause a problem for the other.
In addition to the problems listed in my original post, there were also other graphical issues in IE8, such as; the main menu buttons without sub-menus would only display at half their size vertically. The border around the buttons would not display despite that the background images were rendered in Photoshop as flattened JPEGs with boarders as part of the background image. Being so, I removed all borders from the CSS script.
By the way.. the IE8 security measure did pop up while working from the server.
Anyhow for those of you who are experiencing similar problems you can take a look at the working code bellow and compare it to the initial code. I've included detail comments on every line I have changed, modified or added.
Good luck.. as I know it can become a complicated task when creating custom Spry menus.
<b>Here is the finished CSS script</b>
<code>@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 10;
padding: 0;
list-style-type: none;
/* font size for top menu*/
font-size: 80%;
cursor: default;
width: auto;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
/*whole menu moves*/
margin-left: 100px;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* My Note --Top buttons' background, height and font size adjust-- */
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
/* My note --I added the height and background-image as Main-Buttons.jpg-- */
height: 55px;
background-image: url(../Main-Buttons.jpg);
margin: -2;
padding: 0;
list-style-type: none;
font-size: 100%;
position: center;
/*text-align: left;*/
cursor: pointer;
width: 99px;
float: left;
/* My note --Submenu font size adjust-- */
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 87%;
z-index: 1020;
cursor: default;
width: 160px;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
/* My note --this margin alligns the drop buttons up and down-- */
margin-top: 0px;
height: 25px;
left: auto;
/* My note --drop menu size adjustments-- */
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
height: 25px;
width: 162px;
/* New addition */
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position:absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
/*border: 1px solid #CCC;*/
/* My note --Text Allignment global-- */
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
/*My note -- took out borders & changed text color to #333(black)& added my own mouse not over image-- */
/*border: 0px solid #333332;*/
background-image: url(../Main-Buttons.jpg);
/*height: 40px;*/
text-align: center;
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
text-decoration: none;
/*My note --Text Color-- */
color: #333; /*background-color: was #CCC;*/
letter-spacing: -0.00px;
margin-left: 1px;
margin-right: 0px;
/*alligns text up or down globally*/
margin-top: 1px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
/* My note --took out all backgound & text color for mouse over-- */
/*background-color: #33C;
color: #FFF;*/
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
/*My note -- took out background & text & added my own mouse over image-- */
background-image: url(../Main-Buttons-mouse-over.jpg);
/*background-color: #33C;
color: #FFF;*/
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
/* My note --!!!!!This height setting adjusts the main buttons' background height in IE8!!!!-- */
height: 40px;
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-repeat: no-repeat;
background-position: 95% 50%;
/* My note --mouse over-- */
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
/* My note --The backgound color below was changed here to the same color #3e6487 as the darkest tone in the background image graphic to mimic the original image borders; dark blue, since IE8 for some reason would cut them out. This change allows this dark blue background to display around the main top buttons in IE8 giving the appearance of borders*/
background: #3e6487;
</code>
<b>Here is the modified HTML script</b>
<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryMenuBarHorizontal4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Buy</a>
<ul>
<li><a href="#">Shop from Private Owner</a></li>
<li><a href="#">Shop Direct from Stores</a></li>
<li><a href="#">Help Buying</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Bid</a>
<ul>
<li><a href="#">Shop from Auction</a></li>
<li><a href="#">Help Bidding</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Trade</a>
<ul>
<li><a href="#">Shop for Trades</a></li>
<li><a href="#">Help Trading</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">List Items</a>
<ul>
<li><a href="#">List Items in Auction</a></li>
<li><a href="#">List Items for Sale</a></li>
<li><a href="#">List Items for Trade</a></li>
<li><a href="#">Help Listing Items</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Intro</a>
<ul>
<li><a href="#">Flash Site &amp; Intro</a></li>
<li><a href="#">About Us</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">My Xchange</a>
<ul>
<li><a href="#">Activity</a></li>
<li><a href="#">Account</a></li>
<li><a href="#">Mail</a></li>
</ul>
</li>
<!-- My note --the bellow line was: <li><a href="#">Contact Us</a></li> --- changing it to: <li><a href="#" class="MenuBarItemSubmenu">Contact Us</a> corrected the height of the Contact us button wich did not have sub menus and because of this only diplayed at half size vertically in IE8 //-->
<li><a href="#" class="MenuBarItemSubmenu">Contact Us</a>
<li><a href="#" class="MenuBarItemSubmenu">Help</a>
<ul>
<li><a href="#">Main Help</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
</code>
And Richard.. Thanks again for the time and your help, truly appreciated.
Jose H. -
Horizontal Menu Bar - Not displaying correctly in Internet Explorer
My issues are occuring in Internet Explorer 8 and 7, haven't tested earlier versions.
I am currently using DW CS5, Spry 1.6.1
The website (not yet complete) is at www3.sympatico.ca/mitchell.richard/
The menu bar as viewed in Firefox is correct. In Internet Explorer the menu bar is left justified, hides visited links, and lists horizontal menu items in reverse order.
I work for a Women's Shelter in Canada, as the Information Systems Manager. We don't have the funds to hire someone to build a website and it was decided and I quote "You know computers, you can buld the website". I couldn't get them to understand the analogy that just because a Neurosurgeon can use a scalpel he isn't a Cardiothoracic Surgeon... needless to say, I am floudering on this menu bar. Any help would be greatly appreciated.
Below is the source for my menubar
CSS
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12pt;
cursor: default;
width: inherit;
font: calibri;
font-family: Calibri;
font-weight: bold;
background-color: #4F91CD;
/* [disabled]height: 27px; */
/* [disabled]border-bottom: 1px solid #A7C9E5; */
/* [disabled]border-top: 1px solid #A7C9E5; */
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 6
.em;
float: right;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #4F91CD;
padding: 0.2em 0.75em;
color: #FFF;
text-decoration: none;
border-bottom: 1px solid #A7C9E5;
border-top: 1px solid #A7C9E5;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #A7C9E5;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #A7C9E5;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
/* [disabled]background-image: url(SpryMenuBarDown.gif); */
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
/* [disabled]background-image: url(SpryMenuBarRight.gif); */
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
/* [disabled]background-image: url(SpryMenuBarDownHover.gif); */
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
/* [disabled]background-image: url(SpryMenuBarRightHover.gif); */
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal ifram=e
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
HTML
<tr>
<td colspan="10" class="navbarrepeat"><ul id="navbar" class="MenuBarHorizontal">
<li><a href="contact_us.html">Contact Us</a> </li>
<li><a href="helpful_links.html" class="MenuBarItemSubmenu">Resources</a>
<ul>
<li><a href="helpful_links.html">Helpful Links</a></li>
<li><a href="community_agencies.html">Community Agencies</a></li>
<li><a href="of_interest.html">Of Interest</a></li>
</ul>
</li>
<li><a href="checklist.html" class="MenuBarItemSubmenu">Safety</a>
<ul>
<li><a href="safety_checklist.html">Safety Checklist</a></li>
<li><a href="things_to_bring.html">Things to Bring</a></li>
<li><a href="child_safety_plan.html">Child Safety Plan</a></li>
</ul>
</li>
<li><a href="signs.html" class="MenuBarItemSubmenu">Abuse</a>
<ul>
<li><a href="what_is_abuse.html">What is Abuse?</a></li>
<li><a href="signs.html">Signs of Abuse</a></li>
<li><a href="characteristics.html">Characteristics</a></li>
<li><a href="why_women_stay.html">Why Women Stay</a></li>
<li><a href="donate.html">Survivors Speak</a></li>
</ul>
</li>
<li><a href="donate.html" class="MenuBarItemSubmenu">Support Us</a>
<ul>
<li><a href="donate.html">Donate</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="volunteering.html">Volunteering</a></li>
<li><a href="statistics.html">Statistics</a></li>
</ul>
</li>
<li><a href="join_us.html">Join Us</a> </li>
<li><a href="our_story.html" class="MenuBarItemSubmenu">About Us</a>
<ul>
<li><a href="residential.html">Our Services</a></li>
<li><a href="our_mission.html">Our Mission</a></li>
<li><a href="our_story.html">Our Story</a></li>
<li><a href="board_of_directors.html">Board of Directors</a></li>
</ul>
</li>
</ul></td>
<td><img src="images/spacer.gif" width="1" height="26" alt=""></td>
</tr>/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 6
.em;
float: right;
The red coloured line causes your menu to be displayed the wrong way round in FF. IE shows the menu as you have listed it with Contact Us as the first item.
Advice:
change the float to left so that the listed items start on the left hand side
change the listed items in the order that you want them to appear. -
Pivot table not rendered correctly in Internet Explorer
Hi
We have used Pivot table in the fusion development. The pivot table renderes properly in FireFox, but rendering in IE it gets distored. Is there any know issue with IE, Please me know ?
TIA
AnandAre you sure the problem is the size of the icons? Beginning with version 6.0.2900.2190, Microsoft Internet Explorer stopped displaying the Web Server /mc-icons GIFs. This regression was apparently a side effect of Microsoft's attempts to fix IE's handling of malicious image files.
Apart from not using the buggy versions of IE, I'm not aware of a simple fix. I suspect a future Web Server 6.1 service pack will include a work around for the IE bug, but probably not until 6.1SP7.
I've added tweaked icons to my blog at http://blogs.sun.com/elving?entry=directory_listing_icons_and_ie that IE will display properly. You may wish to copy these into your ns-icons directory. -
Keynote html export not displaying correctly in Internet Explorer
I exported a Keynote presentation to html, uploaded it to my server, and only half of the slide shows in Internet Explorer. Every other browser displays the presenation just fine. Any ideas how to correct the Explorer error?
Hello! I have a real fix to this issue.
Open the the player.js file and find the o an u varibles and hard code a resolution, I chose 1280x1024. Choose anything you want it will all work. There's some issue with the varibles that are being passed because as soon as you hard code a resolution it works across the board... All browsers are good.
o=document.viewport.getWidth();
u=document.viewport.getHeight();
are the varibles that you must change... I changed mine to:
o=1280;
u=1024;
and it worked like a charm.
Cheers!
Scott -
0 margins and 0 padding still not displaying correctly in Internet Explorer
Hi I have designed a page for my site that works perfectly in safari and firefox but of course in internet explorer it doesn't. The content under the slideshow is meant to line up with the edge of the slideshow. This is the linkhttp://www.kimberleywebdesign.com.au/Links.html.
The divs and the tags within them, have 0 margins and 0 padding with the exception of top and bottom padding, so even if internet explorer doubled my margins - double nothing is nothinng ?? I am trying to understand why the problem occurred?My understanding is that IE misinterprets text-align:center in the #wrapper div.
Change:
#wrapper {
width:48.75em;/*780px*/
margin: 0 auto;
text-align:left;}
to
#wrapper {
width:48.75em;/*780px*/
margin: 0 auto;
text-align:center;}
Then add text-align: left to each div where the text needs to be left aligned
e.g.
#portfolio {
margin:0 auto;
padding:2em 0 0 0;
width:680px;
text-align:left}
and so on. Worked OK for me in IE8.
See: http://www.andybudd.com/archives/2004/02/css_crib_sheet_3_centering_a_div/
Add this tip, taken from the link above, for good measure:
"This gets IE up to scratch. However this is the step I always forget. In Mozilla, if you reduce the size of the browser window, half of your centred div hangs off the left of the page. This is an odd one, but I've been reliably informed that it's the correct behaviour. To prevent this, just set a min-width on the body tag." -
Spry Horizontal Menu not displayed correctly in Internet Explorer 6
Hello to everyone. I'm creating a website using David's tutorial. My Spry Horizontal Menu is correctly shown in Dreamweaver Live View, Firefox10 but not in IE6. It happears at the bottom of the page. Any advise? Thanks much in advance. Cecilia
Hello Cecilia,
please have a look here: http://gs.statcounter.com/#browser_version-ww-monthly-201201-201202-bar where you can see that this browser (IE6 ) is no longer in use and might not be used anywhere anymore.
And so you should not worry about this. But if it does please send a link to your website in question.
... and what's about the newer IE?
Hans-Günter -
Navigation Drop Down Menu Does Not Appear Correctly with Internet Explorer.
Website was designed with Dreamweaver CS5 on a Mac. The navigation drop down menu does not appear correctly with Internet Explorer. When you mouse over a navigation option that has a drop-down menu, the drop-down portion appears on top of the first level. Hope someone can help me out.Thanks!
http://www.catchaghosttoursofkansas.comHi,
and you should then iron out this minor inaccuracy, which I found in your source code, for example here:
<div align="center"><a class="MenuBarItemSubmenu" href="hays.html">HAYS</a>
<ul>
<li><a href="hayswalkingtour.html">Walking Tour</a> </li>
<li><a href="forthays.html">Fort Hays</a></li>
</ul>
All your "first" entries have to show a '#", like this:
<div align="center"><a class="MenuBarItemSubmenu" href="#">HAYS</a>
<ul>
<li><a href="hayswalkingtour.html">Walking Tour</a> </li>
<li><a href="forthays.html">Fort Hays</a></li>
</ul>
</div>
after that you can link to the individual subgroups. See here e.g. (screenshots from my German DW):
Hans-G. -
Mc-icons not sized correctly in Internet Explorer
The file icons used by Sun One Web Server 6.1 (/mc-icons) to indicate file types do not display correctly when a directory does not have an index or default file, and the web server automatically creates an index that includes these icons and shows the directory contents. The icons representing the files appear correctly sized in Netscape Navigator 4.7 browser, but appear to shrink beyond visible resolution in Internet Explorere 6.0 browser. Fancy indexing (common) is being used. Platform is Windows 2000 Server, also running SSL3 and ColdFusion 7.0. How can we get the icons to display at a visible size in Internet Explorer? The result appears to the user as if the icon graphics are missing, but they are indeed called correctly by the page and the path to them is set correctly. I have verified that the graphics are OK on the server and are sized correctly when viewed in an image editor.
Are you sure the problem is the size of the icons? Beginning with version 6.0.2900.2190, Microsoft Internet Explorer stopped displaying the Web Server /mc-icons GIFs. This regression was apparently a side effect of Microsoft's attempts to fix IE's handling of malicious image files.
Apart from not using the buggy versions of IE, I'm not aware of a simple fix. I suspect a future Web Server 6.1 service pack will include a work around for the IE bug, but probably not until 6.1SP7.
I've added tweaked icons to my blog at http://blogs.sun.com/elving?entry=directory_listing_icons_and_ie that IE will display properly. You may wish to copy these into your ns-icons directory. -
Page built with a table does not display well in Internet Explorer.
In Chrome and Safari it appears correctly (items are left justified in each column) while in Internet Explorer all columns are centered. Website is www.eventpowerli.com and it is the home page where we have the issue. I am new to building websites so please bear with me on this question: -) Let me know if you need addnl info. From what I have seen thus far, IE is a real problem child for more than one reason
Honestly do not use tables for your site layouts. There is a variety of box model issues and more with IE, especially with using tables. And it is really bad form to design that way anyway.
Tablless web design using CSS is the way it should be done and if you conform to web standards and CSS standards and best practises you will have less issues.
http://girlswhogeek.com/tutorials/2006/create-a-tableless-css-layout Just as a basic example. -
Charts not displaying properly in Internet Explorer
I have a component that takes in an xml formatted set of
charting data and displays it in both chart form and in a data
grid. In internet explorer I occasionally see spikes in the lines
on my chart. It basically appears that the points are either being
plotted higher or lower than they should be at random places. I
have checked the xml input data and it appears to be correct. Also,
the same data the chart is using is being displayed in a data grid.
The data grid shows the correct values as well.
So it appears that my xml data and the values in the data
grid are correct, however the chart does not match. This is
sporadic behavior. Most of the time, my charts are displayed
correctly, however occasionally one or more data point will be in
the wrong spot. Also, this only happens in internet explorer. I
can't seem to reproduce it in Firefox.
Has anyone seen anything like this? Any ideas on how to fix
it?
I appreciate any help. Thanks,That's exactly what IE conditional comments do. They are ignored by all other browsers except IE. And you must add the <![endif]--> or it won't be treated as an IE Conditional Comment.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IE-only.css" media="screen" />
<![endif]-->
Also, I see errors in your IE only css file. It must not contain HTML code.
@charset "UTF-8";
/* CSS Document */
<style type>
#Buy_DVD_Movie_Button a img {
float: left;
padding-left: 345px;
#DVD_verbage li {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
margin-right: 250px;
list-style: none;
float: none;
#Download_verbage li {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
margin-left: 710px;
list-style: none;
</style>
Nancy O -
Servlet output not displayed properly in Internet Explorer
Hi All,
I'm developing a servlet which uploads a file. After the servlet parses the request body, it stores the file contents as a binary string in the database. While displaying the contents of the attached file, the IE(Internet Explorer) is ignoring all the newlines and spaces. IThe same uploaded file when viewed through Firefox browser is being displayed properly. I've added some debug statements to print the filecontent before sending it to servlet output stream. They look exactly as they were in the uploaded file. The MIME type is application/octet-stream.
I've also made the response to accept "ISO-8859-1" and "UTF-8" charsets, yet the IE is not rendering the file contents properly. The code looks like this,
response.setContentType("text/html; charset= ISO-8859-1, UTF-8");
byte[] buff = attachment.getAttachObject();
OutputStream out = response.getOutputStream();
out.write(buff);
out.close();
I've tried using PrintWriter also. I've tried changing the content types, character encodings of request and response objects, still couldn't resolve the issue. What really baffles me is that when it's displaying properly in Firefox, why can't it render properly in IE? I'm using Win XP SP2, and IE version is 6.0.29. The content which is being sent to the output stream contains newline and space characters, but they are not displayed in the browser. Did any one face this sort of issue? Your help is highly appreciated.
Thanks,
Tarun.Hi,
Thanks for looking into the issue. Let me tell you that I've tried keeping various content-types like text/plain, text/xml etc, but in none of those cases the IE rendered the output properly. But with the same content-type i.e text/html or text/plain, Firefox is able to render the file content properly. I've tried a brutal force approach like below,
response.setContentType("text/plain");
PrintWriter out = response.getWriter();
String str = new String(attachment.getAttachObject());
char[] buff = str.toCharArray();
for(i=0;i< buff.length; i++)
int n = (int)buff;
if(n == 10)
out.println();
else
out.print(buff[i]);
out.close();
I was trying to print a newline whenever I find a newline character in the file content. Even this didn't work. Please suggest me some way to get rid of this problem. -
PhoneGap Build Dreamweaver Extension not displaying correct build state
Starting yesterday the PhoneGap Build Dreamweaver Extension doesn't display the correct build state for Android or Symbian after clicking "Rebuild Application". They always show as Build Queued but if you look at the build.phonegap.com site they have completed the build. I have tried loging out of the screen and logging back in. I have tried closing out of Dreamweaver and reopening. Both sections display correctly until the next time you hit "Rebuild Application".
Ok.
I backed up PGB and deleted the folder.
I created a new empty site and submitted it to Build. Once I reached the Key screen asking for your iOS, Android and Blackberry keys, I clicked continue and recieved the attached error.
I then clicked ok and it added a index.html and config.xml to the empty site. No matter how many times I clicked OK this error would not go away. So then I closed out of dreamweaver and reopened submitted the build again this time I made it past the Key screen but it said I had exceeded the number of Build projects I am allowed. A Project Settings file was never created for the new empty project.
I will send the Project Settings file for the project I am having issues with and the original PGB and the new PGB. -
Site created on Mac not loading correctly in Internet Explorer or Firefox
I am having HUGE problems getting a site to view properly in
IE or Firefox.
It works just fine in Safari and I am using Dreamweaver on a
MAC to create the site.
Can anyone PLEASE help???Sure, we'd be glad to help. Maybe you could tell us the url
so we could see for ourselves.
Maybe you are looking for
-
Acrobat 9 Export to Word Crashes or Corrupt
I downloaded Acrobat 9 Pro to evaluate before upgrading from 8.1. If I Export a PDF to Word, it converts the doc and looks fine until I get to the last two pages of the Doc file. Then it locks up Word (every time). If I try to batch Export Multiple F
-
Invalid Annotation Object - Adobe 8.1.3 Professional
I received this error on a document. It popped up and stay there even after I clicked it several times. Once I got past two pages it would go away. We use checkmarks, would one of these be causing this issue or perhaps a page was added incorrectly? A
-
The product distribution file could not be verified. It may be damaged or was not signed. is tge message I recieved trying to download Maverick, can you help? Regards Andy Dickson
-
Unable to start debugging on local(development) machine
Hi, I have visual studio 2013 installed in my machine. From Yesterday, I keep getting unable to start debugging whenever I hit start button (F5) in visual studio. Any help will be appreciated.
-
Burning pb: bad results in some CD players. How can I avoid
Hi, I use ITunes 5.0 and burn CDs to listen in my car. Bought music CD play well. ITunes burnt CD let hear scratches especially from the middle. No scrtaches are heard in my CD player at home (a regular one, not sophisticated at all). I therefore sus