Creative COW SIGN IN :: SPONSORS :: ABOUT US :: CONTACT US
FORUMS TUTORIALS MAGAZINE DVDs BOOKS PODCASTS EVENTS SERVICES NEWSLETTER NEWS BLOGS
WEB: Web Design Forum- TutorialsDreamweaver Forum- TutorialsFlash Forum- TutorialsWeb StreamingTraining

(Another) Spry Menu Alignment/Color IE Problems

Cow Forums : Adobe Dreamweaver
<< PREVIOUS THREAD   •   VIEW ALL THREADS   •   PRINT   •   NEXT THREAD >>
(Another) Spry Menu Alignment/Color IE Problems
by sandy rangs (gosandygo) on Dec 1, 2008 at 6:03:26 pm

Hi. I have some spry menu alignment and color issues in IE. Works ok in Firefox and other browsers and IE has the problem.

Also, not sure how to bring the sub-nav up to close the gap on the rollovers.

Here are the links:
http://fullcircledesignco.com/clients/habitat/website/ (website)
http://fullcircledesignco.com/clients/habitat/SpryMenuBarHorizontal.css (css)

Thanks for your help in advance!



Respond to this post   •   Return to posts index
Re: (Another) Spry Menu Alignment/Color IE Problems
by Richard Williams on Dec 1, 2008 at 8:34:30 pm

What i am tending to find with these is that IE does not like the <div> tag in spry.


 


Try removing the <div>'s from the menu code and see if that works

Richard Williams

Respond to this post   •   Return to posts index

Re: (Another) Spry Menu Alignment/Color IE Problems
by Richard Williams on Dec 1, 2008 at 8:44:18 pm

let me know if this works... (sorry if it doesn't, i rushed it a bit but hopefully you get the idea)





Untitled Document



<!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>Prelim Habitat NYS Site</title>

<style type="text/css">

<!--

.MenuBarHorizontal{

} /* if you use horizontal menu */


body {

background-image: url(images/MainContent_background.jpg);

background-repeat: no-repeat;

background-position: top left;

}

body,td,th {

font-family: Arial, Helvetica, sans-serif;

}

-->

</style>


<style type="text/css">

<!--

.style1 {

color: #005596

}

-->

</style>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

</head>


<body>

<ul id="MenuBar1" class="MenuBarHorizontal">

<li align="center"><a href="#">HOME</a>

</li>

<li align="center"><a class="MenuBarItemSubmenu" href="#">ADVOCACY</a>

<ul>

<li align="left"><a href="#">Public Policy</a>

</li>

<li align="left"><a href="#">Legislative Priority</a>

</li>

<li align="left"><a href="#">AIA Media</a>

</li>

</ul>

</div>

</li>

<li align="center"><a class="MenuBarItemSubmenu" href="#">AFFILIATE RESOURCES</a>

<ul>

<li align="left"><a href="#">Training Opps</a>

</li>

<li align="left"><a href="#">Legislative Priority</a>

</li>

<li align="left"><a href="#">Calendar of Events</a>

</li>

</ul>

</div>

</li>

</ul>

<script type="text/javascript">

<!--

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

//-->

</script>

</body>


</html>





Richard Williams

Respond to this post   •   Return to posts index
Re: (Another) Spry Menu Alignment/Color IE Problems
by sandy rangs on Dec 1, 2008 at 8:58:54 pm

Well, it changed a part of the format in IE, but shifted the sub navs; I uploaded to here: http://fullcircledesignco.com/clients/habitat/no_divs_site/
I actually need the sub navs to be absolute so that they won't shift; for design purposes. Also, the color is still changing. In IE instead of having no background color it chooses white as it's value.

Thanks a bunch for helping out!



Respond to this post   •   Return to posts index
Re: (Another) Spry Menu Alignment/Color IE Problems
by Richard Williams on Dec 1, 2008 at 11:01:30 pm

your css, ul.MenuBarHorizontal li does not like the instruction text-align: center; because of the widths of the bars.

changing it to text-align: left; sorts out your sub menu.

Also, what you are doing here is telling the text to align in the HTML as well as in the CSS which will cause problems.

<!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>Prelim Habitat NYS Site</title>

<style type="text/css">

<!--

.MenuBarHorizontal{

} /* if you use horizontal menu */


body {

background-image: url(images/MainContent_background.jpg);

background-repeat: no-repeat;

background-position: top left;

}

body,td,th {

font-family: Arial, Helvetica, sans-serif;

}

-->

</style>


<style type="text/css">

<!--

.style1 {

color: #005596

}

-->

</style>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

</head>


<body>

<ul id="MenuBar1" class="MenuBarHorizontal">

<li><a href="#">HOME</a>

</li>

<li><a class="MenuBarItemSubmenu" href="#">ADVOCACY</a>

<ul>

<li><a href="#">Public Policy</a>

</li>

<li><a href="#">Legislative Priority</a>

</li>

<li><a href="#">AIA Media</a>

</li>

</ul>

</div>

</li>

<li><a class="MenuBarItemSubmenu" href="#">AFFILIATE RESOURCES</a>

<ul>

<li><a href="#">Training Opps</a>

</li>

<li><a href="#">Legislative Priority</a>

</li>

<li><a href="#">Calendar of Events</a>

</li>

</ul>

</div>

</li>

</ul>

<script type="text/javascript">

<!--

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

//-->

</script>

</body>


</html>


aught to sort it out.

Richard Williams

Respond to this post   •   Return to posts index

Re: (Another) Spry Menu Alignment/Color IE Problems
by Richard Williams on Dec 1, 2008 at 11:14:28 pm

oh and the background colour...

delete the line at bottom of css
ul.MenuBarHorizontal li.MenuBarItemIE
background: #FFF;

and

ul.MenuBarHorizontal ul

background-color: #FFFFFF;

Then they will be transparent

Richard Williams

Respond to this post   •   Return to posts index
Re: (Another) Spry Menu Alignment/Color IE Problems
by sandy rangs on Dec 1, 2008 at 11:38:47 pm

Brilliant. Works just as I expect now and I actually know why. Thank you Richard.



Respond to this post   •   Return to posts index
<< PREVIOUS THREAD   •   VIEW ALL THREADS   •   PRINT   •   NEXT THREAD >>


FORUMS • TUTORIALS • MAGAZINE • DVDs • BOOKS • PODCASTS • EVENTS • SERVICES • NEWSLETTER • NEWS • BLOGS

© CreativeCOW.net All rights are reserved.

[Top]