PDA

View Full Version : Total frustration, Spry Sub Menu jumps to top of page in IE 7.


gc_63
01-25-2011, 10:03 PM
I am a newbie to Divs and spry menus, tring to put together a site for the local sports club. Have created a spry menu and have problems in IE browsers. In IE 7 the sub menu jumps to the top of the page. In IE 8 the submenu covers the main button/menu when you hover over it, instead of dropping down, also side image next to spry menu jumps out of Div. Works fine in Firefox. Have upgraded Spry to 1.61. Here is address of site http://www.pascoevalesc.org.au/.
Help a very Frustrated person.


CSS:

@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #161616;
height: auto;
width: 900px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.twoColFixRtHdr #container {
width: 900px; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
background-color: #000000;
float: left;
height: auto;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.twoColFixRtHdr #header {
background-color: #000000;
float: left;
height: auto;
width: 900px;
margin: 0px;
padding: 0;
}
.twoColFixRtHdr #header h1 {
margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
background-color: #000000;
float: left;
height: auto;
width: 900px;
padding: 0px;
}
.twoColFixRtHdr #sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 150px;
background-color: #000000;
padding: 0px;
height: auto;
}
.twoColFixRtHdr #mainContent {
background-color: #000000;
float: left;
height: auto;
width: 740px;
margin: 0;
padding: 0;
}
#maincontentbottom {
background-image: url(../images/bottom-maincontent.gif);
background-repeat: no-repeat;
float: left;
height: 33px;
width: 647px;
margin-left: 50px;
}

#panthernewstop {
float: left;
height: 31px;
width: 647px;
background-image: url(../images/top-maincontent.gif);
background-repeat: no-repeat;
margin-left: 50px;
margin-top: 120px;
}
#panthernewsmid {
background-color: #000000;
float: left;
height: auto;
width: 623px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #c6c4c4;
border-right-color: #c6c4c4;
border-bottom-color: #c6c4c4;
border-left-color: #c6c4c4;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 51px;
padding-top: 0px;
padding-right: 11px;
padding-bottom: 0px;
padding-left: 10px;
}

#panthernewsbottom {
background-image: url(../images/bottom-maincontent.gif);
background-repeat: no-repeat;
float: left;
height: 37px;
width: 647px;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 50px;
}
#sponsormaincontent {
background-color: #000000;
padding: 0px;
height: 74px;
width: 549px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-right-width: 0px;
border-left-width: 0px;
border-right-style: 0;
border-left-style: 0;
border-top-width: 0px;
border-bottom-width: 0px;
border-top-style: 0;
border-bottom-style: 0;
}


.twoColFixRtHdr #footer {
background-image: url(../images/footer.png);
background-repeat: no-repeat;
height: 129px;
width: 850px;
padding: 0;
float: left;
margin-left: 20px;
}
.twoColFixRtHdr #container #footernav {
float: left;
height: 50px;
width: 850px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
color: #999999;
margin-top: 40px;
margin-right: 20px;
}

.twoColFixRtHdr #footer p {
height: 129px;
width: 850px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 50;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
#3tabdiv {
background-color: #151515;
float: left;
height: auto;
width: 740px;
margin-top: 100px;
margin-bottom: 100px;
margin-left: 90px;
}

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.Title { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#panthernewsrow1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
background-color: #000000;
float: left;
height: auto;
width: 280px;
margin-top: 10px;
margin-left: 10px;
}
#panthernewsrow2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
background-color: #000000;
float: right;
height: auto;
width: 280px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.twoColFixRtHdr #container #mainContent #panthernewsbottom {
background-color: #000000;
margin: 20px;
float: left;
height: auto;
width: 700px;
}
.twoColFixRtHdr #container #mainContent #panthernewsmid #panthernewsrow1 .headtitles.style4 .style4 {
font-size: 16px;
font-weight: bold;
}
.twoColFixRtHdr #container #mainContent #panthernewsmid #panthernewsrow2 h2 .body-white {
font-weight: normal;
}

DWcourse
01-26-2011, 02:00 AM
That's the CSS for your web page but not for the Spry menubar. The menu CSS is in the file: /SpryAssets/SpryMenuBarHorizontal.css

You may have updated to Spry 1.61 but your CSS is still from 1.4.

After you fix that you might want to look at:

The Ten Commandments for Editing Dreamweaver’s Spry Menubars (http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php)

And then:

Creating and Customizing Horizontal Spry Menu Bars in Dreamweaver (http://www.dwcourse.com/dreamweaver/spry-menu-bars.php)