July 25, 2008 05:44pm pdt

1. hielo 440,097
2. Kravimir 412,743
3. Steggs 261,200
4. GreenGho... 94,190
5. VirusMinus 93,540
6. TName 85,385
7. zemond 73,885
8. scrathcyboy 72,769
9. glumlun 72,715
10. bluefezteam 64,657
11. jason1178 64,615
12. mplungjan 58,403
13. Rouchie 53,810
14. mreuring 50,639
15. Eternal_S... 47,243

1. VirusMinus 1,300,820
2. Steggs 1,099,790
3. GrandSch... 1,081,204
4. seanpow... 809,340
5. TName 784,768
6. Roonaan 485,352
7. hielo 457,565
8. Eternal_S... 425,220
9. COBOLdi... 415,775
10. Kravimir 412,743
11. mreuring 269,546
12. oceanbeach 262,232
13. Batalf 232,544
14. GoofyDawg 183,739
15. brunobear 180,148

03.09.2008 at 10:45AM PDT, ID: 23226828

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

8.8

Horizontal spry menu bar not aligned with sub menu items in IE7; CSS/Dreamweaver/Spry

Zones: Cascading Style Sheets (CSS), Macromedia Dreamweaver

Tags: css, spry, ie7

In Dreamweaver CS3, if you insert a horizontal Spry menu bar, the top level menu items are aligned left. If you change them to align:center, the sub menu items (which default to left:auto) appear properly in Firefox but not in IE7 (of course...).

If you replace left:auto with position:relative and left:0, the submenu items appear in the right place in both browsers - but their border & background color disappear in Firefox. Close but no cigar... I can't seem to come up with a rule that will satisfy both browsers.

CSS attached. Any help would be much appreciated!

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:

           
           
             /*******************************************************************************
 
 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;
}
/* 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;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: center;
	cursor: pointer;
	width: 120px;
	float: left;
	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: 80%;
	z-index: 1020;
	cursor: default;
	width: 118px;
	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 */
/*IF THIS IS SET TO LEFT:AUTO; SUBMENUS APPEAR PROPERLY IN FIREFOX BUT OFF TO THE RIGHT IN IE7.
IF IT IS SET TO POSITION:RELATIVE; + LEFT:0; SUBMENUS APPEAR IN THE RIGHT PLACE IN BOTH BROWSERS, BUT SHOW NO BORDER OR BACKGROUND IN FIREFOX.*/
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	position:relative;
	left: 0;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	width: 118px;
}
/* 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;
}

           
         

Start your free trial to view this solution

Question Stats

Zone: Web Development

Question Asked By: slovisa

Solution Provided By: shirazti

Participating Experts: 2

Solution Grade: A

Translate:

Loading Advertisement...

20080236-EE-VQP-29 / EE_QW_2_20070628