logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Spry
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 08-12-2011, 08:43 PM   #1
sydesign
 
Join Date: Jan 2011
Posts: 41
Default Spry MenuBar Horizontal turn vertical in IE

I am working on a webs tie currently and the menubar that i made to be horizontal is sacking vertically for my client who has window IE. The site looks fine for me on Mac Safari.

Here is the spry code:

Quote:
<td width="414" height="56"> <ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="/">HOME </a> </li>
<li><a href="Ceiling-Lighting_c_11.html" class="MenuBarItemSubmenu">CEILING LIGHTS</a>
<ul>
<li><a href="Chandeliers_c_1.html" class="MenuBarItemSubmenu">Chandeliers</a>
<ul>
<li><a href="Alabaster-Chandeliers_c_4.html">Alabaster Chandeliers</a></li>
<li><a href="Contemporary-Chandeliers_c_3.html">Contemporary</a></li>
<li><a href="#">Country Cottage Chandeliers</a></li>
<li><a href="#">Crystal Chandeliers</a></li>
<li><a href="#">Swarovski Crystal Chandeliers</a></li>
<li><a href="#">Large Entryway Foyer Lighting</a></li>
<li><a href="#">Mediterranean Chandeliers</a></li>
<li><a href="#">Kid's Room Lighting</a></li>
<li><a href="#">Mini Chandeliers</a></li>
<li><a href="#">Modern Chandeliers</a></li>
<li><a href="#">Old World Chandeliers</a></li>
<li><a href="#">Rustic/Lodge Style Chandeliers</a></li>
<li><a href="#">Tiffany Chandeliers</a></li>
<li><a href="#">Tropical Chandeliers</a></li>
<li><a href="#">Victorian Chandeliers</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Pendants</a>
<ul>
<li><a href="#">Alabaster Pendants</a></li>
<li><a href="#">Contemporary Pendants</a></li>
<li><a href="#">Country Cottage Pendants</a></li>
<li><a href="#">Crystal Pendants</a></li>
<li><a href="#">Crystal Pendants</a></li>
<li><a href="#">Swarovski Crystal Pendants</a></li>
<li><a href="#">Mediterranean Pendants</a></li>
<li><a href="#">Mini Pendants</a></li>
<li><a href="#">Modern Pendants</a></li>
<li></li>
<li><a href="#">Old World Pendants</a></li>
<li><a href="#">Rustic/Lodge-style Pendants</a></li>
<li><a href="#">Tiffany Pendants</a></li>
<li><a href="#">Traditional Pendants</a></li>
<li><a href="#">Tropical Pendants</a></li>
<li><a href="#">Victorian Pendants</a></li>
</ul>
</li>
<li><a href="#">Flush Mount Ceiling Lights</a></li>
<li><a href="#">Semi-Flush Mounts</a></li>
<li><a href="#">Mini Chandeliers</a></li>
<li><a href="#">Mini Pendants</a></li>
<li><a href="#">Grand Foyer Lighting</a></li>
<li><a href="#">Kitchen Island Lighting</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">LAMPS</a>
<ul>
<li><a href="#">Floor Lamps</a> </li>
<li><a href="#">Table Lamps</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Wall Lighting</a>
<ul>
<li><a href="#" class="MenuBarItemSubmenu">Wall Sconces</a>
<ul>
<li><a href="#">Contemporary Wall Sconces</a></li>
<li><a href="#">Country Cottage Wall Sconces</a></li>
<li><a href="#">Crystal Wall Sconces</a></li>
<li><a href="#">Swarovski Wall Sconces</a></li>
<li><a href="#">Mediterranean Wall Sconces</a></li>
<li><a href="#">Kid's Room Lighting</a></li>
<li><a href="#">Modern Wall Sconces</a></li>
<li><a href="#">Old World Wall Sconces</a></li>
<li><a href="#">Rustic Style Wall Sconces</a></li>
<li><a href="#">Stone Mosaic Wall Sconces</a></li>
<li><a href="#">Tiffany Wall Sconces</a></li>
<li><a href="#">Traditional Wall Sconces</a></li>
<li><a href="#">Tropical Wall Sconces</a></li>
<li><a href="#">Victorian Wall Sconces</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Bathroom Lighting</a>
<ul>
<li><a href="#">1-Light Bath Lighting Fixtures</a></li>
<li><a href="#">2-Light Bath Lighting Fixtures</a></li>
<li><a href="#">3-Light Bath Lighting Fixtures</a></li>
<li><a href="#">4-Light Bath Lighting Fixtures</a></li>
<li><a href="#">5 (or more) Lights Fixture</a></li>
</ul>
</li>
</ul>
</li>
</ul></td></tr></table>
and here is the Spry CSS:

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: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: auto;
	color: #856d55;
}
/* 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
{
	list-style-type: none;
	font-size: 13px;
	position: relative;
	text-align: left;
	cursor: pointer;
	float: left;
	width: auto;
	font-family: "gill sans", "Gill Sans Light", "Gill Sans MT Bold", "Gill Sans MT Bold Italic";
	margin: 0;
	background-color: #CCCCCC;
	font-weight: bold;
	text-transform: uppercase;
	color: #856d55;
	border-right-width: 0px;
	border-right-style: solid;
	border-right-color: #856d55;
	padding: 0;
}
/* 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: 1200;
	cursor: default;
	width: 200px;
	position: absolute;
	left: -1000em;
	height: auto;
	font-weight: lighter;
	color: #856d55;
	border: 1px solid #CCC;
}
/* 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;
	background-color: #CCC;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	width: 200px;
	font-weight: normal;
	text-transform: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-size: 13px;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 100%;
}
/* 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
{
	background-color: #999;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #FFF;
	color: #856d55;
	text-decoration: none;
	text-align: left;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #CCC;
	padding-right: 1em;
	padding-top: 0.5em;
	padding-left: 0.5em;
	height: 20px;
}
/* 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: #CCC;
	color: #402408;
}
/* 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: #CCC;
	color: #333;
}

/*******************************************************************************

 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-image: url(SpryMenuBarDown.gif);
	background-repeat: no-repeat;
	background-position: 97% 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-image: url(SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 96% 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-image: url(SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 97% 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
{
	background-image: url(SpryMenuBarRightHover.gif);
	background-repeat: no-repeat;
	background-position: 96% 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;
	}
}
sydesign is offline   Reply With Quote
Old 08-12-2011, 09:33 PM   #2
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

Is the page available online somewhere?
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 08-13-2011, 07:04 AM   #3
sydesign
 
Join Date: Jan 2011
Posts: 41
Default

its located on a temporary site here:

http://discountcrystallighting.3dcartstores.com/

...also the categories under featured categories and featured lighting styles show up blank in IE too...i made them with just regular tables
sydesign is offline   Reply With Quote
Old 08-13-2011, 07:43 PM   #4
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

In the style rule: ul.MenuBarHorizontal li

You have the width set to auto. IE interprets that to mean full width. You need to use an actual value (in pixels, ems, etc) there.

You also have a problem in Firefox (at least a Mac). You're last link wraps to a second line.

Your images are broken because the img tags don't have a src attribute:
Code:
<img name="" width="215" height="120" alt="" style="background-color: #CCCCCC" />
Finally, All those tables are going to cause you no end of problems in the long run.
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 08-14-2011, 04:14 AM   #5
sydesign
 
Join Date: Jan 2011
Posts: 41
Default

is there a way to make each of the tabs not be the same width though? i made them auto i believe because i wanted the buttons to be the size that the words in the button required...

regarding the table and broken image links...

i know the links are not set up yet but i meant on IE on windows i believe, nothing shows up at all...in the space where you would see the boxes and the tables is just a big white space between the title bars "featured categories" and "featured lighting styles"
sydesign is offline   Reply With Quote
Old 08-14-2011, 05:52 AM   #6
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

You can create styles for each list item <li> and apply them on a item by item basis. Be aware that DW's visual editor doesn't let you apply two CSS class rules to the same html object so you'll have to do it in the code.

As for your other issues, you're table structure is so complicated that trying to debug the issue is going to be a nightmare.
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 08-16-2011, 05:38 PM   #7
sydesign
 
Join Date: Jan 2011
Posts: 41
Default

Thank you for your help! I have been working with it and getting rid of the "auto" on that "ul.MenuBarHorizontal li" did work but i would still like to have the buttons be the size that the words in the button required...

I am not too familiar with coding styles for each list item.. could you give me an example of how to do that so i could try and do that for them?

The tables i think i fixed, for some reason the tables were coming up next to the category titles so i just have to add a few break tags and no they show up.

though now they don't all come up the same width in IE for whatever reason. I believe for some reason the long buttons under the pictures on the featured lighting styles area "contemporary/modern" & "Stained Glass/ Tiffany" stretch out far and mess up the width of those boxes, making them not all 25% width like i set them up to be.
sydesign is offline   Reply With Quote
Old 09-03-2011, 02:36 AM   #8
jacksson
 
Join Date: Sep 2011
Location: California
Posts: 2
Default

I had a similar problem today and found this forum on the web discussing the same problem. In that I couldn't find a good answer, I returned to Dreamweaver and checked my file structure. I discovered that the reason that I was having a vertical menu when my code specifically said horizontal was because my Skype Assets folder was in another site file elsewhere. I simply dragged the folder down to the proper site folder and all was well when I checked it on IE, Chrome and Firefox. The one problem that I seem to be consistantly having with Dreamweaver CS5.5 is files and folders getting in the wrong place either through my ignorance or some flaw in the software. Anyway, another lesson learned.
jacksson is offline   Reply With Quote
Old 09-03-2011, 02:41 AM   #9
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

Quote:
Originally Posted by jacksson View Post
The one problem that I seem to be consistantly having with Dreamweaver CS5.5 is files and folders getting the wrong place through my ignorance or through some flaw in the software. Anyway, another lesson learned.
I doubt it's a flaw in DW. That would be major and I think it would have been reported by now.

I suspect you aren't setting up each site correctly and making sure that you are working on the correct site. When you add a Spry menu, DW will always create the Spry Assets folder in the Local Site Folder for the site that you have currently chosen in the Site menu of the Files palette.

If you Spry Assets folder is in the wrong folder:

1. You site set up is wrong OR
2. Your working on a site other than the one you have selected.
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 09-03-2011, 04:45 AM   #10
jacksson
 
Join Date: Sep 2011
Location: California
Posts: 2
Default

I am sure that you are right. I have too many sites on my file menu dealing with the same or similar data and they are getting crossed over when I try to link with the Sprye styles. My fault all the way. I just need to work on one site at a time, close it out completely, and then work on another one. I can also use two separate computers for that matter. Thanks for the information.
jacksson
jacksson is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 10:43 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com