Spry Navigation Bar going wrong way in IE
I have horizontal navigation bar through spry in Dreamweaver. In all other web browsers, my first level of drop down menus go directly down from the main menu items. In IE they go directly right! Does anyone know what I can do to fix this problem and quickly. My final presentation is Tuesday. I am new to all this and I don't have the foggiest how to fix it! Thanks in advance for any and all assistance with this matter!!!!!!
It would be a lot easier to answer your question if you had a link to your site or at the very laest showed your markup.
I assume that you have made the menu item widths as being auto rather than a fixed width in which case IE will use the full width available to show the submenu items.
To counteract this you need the following style rules
ul.MenuBarHorizontal ul li {
display: block;
float: none !important;
width: auto;
white-space: nowrap;
border-bottom: solid 1px #EEE;
The !important overrides the style rule that is given the element by the JS.
Gramps
Similar Messages
-
I'm new to dreamweaver CS5 and have created a new spry navigation bar. Is there a way to create one generic navigation bar to be used in several different pages so when I have to update the menus, I don't have to change each spry navigation bar for each page. Basically one main navigation bar to be used in several different pages w/out having to create a nav bar for each page.
See here http://foundationphp.com/tutorials/sprymenu/ssi.php
Gramps -
Spry navigation bar covers flash movie beneath it but not the jpg image, why?
i have a spry navigation bar with a flash movie underneath,
and when i hover over the navbar and the submenu pops down it
covers the flash movie, but it doesn't cover the .jpg image that is
next to the flash movie. how can i fix this? thanks.thanks for the reply Murray, a responder from the flash forum
gave me the following answer and it worked perfect.>>
The <object> and/or <embed> HTML elements that
reference your Flash content accept a number of optional
parameters. For the <object> element, these parameters are
supplied via nested <param> elements. Simply add the
following new <param>:
<param name="wmode" value="opaque">
The <embed> parameters are supplied via attributes. For
the <embed> element, add the following new attribute:
wmode="opaque"
That’s it. Your Flash content is now stackable via
z-index; for example, you may wrap your
<object>/<embed> pair in a <div> and set the
<div>’s z-index as you please.
<div style="position: absolute; z-index=1;">
<object attributes >
<embed attributes />
</object>
</div>
If you’re using Dreamweaver, just press the Parameters
button in the Insert > Media > Flash dialog or in the
Property inspector when selecting existing Flash content. Type
“wmode” (without quotes) in the name/parameter column
and “opaque” (without quotes) in the value column. That
will handle the above HTML for you, even with the new JavaScript
embedding available since the 8.0.2 update. -
Spry Navigation Bars - Make them look GOOD
Have Dreamweaver CS4 PC
Using the plain gray spry navigation bars...im somewhat
new...
Question:
Is there any company that sells or Free to "Change the Look"
of the nav bars easily?
I might w ant to change colors, make rounded edges, make type
smaller, compact specing some, adjust the length.
Does someone have a plugin or extension that works
interactively??
Thanks
Ive searched with little results on customizing spryA more full-featured menu building tool, with lots of styles:
http://www.projectseven.com/products/menusystems/pmm2/carbon.htm
Another nice menu builder, with lots of styles. Because there
are no timers,
I would recommend these for single-level menus or for menus
with a single
sub-menu level:
http://www.webassist.com/professional/products/productdetails.asp?PID=146
Neither is free.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System
"suzzie12" <[email protected]> wrote in
message
news:gmq9u2$mfl$[email protected]..
> Have Dreamweaver CS4 PC
>
> Using the plain gray spry navigation bars...im somewhat
new...
>
> Question:
>
> Is there any company that sells or Free to "Change the
Look" of the nav
> bars
> easily?
>
> I might w ant to change colors, make rounded edges, make
type smaller,
> compact
> specing some, adjust the length.
>
> Does someone have a plugin or extension that works
interactively??
>
> Thanks
>
> Ive searched with little results on customizing spry
> -
After updating to mavericks, facebook will only load once in a while. The blue bar goes part way and just stops and does nothing. Never had this problem before. So far facebook is the only site I have had a problem with.
You can also try to disable hardware acceleration in Firefox.
*Tools > Options > Advanced > General > Browsing: "Use hardware acceleration when available"
*https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes
*https://hacks.mozilla.org/2010/09/hardware-acceleration/ -
Centering a Horizontal CSS only, jQuery, or Spry navigation bar within a Div
Hello all. I need a solution for centering a horizontal style nav bar whether it be css only, jQuery or Spry based. I've been trying to use widgets from the adobe widget browser or other ones I've been able to find online. I have been able to get the graphic that goes behind the links to span the entire width of the Div, but I can't move the actual links to the center of the screen and get it to stay in the middle like the rest of the elements do when you resize the page. The links always stay anchored to the left side of the page. I've been able to move them all the way to the right side of the page through a certain css change, but that is not what I'm looking for. Do I need to resize the Div, or add a div within the div? Do I need to split the horizontal width of the single div into three div's and put the nav bar into the middle one? If that is the solution, how do I add the div's next to each other, I tried adding a div within the div, but nothing really appears to show up, so that must essentially be a wrong way of going about it.
Well anyways, I need some advice, somebody please lead me in the right direction on how to get this right. In the div above the one I'm trying to make this happen in, I have a flash object and it just centers itself perfectly with the div and moves with the rest of the page fluidly when you resize. And the same goes for a div right above that which contains the company logo.
Thanks for help in advance.This is what I mean by the dotted lines not lining up evenly at the ends.
Here is the source code for the page, followed by the css:
<!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 name="description" content="Common Wealth Web Solutions: Web Development, Graphic Design, Media Consultant, Community Engagement" />
<meta name="keywords" content="Common,Wealth,Web,Solution,Design,Graphic,Development,Interactivity,services,fla sh,php,javascript,ajax,professional,Caleb Wright, Peter Wallis,artist,video,multimedia,production,search engine optimization,SEO,video production design" />
<meta http-equiv="Content-Type" content="text
/html; charset=UTF-8" />
<title>Common Wealth Web Solutions: Web Development, Graphic Design, Media Consultation, Community Engagement</title>
<link href="stylesMain.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="PNGfix.css" />
<![endif]-->
<!--[if lte IE 7]>
<style type="text/css">
#hornav ul li { padding: 0 0 0 10px; }
</style>
<![endif]-->
<!--[if lte IE 6]>
<style type="text/css">
#wrapper-body, #wrapper-1, #wrapper-2, #wrapper-3 { height: 1%; }
</style>
<![endif]-->
<script type="text/javascript" src="scripts.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css">
#apDiv1 {
position:absolute;
width:1844px;
height:43px;
z-index:1;
left: 64px;
top: 253px;
body {
background-color: #FFF;
</style>
<link href="SpryAssets/SpryAccordion_flexible.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:link {
color: #00F;
</style>
<style type="text/css">
#menu {
width: 700px;
margin: 0 auto;
#menu ul {
padding: 0;
margin: 0;
text-align:center;
list-style:none
#menu li{
padding: 0;
margin: 0;
display:inline;
margin-right: -2px;
#menu a {
background-color:#66F;
padding: 6px 15px;
color: #fff;
text-decoration: none;
#menu a:hover {
background-color:#39C;
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-5']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-6']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<link href="CSSOnlyMenu4/css/menu4.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2141545: #OAWidget */
#menu4 ul {
font-family: Verdana, Geneva, sans-serif;
font-size: 30px;
letter-spacing: -3px;
border-top:5px dotted #003399;
border-bottom:5px dotted #003399;
margin:20px;
#menu4 ul li a{
color: #003399;
padding: 10px 5px 10px 10px;
width: 170px;
#menu4 ul li a:hover span.title{
color:#00adef;
#menu4 ul li a span.text{
font-family: Georgia, serif;
font-size: 13px;
color:#c7e7f3;
/* EndOAWidget_Instance_2141545 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2141545" binding="#OAWidget" />
</oa:widgets>
-->
</script>
</head>
<body>
<div id="wrapper-body">
<div id="wrapper-1">
<div id="branding">
<h1>
<div>
<p><img src="images/lorentzpaintinglogo_cropped2.png" width="317" height="110" alt="Lorenz Painting Co." longdesc="http://www.lorenzpainting.com" /></p></div>
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="700" height="250" id="FlashID" title="Lorenz Painting Co Flash Widget">
<param name="movie" value="LorentzBanner.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="LorentzBanner.swf" width="700" height="250">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</h1>
<div>
<div id="menu4">
<ul>
<li><a href=""> <span class="title">Home</span> <span class="text">Why us?</span> </a> </li>
<li><a href="">Services<span class="text">What we do</span> </a> </li>
<li><a href=""> <span class="title">Testimonials</span> <span class="text">What they say</span> </a> </li>
<li><a href=""> <span class="title">Contact</span> <span class="text">How to get in touch</span> </a> </li>
</ul>
</div>
<p> </p>
<p> </p>
<p> </p>
</div>
<div></div>
</div>
<div id="wrapper-2">
<div id="content-top" class="png"></div>
<div id="wrapper-3">
<div id="content-1">
<div class="content-wrap">
<p>Home</p>
<p>Contact</p>
</div>
</div>
<div id="content-2">
<div class="content-wrap">
stuff
<p> </p>
</div>
</div>
<div id="content-bottom"></div>
</div>
<div id="footer">
<p><strong>Lorentz Painting Co., 2011</strong><strong></strong></p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
jQuery("#jQueryUIAccordion").accordion({
event: "click",
collapsible: false,
autoHeight: true
</script>
</body>
</html>
Be forewarned, there are a bunch of rules in here that don't apply to anything anymore, as it's from a recycled rules from another site I built. Sorry.
I will first put the CSS for the main style sheet, and I will put the CSS for the Horizontal Nav Bar in after.
CSS:
Main style sheet:
@charset "UTF-8";
body
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.2em;
color: #6B6B6B;
background: #8D927C url(images/bg_body.jpg) repeat-x;
margin: 0;
padding: 0;
min-width: 800px;
text-align: center;
background-color: #000;
h2, h3, h4
font-size: 16pt;
font-weight: normal;
margin: 15px 0 0 0;
#wrapper-3 p
padding: 0;
line-height: 1.35em;
margin-top: 8px;
margin-right: 0;
margin-bottom: 8px;
margin-left: 0;
#wrapper-3 ul
list-style-type: none;
margin: 8px 0;
padding: 0;
#branding
margin: 0 0 0 0;
@Generic anchor (link) styles
a:link, a:visited
color: #4f4f3f;
a:hover, a:active
color: #000000;
@Inline image styles
img.float-left
float: left;
margin: 0 6px 6px 0;
img.float-right
float: right;
margin: 0 0 6px 6px;
img.border
background: #FFF;
padding: 2px;
border: 1px solid #999;
@Tab navbar styles
#hornav ul
margin: 0;
list-style-type: none;
line-height: normal;
padding: 0;
text-align: center;
margin-bottom: 60px;
font-size: 0.8em;
text-transform: uppercase;
#hornav ul li
display: inline;
margin: 0 2px 0 0;
padding: 3px 0 3px 10px;
#wrapper-body #wrapper-1 #hornav ul li a br {
height: 400px;
#hornav ul li a
text-decoration: none;
margin: 0;
background-repeat: inherit;
background-position: center center;
padding-top: 50%;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
#hornav ul li a:link, #hornav ul li a:visited
color: #3e3f2f;
#hornav ul li a:hover, #hornav ul li a:active
color: #000000;
@Secondary navigation styles
#navcontainer
background: transparent url(images/bg_navlist-top.jpg) no-repeat top center;
margin: 0;
padding: 12px 0 0 0;
#navcontainer ul
margin: 0;
list-style-type: none;
line-height: normal;
padding: 0 0 12px 0;
border-top: 1px solid #FFF;
background: transparent url(images/bg_navlist-bottom.jpg) no-repeat bottom center;
#navcontainer a
display: block;
padding: 3px 6px;
width: 168px;
margin: 0 10px;
background-color: #c4bfac;
border-bottom: 1px solid #FFF;
#navcontainer a:link, #navlist a:visited
color: #FFF;
text-decoration: none;
#navcontainer a:hover
background-color: #90937e;
color: #FFF;
@Masthead text styles
#branding
margin: 0;
padding: 0;
#branding h1
color: #000;
padding: 10px 0 0px 0;
border-top: 4px solid #656e5d;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.3em;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 28px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
margin: 0;
@Layout styles
#wrapper-body
background: transparent url(images/bg_wrapper-body.jpg) no-repeat top right;
width: inherit;
margin: 0;
padding: 0;
#wrapper-1
width: auto;
background: transparent url(images/bg_wrapper-1.jpg) no-repeat;
margin: 0;
padding: 0;
#wrapper-2
width: 45em;
text-align: center;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
#wrapper-3
background: url(images/bg_wrapper-3.jpg) repeat-y;
color: #333;
text-align: left;
#content-top
margin: 0;
height: 1em;
background: url(images/bg_content-top.jpg) no-repeat;
font-size: 0;
line-height: 0;
#content-1
float: left;
width: 12em;
font-size: 0.9em;
padding: 0;
margin-top: 2em;
margin-right: 2em;
margin-bottom: 0em;
margin-left: 0em;
#content-2
float: left;
width: 40em;
padding: 0;
font-size: 0.8em;
margin-top: 2em;
margin-right: 0px;
margin-bottom: 0em;
margin-left: 0em;
#content-3
float: left;
width: 250px;
font-size: 10pt;
margin: 0;
padding: 0;
#content-4 {
width: 190px;
padding: 0px;
line-height: 0px;
#content-bottom
clear: both;
height: 1em;
background: url(images/bg_content-bottom.jpg) no-repeat;
font-size: 0;
line-height: 0;
.content-wrap
margin: 0;
padding-top: 0px;
padding-right: 2em;
padding-bottom: 5px;
padding-left: 0px;
#footer p
font-size: .75em;
margin: 12px 0;
p.content-wrap {
font-size: 9pt;
color: #999;
@Blog post styles
.date
float: left;
height: 52px;
width: 52px;
background: url(images/date.png) no-repeat;
margin-right: 10px;
padding-top: 0px;
line-height: normal;
.date .month
display: block;
text-align: center;
color: #FFF;
font-size: 11px;
padding-top: 4px;
text-transform: uppercase;
.date .day
display: block;
text-align: center;
padding-top: 5px;
color: #222;
font-size: 18px;
font-weight: bold;
.meta
display: block;
font-size: 11px;
color: #666;
clear: right;
.blog-entry
clear: both;
padding-top: 2px;
#searchform
margin: 8px 0;
padding: 0;
@Search form styles
#searchform fieldset
margin: 0;
padding: 0;
border: 0;
#searchform label
color: #999;
display: none;
#searchform input
width: 160px;
color: #222;
#searchform #submitquery
display: none;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap p {
line-height: 1.35em;
text-align: justify;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-1 .content-wrap #Accordion1 .AccordionPanel.AccordionPanelOpen .AccordionPanelContent p {
line-height: 1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #sprytextarea1 span .content-wrap {
font-size: .5em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website {
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website {
display: none;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website label {
display: none;
#website {
display: none;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
font-size: 1.1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
font-size: 1.1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
font-size: 4em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset .AccordionPanelContent {
font-size: 1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset .AccordionPanelContent {
font-size: 3em;
.fieldname {
font-size: .9em;
CSS for Horizontal Nav Bar:
#menu4 {
width: 829px;
margin: 0 auto 0 auto;
#menu4 ul {
list-style:none;
font-family: Helvetica, Arial, sans-serif;
font-size: 30px;
letter-spacing: -3px;
line-height: 1.2em;
border-top:5px dotted #c7e7f3;
border-bottom:5px dotted #c7e7f3;
float:left;
clear:both;
margin:20px;
text-align:center
#menu4 ul li{
float:left;
#menu4 ul li a{
display:block;
text-decoration:none;
padding:10px 10px 5px 10px;
color:#66b8d8;
width:170px;
#menu4 ul li a span{
display:block;
#menu4 ul li a span.title{
#menu4 ul li a:hover span.title{
color:#00adef;
#menu4 ul li a span.text{
padding:0px 5px;
font-family: Georgia, serif;
font-size: 13px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.6em;
color:#c7e7f3;
visibility:hidden;
#menu4 ul li a:hover span.text{
visibility:visible;
Thanks! -
How do I get rid of the white space between my header and my spry navigation bar?
I have been grappling with a problem for the past 2 days and cannot seem to work my way around it. I have been working on a page in dreamweaver cs4 that seems to have whitespace between the header and my spry menu bar ONLY in Firefox. Google Chrome and Safari show it correctly. Could you steer me in the right direction for getting rid of that space. Here is the page: http://www.margaritascafe.com/margaritas_layout.html
Here is my code and thanks in advance for your help:
<!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>
<link href="margaritastyles.css" rel="stylesheet" type="text/css" />
<script src="Margaritas_temp_spry/SpryMenuBar.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="Margaritas_temp_spry/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="250" id="FlashID" tabindex="10" title="Margarita's Cafe header 2">
<param name="movie" value="flash_movies/Margaritas Header 3.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flash_movies/Margaritas Header 3.swf" width="1000" height="250">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<div id="navigation">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Menus</a>
<ul>
<li><a href="#">Lunch</a></li>
<li><a href="#">Dinner</a></li>
<li><a href="#">Cocktail</a></li>
<li><a href="#">Take Out</a></li>
</ul>
</li>
<li><a href="#">Photos</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Catering</a>
<ul>
<li><a href="#">Private Parties</a></li>
</ul>
</li>
<li><a href="#">Reservations</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Directions</a></li>
</ul>
</div>
<div id="maincontentlayout3">Content for id "maincontentlayout3" Goes Here</div>
<div id="specials"><img src="png-gif-jpg/Tuesday Night Banner.jpg" width="200" height="70" alt="Margarita's Tuesday Night Special" /><img src="png-gif-jpg/Wednesday Banner.jpg" width="200" height="70" alt="Wednesday 2 for 1 dinner special at Margarita's" /><img src="png-gif-jpg/Thursday Banner.jpg" width="200" height="70" alt="Ladie's Night Thursdays at Margarita's Cafe" /><img src="png-gif-jpg/Friday Banner.jpg" width="200" height="70" alt="TGIF Happy Hour on Friday's at Margarita's Cafe" /><img src="png-gif-jpg/Sunday Banner.jpg" width="200" height="70" alt="Sunday Kids Eat Free at Margarita's Cafe!" /></div>
<div id="footer"><img src="png-gif-jpg/Margaritas Facebook logo.png" alt="Facebook" width="40" height="25" align="absmiddle" /> <img src="png-gif-jpg/Margaritas Twitter logo.png" alt="Twitter Logo" width="40" height="25" align="absmiddle" /><img src="png-gif-jpg/merchantcircle_mini.png" alt="Merchant Circle Logo" width="63" height="25" align="absmiddle" /></div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"Margaritas_temp_spry/SpryMenuBarDownHover.gif", imgRight:"Margaritas_temp_spry/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>CSS:
#navigation {margin-top: -3px;}
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Windows Explorer Navigation Bar goes missing
I am suddenly experiencing the navigation bar (is it called the navigation bar?) in Windows Explorer going missing as shown below for two different instances of Windows Explorer in the same session:
It seems in one instance that bar has shrunk to just a thin box.
I tried and tried but couldn't find any option to turn it back on. Any tips?
Thanks.Hi,
I would like to verify when did this issue occurred? Have you tried to perform a
system restore to see the result?
Meanwhile, I suggest you try the following:
1. Test the issue in
Safe Mode and Clean Boot mode.
2. Use the
System File Checker tool to scan the system files.
3. Create a new user account to see how it works.
Regards,
Vincent Wang
If you have any feedback on our support, please click
here
Vincent Wang
TechNet Community Support -
Spry Menu Bar renders wrong in IE
My horizontal spry menu bar looks great in all browsers but IE. Even though I have fixed widths on the submenus, it creates a huge container box that takes up the width of the screen in IE. PLEASE -- I'm desperate!!
www.ohemaalxi.com
Here is the spry css.
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;
list-style-type: none;
font-size: 100%;
cursor: default;
padding-left: 55px;
padding-top: 50px;
width: 850px;
/* 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: 1030;
/* 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: 75%;
position: relative;
text-align: left;
cursor: pointer;
width: 160px;
float: left;
color: #333;
/* 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: 120%;
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
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
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%;
ul.MenuBarHorizontal ul ul li {
font-size: 85%;
/* 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;
background-color: #FFF;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #fff;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
font-size: 100%;
/* 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: #fff;
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: #DADADA;
color: #FFF;
width: 140px;
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%;
text-align: left;
/* 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: 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-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
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 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;Although, I did download IE-Tester which allows you to test in different IE versions and it does not seen to work there?
IE-tester shows that you have got a problem 0n line #102. Unfortunately, the tester cannot be relied upon reflecting the correct line number. There is a problem on line #27 where there is no space in front of "type="
<script src="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js"type="text/javascript"></script>
and line #86 where there is no space before "rel="
<link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVertical.css"rel="stylesheet" type="text/css" />
Now for my next problem, and if I can get this working I should be in fairly good shape. I had made some formatting changes (centered the menu bar, and made some color changes) See below, however those are now not working..Normally, when a question has been answered, it is marked as correct and any new questions are asked in a new post.
However, you caught me in a good mood, just signed contracts for three new projects one as far away as Switserland.
Lines #27 and #28 look like
<script src="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js"type="text/javascript"></script>
<link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
Lines #84 and #86 look like
<script src="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js" type="text/javascript"></script>
<link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVertical.css"rel="stylesheet" type="text/css" />
This may not confuse the browser, but it is not very conducive. Remove either set of links.
When I look at SpryMenuBarVertical.css
change the value of line 16 to auto, has not been done
starting at line 81, change the highlighted values, has not been done
So it is no wonder there are no changes.
Gramps -
Spry Menu Bar goes to left of screen
I've done a horizontal Spry Menu Bar and drop down menu on one of the menu buttons.
When I roll over this, the entire Menu Bar drops down to the left hand side of the screen in a vertical format - would anyone know why?
I'm a complete newby to this, so small words is appreciated LOLHi,
Can you post a link to your problem page.
Regards
Manoj -
Spry horizontal menu goes wrong in Internet Explorer
I have designed the start of a site and the client is pleased, except that for some reason the Spry menu goes bananas in Internet Explorer 8. I have checked it in Safari, Opera, Firefox and Chrome and it looks fine. Earlier in the design process I was having some issues with a gap at the end of the horizontal menu, but with persistance I managed to cure this. According to DreamWeaver there is an issue with line 70 of the CSS file :-
#footer {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #FDCB00;
background-color: #333;
height: 30px;
width: 900px;
position: fixed;
bottom: 0px;
text-align: center;
padding-top: 9px;
letter-spacing: .3em;
border-top-width: thin;
border-top-style: ridge;
border-top-color: #999;
.... but I can't see what is wrong with this. This relates to the footer which ironically behaves fine. I have just upgrade IE8 to IE9, but this hasn't helped.
I am fairly desperate to finish this site but can't until I find what is wrong. I've not seen this problem before and the DW diagnosis isn't helping me.
Here's a link http://www.tattoo-bristol.co.uk/
Any pointers would be much appreciated.
Thanks
Ralph
Vision DesignHave a look at the following piece of code in your modified CSS file
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);
background-color: #000;
/* 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: none;
background-color: #F00;
You have changed the latter two highlighted lines, which you must have done because you felt that you are an expert.
Sorry to disappoint, because the last highlighted line is where the problem lies. If you replace the f/loat value back to the original left, your problem will have disappeared.
Gramps -
Place spry navigation on top of an image?
I have an image on the side of my web page that I am
building. I want to place a spry navigation bar on top of this
image but I can't figure out how to position it correctly. Can
anyone give me a hint? I'm using CS3 on a Mac.
Thanks,
LouIs there any way we can see your website? Fishing around in the dark is not a good way to give advice.
I should also mention that the "slicing Photoshop files" method of website building is probably not the way we build websites anymore, if I understand where you are coming from.
Generally speaking, if you have an image in the background set up in your style sheet, you should be able to put things on top of that image.
So, let's say we have a div and I'm going to call it "player." We may want to have more than one player on a page, so we'll give it a class:
CSS:
.player {
background-image: url("/path/myimage.jpg");
HTML:
<div class="player">
<audio controls>
<source src="/path/myaudio.ogg" type="audio/ogg">
<source src="/path/myaudio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
Now, what I have done here is to create an HTML5 Audio player. The web page with the audio must be HTML5. And you will probably need to edit your .htaccess file to include the following:
AddType audio/ogg .oga
AddType video/ogg .ogv
AddType application/ogg .ogg
AddHandler application-ogg .ogg .ogv .oga
If you don't know how to edit an .htaccsss file, you should be able to add those MIME types in your host's Control Panel.
The way you declare an HTML5 document is to start the document with:
<!DOCTYPE HTML>
<html>
This would be before you start your <head> region.
But I must warn you, I'm offering all of this with a great deal of trepidation. I believe you're putting together a website using tables and inline code for things like backgrounds and such. Modern web design does not use tables to format web pages.
Without looking at what you're doing, there is a very big limit as to how I can advise you.
-Mark -
Spry Menu Bar not showing up in Internet Explorer 7
So, after hours of playing with CSS code yesterday and today,
I finally got my Spry navigation bar laid out the way I would like
it to display in Safari. It look a very long time for me to
customize it the way I wanted it, but it the end, it turned out
fine.
Then... to my horror, I jumped into Internet Explorer 7, and
there is no navigation bar to be seen. I've heard of some problems
when viewing Spry menus in different browsers, but I never heard of
the menu simply not being displayed.
Any ideas on why this would occur? You can view the page I'm
working on
here.
Any insights would be greatly appreciated. Thanks!I am sorry, but I do not see a SpryMenuBar in your document nor do i see a problem with the menubar that you do have. I have tested in IE7+
Gramps -
Spry Navigation does not work in IE version 6
I have a simple spry navigation bar at the top of website that works in all the browsers I tested it in, ie IE ver 7 and 8, Mozilla Firefox (all versions), Netscape (all versions), and Safari. The only one I can't it to work in is IE version 6. Does anyone know how to fix this?
I am attaching a copy of both browsers, one that does not work and one that does.
Thanks for your help.
PatI have the same problem. Looks great in FF, Safari, Opera,
but in IE the dropdowns are dancing all over the place. Suspect
it's something in the hover classification, but can't figure out
where the problem is:
http://www.kirkaubry.com -
Navigation bar moves right when changing image in a skin (CRM 7.0)
Hello friends, I have an issue on CRM 7.0 WebClient
I copied the standard BSP that handles the standard skins into my own namespace
I define a new skin (copied from 'Default') and its path in Customizing for Skin.
I upload and replace an "Z" skin for my own image ".gif" that is EXACTLY the same shape and name as the original. So far so good....
However, when I open the skin, the image gets loaded, but the entire navigation bar goes right and the whole screen layout gets disarranged and of course it becomes unusable. Very weird right? No idea what happened because the image has the same name and size than the standard one I replaced
I would like to know how to solve this issue, Thanks and regards from Martin.Hi,
please make sure that your image file has exactly the same size (pixel height and width) as the file in SAP standard.
here a blog which may help:
[/people/sudipta.sarma/blog/2008/03/28/how-do-you-brand-your-company-logo-in-crm-2007-ui|/people/sudipta.sarma/blog/2008/03/28/how-do-you-brand-your-company-logo-in-crm-2007-ui]
Good luck.
Kind regards
Manfred
Maybe you are looking for
-
Greetings this evening, I just purchased an iphone 5s and want to transfer some of my itunes from my mac running 10.6.7 to my new iphone 5s.I downloaded version 11.1 from the itunes website,restarted my computer but it wont recoginize the new 11.1 v
-
Code to get error message in small pop up window.
Hi, I got this code to get error message in pop up window. But this code is giving null pointer exception. Can any one tell what is the exception. and how to solve it. IWDConfirmationDialog dialog; String dialogText = "Duplicate value ";
-
Benchmark report: obtain 17,000 searches per second, DS52p6, x4250 8-core
The benchmark described in this post involved a requirement for a Consumer Directory Server for 13,8000,000 user entries with Directory Server 5.2 patch 6 running on Sun Netra x4250 hardware and Solaris 10 update 7. -- http://bit.ly/8p8RI
-
I want to type hindi fonts in my browser
when surfing some sites, i need to provide some information in hindi, but i do not know how to type in hindi in my browser.
-
New ipod shuffle died after 10 minutes
I have used the shuffle for years while running. Mine finally died. I bought a new one downloaded songs and after 10 minutes of running it died. Brought it back got a new one and same thing, three times this has happened. I even swithed to anothe