MenuHoriz dropdown horizontal in IE 7

The Spry MenuBarHorizontal drop down elements run
horizontally and not vertically in IE 7. It works properly in
safari and firefox.
I have updated the .js to 1.5, but the problem persists.
Files are hosted on our dev server at:
http://www.msldevserver.com/clients/holyChild/staging/index2Col.html
Thanks for the help.

I found the answer to the problem. In the SpryMenuBar
Horizontal.css I made theses modifications:
ul.MenuBarActive
added position:relative
then I modified it using the solution by DM8:
ul.MenuBarHorizontal ul
tag's position element as absolute
ul.MenuBarHorizontal ul li
tagg add the following:
clear:left;
float:none;
and removed the width
As well I removed the div tags that I used on the html to
center the main menu rollover text and then I centered the text
directly in the spry menu css.
ul.MenuBarHorizontal li
text-align: center; ( instead of the default left)

Similar Messages

I am having trouble with the position of my header image across browsers. white space above it in safari, pc, and crome then all to the right in firefox.

nydogworks.net
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>NYDogWorks Long Island Dog Training and Behavior</title>
<meta name="description" content="Serving all of Long Island, Nassau & Suffolk. NYDogWorks specializes in dog training, dog behavior, and puppy training.">
<meta name="keywords" content="dog training, long island dog training, dog trainer, long island dog obedience, puppy training classes">
<link href="css/mainstyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<link href="css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />


<link href="css/overlay-apple.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.tools.min.js"></script>
<style>
div.apple_overlay h2 {
margin:10px 0 -9px 0;
color:#222;
font-weight:bold;
font-size:14px;
div.black h2 {
color:#222;
#apple {
margin-top:10px;
float: left;
width: 250px;
padding-right: 10px;
#apple img {
background-color:#fff;
padding:2px;
border:1px solid #ccc;
margin:2px 5px;
cursor:pointer;
-moz-border-radius:4px;
-webkit-border-radius:4px;
body {
margin-right: auto;
margin-left: auto;
</style>
    <script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script><script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26177215-1']);
_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);
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body onload="MM_preloadImages('images/nydogworks-logo-hover.png','images/training-services-on. jpg','images/behavior-therapy-on.jpg','images/off-leash-training-on.jpg')">
<div id="wrapper"> <div id="header">
<div id="logoBox"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/nydogworks-logo-hover.png',1)"><img src="images/nydogworks-logo.png" alt="NY Dogworks" name="Image3" width="280" height="200" border="0" id="Image3" /></a></div>
<div id="slogan">Serving All of Long Island, Nassau & Suffolk Counties<br />
Also serving Manhattan, Brooklyn & Queens
</div><div id="emailBox">
    <h2><img src="images/calltogetstarted.png" width="473" height="74" alt="Call to get started" /></h2>
    </div><div id="mainNav">
<ul class="dropdown dropdown-horizontal" id="nav" name="nav">
<li><a href="about-ny-dog-works.html">About Us</a></li>
<li><a href="long-island-dog-training-programs.html" class="dir">Training Programs</a>
   <ul>
            <li><a href="basic-obedience.html">In Home Dog Training</a></li>
            <li><a href="dog-behavior-therapy.html">Behavior Therapy</a></li>
            <li><a href="board-and-train-dog-program.html">Board & Train Program</a></li>
            <li><a href="off-leash-training.html">Off Leash Training</a></li>
            <li><a href="puppy-training-program.html">Puppy Training</a></li>
</ul>
</li>
    <li><a href="dog-trainer-testimonials.html" class="dir">Testimonials</a></li>
<li><a href="contact-long-island-dog-trainer.html" class="dir">Contact Us</a></li>
</ul>
</div>
</div>
<div id="container">
<div id="imgholder"><a href="long-island-dog-training-programs.html"><img src="images/main-header.jpg" alt="private dog training long island new york" width="951" height="416" border="0" /></a>
<div id="program1"><a href="long-island-dog-training-programs.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/training-services-on.jpg',1)"><img src="images/training-services.jpg" alt="dog training services" name="Image6" width="315" height="137" border="0" id="Image6" /></a></div>
<div id="program1"><a href="board-and-train-dog-program.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/boarding_training-on.jpg',1)"><img src="images/Boarding_training.jpg" alt="board and train dog program" name="Image5" width="315" height="137" border="0" id="Image5" /></a></div>
<div id="program1"><a href="dog-behavior-therapy.html" onmouseout="MM_swapImgRestore()" onmouseover=
"MM_swapImage('Image7','','images/Behavior_therapy2-on.jpg',1)"><img src="images/Behavior_therapy2.jpg" alt="behavior therapy" name="Image7" width="311" height="137" id="Image7" border="0" align="right" /></a></div>
</div>
<div id="pageContentNoside">
   <div id="sideSub">
     <h2>Dog Training Services<br />
       </h2>
     <ul id="subnav">
       <li><a href="basic-obedience.html">Basic Obedience</a></li>
       <li><a href="dog-behavior-therapy.html">Behavior Therapy</a></li>
       <li><a href="board-and-train-dog-program.html">Board & Train Program</a></li>
       <li><a href="off-leash-training.html">Off Leash Training</a></li>
       <li><a href="puppy-training-program.html">Puppy Training</a></li>
       </ul>
     <br />
     <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2F NYDogWorks%2F219268038151244%3Ffref%3Dts&width=248&height=558&show_faces=true& amp;colorscheme=light&stream=true&border_color=%23FFFFFF&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:248px; height:558px;" allowTransparency="true"></iframe>
     <p><br />
       </p>
     <p> </p>
     <p><img src="images/4449da18fc3aa2f249d17dc90ebd5531.jpg" width="145" height="136" /><br />
     </p>
     </div>
   <div id="mainContentFeature1">
     <h2>Welcome To NY Dogworks</h2>
     <p><img src="images/dog-breaking-through.jpg" alt="new york dog trainer" width="136" height="170" class="h_img_float_right" />Our private one on one training lessons are done at your home by a Professional Certified Trainer and Behavior Expert. The lessons are tailored to fit what you would like done with your puppy or adult dog. <br />
       <br />
       We use a humane, positive and scientifically sound approach that makes it easy for you and your dog to succeed. Our instructions are broken down into simple steps so that everyone can take part in the training and be able to practice as a family. <br />
       <br />
       <span class="employeeName">Call Today for a Free Consultation!!      </span></p>
     <p>Do not have the time or patients to do the Training? Well then NY DogWorks has the answer.. We now do <a href="board-and-train-dog-program.html">Board and Train Programs</a> at our lovely facility in the home of Owner & Trainer Brian DeMartino. It is a 2 to 6 week program that is 100% guaranteed. Your dog will stay with us for no additional fee if we feel that he or she is not ready to graduate. This program can be for Puppy Training, Housebreaking, Socialization / Obedience & Manners / Behavior problems such as Aggression, Anxiety, or Fears / Advanced Off Leash Training / Personal Protection and much more..</p>
     <p>We also <a href="board-and-train-dog-program.html">board dogs</a> at our facility if you are going away and want your family pet to be cared for 24/7 as if he or she was one of our own. Plenty of playtime, walks, individual attention, grooming if needed, comfortable sleeping areas with their own bed, and lots and lots of love.. </p>
     <p>Let us help you have the relationship that you and your dog deserve.. <br />
       <br />
       <strong>We are now accepting</strong><br />
       <img src="images/creditcards.jpg" width="228" height="43" alt="now accepting credit cards" /><br />
       <br />
       <br />
       </p>
     <p><br />
       </p>
     <p><br />
       <br />
      </div>
   <div id="mainContentFeature2">
     <form action="form.php" method="post" name="form2" id="form2"> <table width="279" border="0" cellpadding="2" cellspacing="2">
       <tr>
         <td width="273"><h2>Quick Contact</h2></td>
         </tr>
       <tr>
         <td class="mainContent">Your Name</td>
         </tr>
       <tr>
         <td><span class="style9">
           <input name="forname" type="text" class="colorfieldssmall" id="forname" size="20" />
           </span></td>
         </tr>
       <tr>
         <td class="mainContent">Your Email Address* (required)</td>
         </tr>
       <tr>
         <td><span class="style7 style9">
           <input name="admail" type="text" class="colorfieldssmall" id="admail" size="25" />
           </span></td>
         </tr>
       <tr>
         <td class="mainContent">Phone Number</td>
         </tr>
       <tr>
         <td><span class="style7 style9">
           <input name="phone" type="text" class="colorfieldssmall" id="phone" />
           </span></td>
         </tr>
       <tr>
         <td><span class="mainContent">Type of Dog Training</span></td>
         </tr>
       <tr>
         <td class="mainContent"><span class="style9">
           <select name="need" class="colorfieldssmall" id="need">
             <option value="select one">select one</option>
             <option value="Basic Obedience">Basic Obedience</option>
             <option value="Behavior Therapy">Behavior Therapy</option>
             <option value="Board and Train">Board and Train</option>
             <option value="Off Leash Training">Off Leash Training</option>
             <option value="Puppy Training">Puppy Training</option>
             </select>
           </span></td>
         </tr>
       <tr>
         <td><span class="mainContent">Comments</span></td>
         </tr>
       <tr>
         <td><textarea name="comments" id="comments" cols="24" rows="8"></textarea></td>
         </tr>
       <tr>
         <td><div align="left">
           <input type="submit" name="submit" id="submit" value="Submit" />
           </div>
           </td>
         </tr>
       </table></form>
     <h2><br />
       We are available in the following areas:</h2>
     <p>Long Island, Nassau county, Suffolk county, Manhattan, Brooklyn, Bronx, & Queens.</p>
     <p>**We have pick up and drop off services for your pet for the boarding and boarding and training programs. <br />
       </p>
     <h2>Dog Training Testimonials<br />
       </h2>
     <p>Sending Otis to Brian for the board and train program was the best decision I ever made. After being told Otis could not be helped and that he should be put down, I was devastated. Otis has now been back from Brian's program for a few weeks and is extremely obedient and friendly. He is the same puppy we brought home a couple years ago, but calmer and without any aggression. We work on Otis' obedience daily as well as walk him and put him on the treadmill.   Thanks to Brian, our dog is happy-go-lucky and more approachable. The list goes on and on of how Brian has helped the family, myself, and especially Otis. If you are having issues with your dog, especially behavior and aggression problems, my advice to you is to trust Brian. Your dog will be in good hands with a safe, reliable, responsible, dog lover that will treat your dog like his own.<br />
       <span class="testimonalName"><strong><br />
         Victoria Zilli<br />
         </strong></span><span class="mainContent">Long Island, New York</span><br />
       <br />
       <a href="dog-trainer-testimonials.html">Read more dog training testimonals</a><br />
       <br />
       <br />
      <br /></div>
   <div id="breadCrumbs">
     <p><a href="index.html">Home</a> > Welcome to NY DogWorks New York's Premier Dog Training Company<br />
       <strong>Serving all of Long Island, Nassau & Suffolk County, Manhattan, Brooklyn & Queens</strong>        <br />
       </p>
     </div>
</div>
    <div id="footer">
      <div id="footermenu">
      <div id="footermenu1">
      </div>
    </div>
   <div class="phoneNumber" id="copyright"> Copyright © 2014 NY DogWorks</div>
     <div class="websiteDesign" id="sitedesigner">Long Island Website Design by <a href="http://www.wetribet.com" title="Wet Ribet" target="_blank" class="medlink">Wet Ribet</a>     </div>
</div>
</div>
</div>
</body>
</html>

The issue with that white space is explained by the use of relative positioning of your menu. Remember that relative positioning visually allows you to move an element, but that its "shadow" or "foot print" is retained in the document flow. So it still takes up space where it originally flowed in your content, and this causes the header image to position itself the way it does. Turn off the relative positioning of the menu to see what I mean. A simple solution is to set the #header to relative positioning, and then apply absolute positioning to the menu.
There are other issues with your code. Much of it can be simplified, and you should really stop using ID selectors from this point on, and predominantly use classes instead. The use of ID selectors ought to be limited as much as you can - they force you to write bloated convoluted code.
Try to write DryCSS (Don't Repeat Yourself).
Here is my somewhat cleaned up code. Notice I removed and simplified most of the css selectors. Some have no css properties at all anymore. And be careful that you cannot use re-use the same id selector in your html code: it will not validate. #program1 must become .program1
PS as always, please backup your files before applying these changes! Dreamweaver lacks a history/versioning feature!
*, *:before, *:after {
-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
body {
    margin: 0 auto;
    background-color: #203610;
    font-family: "Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
    font-size: 100%;
    color: #333;
#wrapper {
background: url("../images/wrapbg.png") repeat-y scroll 0 0 rgba(0, 0, 0, 0);
margin: 0 auto;
width: 951px;
#header {
position: relative;
#mainNav {
background: url("../images/menubg.jpg") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
bottom: 0;
padding: 0 15px 0 25px;
position: absolute;
right: 0;
width: 510px;
.dropdown li { /* simplify .dropdown li !*/
float: left;
line-height: 2.2em;
.dropdown a { /* simplify ul.dropdown li a !*/
display: block;
font-weight: bold;
padding: 7px 12px;
#container {
background-color: #fff;
border-top: 6px solid #6f9f49;
#imgholder {
.program1 { /* you CANNOT have multiple id selectors sharing the same name! Use classes!!! */
float: left;
width: 315px;
rewrite this in your html:
<div class="pageContentNoside">
    <div class="col-1-3 sideSub">
    <div class="col-1-3 mainContentFeature1">
    <div class="col-1-3 mainContentFeature2">
    <div class="breadCrumbs">
</div>
.col-1-3 {
float: left;
width: 33.3333%;
padding: 25px 15px;
#sideSub {
#mainContentFeature1 {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
#mainContentFeature2 {
#footer {
clear: both;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
font-size: 0.7em;
height: 45px;

When is Creator 2 Update 2 or Creator 3.0 coming up?

We are hoping that some of the issues/bugs reported in the forum will be fixed soon and some new cool web menus (dropdown, horizontal, vertical, MSDN style) and text editor components will be added. I keep trying "Update Center" every day, only to get the same message: "No update found on the selected server" :-((
I guess after using Windows for so many years, if I don't find a patch or two every week, I feel like no one is working on the product :-)

Hi Sabir,
Though I am not allowed to give out dates or details of any upcoming releases of Creator, this is what I can tell you.
We are coming out with a new release of Creator which will be an addon plugin/pack on top of netbeans very soon. await news on it.
There are plans for better improved, much more new features included versions of Creator for the future stay tuned.
We at Sun are working to make your Creator IDE better for you by fixing bugs and adding features every day.
K

Horizontal spry menu dropdowns not displaying properly in IE7

Hi,
Grateful for any help! I have a dreamweaver template which works fine on a Mac with Firefox and Safari, but when opened in IE7 on a PC the menu bar accros the top is ok but the dropdowns appear as a horizontal list, instead of vertical, and the submenues are not displayed. The site is not available on the web Can anyone advise how to fix this please?
I am using the default Spry code and Dreamweaver CS5, and have run Update to ensure latest versions, on iMac with Snow lepoard - also updated.
Many thanks
Richard

Have a look here http://labs.adobe.com/technologies/spry/samples/menubar/AutoWidthHorizontalMenuBarSample.h tml and when you get down near the bottom of the page add !important as per following
ul.MenuBarHorizontal ul li {
display: block;
float: none !important;
width: auto;
white-space: nowrap;
border-bottom: solid 1px #EEE;
The !important will override any changes that the JS wants to make.
Gramps

Mouse Hover Color in Horizontal Dropdown Navigation

Hi,
Mouse Hover color in the Horizontal Dropdown Navigation scheme is not changed even if you apply a different stylesheet. It remains the default blue. Is there a setting some where or it needs to be modified in the navigation scheme.
thanks
-Sachin

Sachin,
Are you talking about the mouse hover color for the dropdown menu entries? That stylesheet class is defined in a different stylesheet. Look in
<imageserver dir>\imageserver\plumtree\common\private\js\jsportalmenus\122846\styles\css\PTPMMenu.css.
The number might be different on your system. If you view the HTML source on a portalpage and search for PTPMMenu.css you will see the number your portal is using. The styleclasses you want to change in PTPMMenu.css are .PTPMMenuBody .hoverand .PTPMMenuBody .hover td. You might also need to change other classes with the highlight color depending on the type of entries you have in your menus.

CSS (Responsive) Horizontal Dropdown Menu (Alignment)

I am styling a Responsive CSS Horizontal Dropdown Menu (for hours now), and can not get the main menu headings (Directory, Resources, etc) to align left (even) with the logo and content divs. I would also like the submenu headings (Learning & Games) and items (Catch the Bullet, Snoopydoo, etc) to align left (even) with the logo and content divs. - Like I am trying to do with the main headings. --I am trying to get the logo, main menubar heading, and menubar subheading to all align the same left.
(Optional) I am considering on not having the gray menuboard span the whole screen when opened. Not sure if this would look good, but even more unsure how to keep it in the 90% container the menubar is located in.
Here is the site for code:
http://dothopper.com/index.html
Thanks for any help.

Another great tip. Never cease to amaze. Thanks . I uploaded the new CSS with red border and looked at somewhat. It seems very helpful, but like this navbar, I'm gonna have to spend some time with. I think this may help me to figure the problem. This is a really GREAT trick, thanks. If you appen to look at my site, and see anything relevant to getting the element to shift left, let me know.
BTW, crammed some more learning recently (Mostly Dreamweaver, little HTML STructure, and JQuery). Going to try to not use as many divs, (use HTML tags and class selectors). Trying to use captions in my HTML and CSS for organization and understanding. Making copies of all my CSS, JS, and HTML. Set my areas (divs) up as 'section,aside,article,and footer'?--Tried adding metatag info (I think I missed 1 part of the metatag (they wanted a value?). Not sure if my metatagging is correct? Let me know of any advice what I'm doing right/wrong so far.
I taught myself to design using divs like tables somehwat. With the correct way of design (not using alot of divs)..how would I handle this?...
My old page (method), I had several,divs: 3- (content75%) and 3- (image25%) all housed within a div (approx 900px). Content was left, and images right. Total DIV that housed them was 75% of 1232px page? (I think)..The div that housed them was approx 900px (.75x1232). Content approx 675px and image approx 225px wide.
I inseted 480px wide images in that 25% image div and it showed it nicely as approx 225px wide on desktop, and when responsive on mobile, nice full size at 480px. (I think I am/was avoiding having to use alternative images--for each platform-- this way?)
With the correct way of designing (less divs), how would I handle this scenario above? IF I inserted a 480px image into a approx 900px div with no other divs, it would fill the div with a 480px image. IT would then throw my wole design off. I think I'm just missing some HTML/CSS knowledge. Hope this question makes some kind of sense?

Horizontal Dropdown Menu Buttons DON'T WORK

Any suggestions please?!
I am a novice Flash Developer and I created a horizontal
drowndown menu in Flash with rollover submenus. The dropdown menu
has buttons with Behaviors assigned to "go to webpage". The
published .swf file works fine, links and all. It is only when I
place the menu inside a Dreamweaver DIV that exists over another
image DIV that the buttons don't work. The menu will drop down and
can be rolled over, but it is when I try to click on the buttons to
activate the links that nothing functions.
It is worth mentioning that the buttons have an assigned "Down"
state that doesn't activtate, so I know the buttons are incapable
of even being clicked on. The problem is within Dreamweaver,
not the flash movie menu. Perhaps I am overlooking a widely know
trick to making this work? Am I missing a simple line of HTML??
Anybody have any experience with this?
Greatly Appreciated

Hi,
May I please have the URL of the site and any specific pages you'd like me to take a look at?

Horizontal Navigation with Dropdown Menu

Hello!
I am trying to put together a site with Horizontal navigation with items in the dropdown. I built my plan with main pages and child pages, and added my horizontal navigation on the Master page, but when I go to preview, I don't see any of my dropdown (child) pages. Is there any way to fix this? (I've attached a screenshot, hopefully this will help clarify)......

Hello,
Please click on the tiny white Arrow in the blue circle which comes up at the top right of the Menu. And there change the Menu type from Top Level pages to All pages.
Note : Child pages on the same level in Plan view are listed vertically in a Horizontal Menu.
Regards,
Sachin

Horizontal shifts between dropdown pages and parents

I have noticed a horizontal shift when going from a dropdown page bact to a parent page. This seem to happen on all dropdowns. When clicking between parents, no shift. when clicking between children, no shift. Shifting between parents and children only. I'm 99% positive this was caused by the public release. Website is: www.islandguymusic.com , published via FTP upload. There is a version with the same address published to http://islandguymusic.businesscatalyst.com/index.html site via "publish".

Hi Carl,
thanks for your answer!
I also thougt it coud be an issue with the CSS and I've searched the whole CSS-Stylesheet. In the part of the Tab Classes I searched for every margin-top and margin-bottom and set it to 0px but it had no effect.
Here you can see the part of my CSS-Stylesheet containing the attributes of the tabs:
/* Tab Classes */
/* .t4Tabs{text-align:center;padding:10px 0 2px 0;} */
.t4Tabs{text-align:right;padding:10px 0 2px 0;margin-bottom:0px;margin-top:0px;}
.t4standardtabcurrent{vertical-align:middle;padding:2px 5px 2px 5px;margin 0px 3px 0px 3px;background-color:#CCCCCC;color:#111111;border:2px solid #111111;border-bottom:0;text-decoration:none;font-weight:bold;}
.t4standardtab{vertical-align:middle;padding:2px 5px 2px 5px;background-color:#777777;color:#ffffff;margin:0px 3px 0px 3px;border:2px solid #111111;border-bottom:0;text-decoration:none;font-weight:bold;}
.t4standardtab:hover{background-color:#CCCCCC;color:#000000;text-decoration:none;}
.t4ChildTabs{text-align:center;background-color:#FFFFFF;padding-bottom:4px;margin-top:0px;margin-bottom:0px;}
.t4childtabcurrent{margin-left:3px;margin-right:3px;font-weight:bold;background-color:#DDDDDD;padding:2px;border:2px solid #000000;border-top:none;text-decoration:none;}
.t4childtab{margin-left:3px;margin-right:3px;padding:2px;border:2px solid #000000;border-top:none;text-decoration:none;font-weight:bold;}
But the strange is that this horizontal space is not equal on every page. On some pages it is quite small and like I want it to be and when I select the tab "Reports" for example there is a huge gap.
When I change the margin in the CSS-Stylesheet shouldn't it be for all pages? Shouldn't the margin be the same whatever page I am on?
Greetings,
Sofie

Horizontal dropdown menubar - Vertical dropdown menubar

Hi,
I would need help to turn a horizontal dropdown menubar to a vertical dropdown menubar. I am not experienced with CSS so don't know how to change code correctly. I would like to get submenu going vertically beside main menu.
http://www.villalotus.net/TEST/test.htm
Thanks in advance!

Thank you Ken!
Unfortunately I didn't find help from tutorials. I manged to turn menu vertically but submenu goes on top of main menu.
/*main nav*/
nav {
          margin-left: auto;
          margin-right: auto;
ul {
          padding: 0;
          margin: 0;
nav ul {
          list-style: none;
          font-weight: bold;
          font-size: 20px;
          margin: 5px;
          width: 180px;
nav ul ul {
          display: none;
          margin: 0px;
          padding: 0px;
nav ul li {
           position: relative;
nav ul a {
          display: block;
          width: 160px;
          text-align: center;
          text-decoration: none;
          color: #fff;
          border: 1px solid #004c99;
          border-radius: 8px;
          margin-right: auto;
          margin-left: auto;
          padding-top: 5px;
          padding-right: 9px;
          padding-bottom: 5px;
          padding-left: 9px;
nav ul a:active       {
          background: rgba(255,255,255,0.4);
          color: #FFF;
nav ul li a:hover, ul a:focus {
          text-decoration: none;
          background-color: #6699cc;
          color: #FFFFFF;
nav ul a:link, nav ul a:visited {
          background: rgba(255,255,255,0.2);
          color: #FFFFFF;
nav ul li a {
          margin-top: 0px;
nav ul ul li {
            position: relative;
nav ul ul li a {
          color: #fff;
          margin: 0px;
nav ul ul li a:hover {
          background: #6699cc;
nav ul ul li a:active, ul ul li a:link , ul ul li a:visited{
          background-color: #3370AD;
nav ul li:hover {
          margin-top: 0px;
nav ul li:hover> ul{
          display: block;
          position: relative;
nav ul:after {
          content: "";
          clear: both;
          display: block;
Message was edited by: Karonaful

Horizontal dropdown menu/css

Have worked out a horizontal menu using css but I'm stuck with the drop down part. There are two areas that drop down, one under Data Entry and the other under Reports. So far the only style used is display: inline;.View the file --> http://classreunionprogram.com/test_css/css.menu.htm
Also get a validation error because of ignorance of how to.Any help is great.
Thanks.

Is this what you had in mind?
http://alt-web.com/DEMOS/CSS2-Horiz-Drop-Menu.shtml
NOTE: Pay close attention to how the list mark-up is laid out.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

CSS horizontal menu with vertical dropdowns

What I would like my menu to look like:
- solid border on top and bottom
- first-level menu items horizontal and centered
- first-level menu items equally spaced as opposed to same
widths
- second-level menu items vertical and on individual lines
What my menu actually looks like:
www.vicesbyproxy.com/staging/exp_menu_vert.html
What's wrong:
- border not on top & bottom
- second level wrapping within the width of the container
This CSS is much more complex than what I usually do. Any
help would be greatly appreciated.

The only way to go -
http://www.projectseven.com/products/menusystems/pmm/
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"anubia" <[email protected]> wrote in
message
news:e5o4gk$28t$[email protected]..
> What I would like my menu to look like:
> - solid border on top and bottom
> - first-level menu items horizontal and centered
> - first-level menu items equally spaced as opposed to
same widths
> - second-level menu items vertical and on individual
lines
>
> What my menu actually looks like:
> www.vicesbyproxy.com/staging/exp_menu_vert.html
>
> What's wrong:
> - border not on top & bottom
> - second level wrapping within the width of the
container
>
> This CSS is much more complex than what I usually do.
Any help would be
> greatly appreciated.
>

Inserting Images in Horizontal Dropdown Navigation Tabs

I am running a 5.0.2 portal. I am trying to make the tabs with rounded corners. And, for that I am trying to insert a small image on both sides of the tabs. Does anybody know which files I would have to include in my custom project, which basically controls the HTML of the tabs.

hi Thomas,
Images on the masthead and other things are heard of and I had done such customizations myself.......never heard of this one.
Cheers.........

Horizontal menu bar with image dropdowns works perfectly in Safari & Chrome but . . .

. . . not in FF or IE.
working draft here: www.akstauffer.com/2011/
Specifically, the vertical spacing between the .gifs at the tertiary menu level -- hover over services / project types. In Safari and Chrome the .gifs all butt up against each other properly, which I achieved with the block property after much trial and error. But there's still separation between them when viewed in IE and FF.
I would greatly appreciate any wisdom from the forum.

Hi Beth, I have been going crazy on this end with the Sub Menus showing up at the top of the Internet Explorer Browser. They work fine in FF and Chrome...
I have CS4 and tried reading everything possible.... here is my page. I am normally pretty good at resolving these issues but I'm going nuts.. ha!
http://www.ilovemydogfans.com/index-testdrops
Thank you for any assistance you can provide. I would be forever grateful!
Dave
David Abbott
I Love My Dog
[email protected]

IE8 sees horizontal menu as white, with dropdowns not dropping

I previously received a great solution from Altruistic Gramps regarding our menu's background images, but then someone viewed our site (http://www.usc.edu/org/seagrant/NS/) with IE8 and saw the transparent menubars as white. I googled a solution to this, which was commenting out the #FFF in the css IE hack section - background: #FFF; - but then the background was perfectly clear, probably because we have the menus to be semi transparent.
I looked for a solution to this but could not find any, and so opted to create a semi transparent 1x1px png file and using that as a background image
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: url(../Images/clear1px.png);/*background: #FFF;/*/
This works, to an extent: We're using auto as the menubar width in order to get some longer titles to fit and so now, the trans gray texture does not extend all the way across as it does while looking through other browsers. In order to use the 'house icon' I had to enclose the spry menu in another div (located in the main css) and color that, but now I have no idea what to do with the way it looks in IE8
If you need more of the spry css or the main css, please let me know and I'll post it.
Best regards.

Thanks again for the response. I made these changes in the menu css and the index page and the menu went clear again and the subs still don't seem to drop at all. After checking your link to the compatibility modes, I tried each of the IE= samples and the only one that did anything was 5. That just messed up the menu completely. I went back to 9 and it was the same no drop sort of thing.
I was thinking maybe it was the extra div I originally made to keep the home icon in the same group as the rest of the spry menu, so I took that div out, and although the spry menu clicked into place, it still had the transparency and drop-down problems.
I'll post my main css - maybe that'll show something. Excuse the mess, but we've been adding things as we go
Thanks again for spending all this time on it!
ul{
    list-style:none;
    margin:0 0 1em 0px;/*0 0 1em 15px*/
    padding: 0;
ul li{
line-height:1.3em;/*1.3em*/
margin: .25em 0;/*.25em 0*/
padding: 0 0 0 15px;/*0 0 0 15px*/
background:url(../Images/Compass_Website_small_2-4-11.png) no-repeat 0 .01em;/*0 4px - this is the adjustment for line-placement of icon .15em*/
li ul{
margin:0 0 0 30px;
list-style:disc;
li ul li{
padding-left:0;
background:none;
li ul li ul{
margin:0 0 0 30px;
list-style:circle;
ul li ul li ul{
padding-left:0;
background:none;
/* Holly Hack to fix ie6 li bg */
/* Hides from IE-mac \*/
* html li{height: 1%;}
/* End hide from IE-mac */
@media print{
ul {
    list-style:disc;
    margin-left:30px;
ul li {
    padding-left:0px;
    background:none;
} /* end print */
.picture { background-color: #ffffff; /*F9F9F9*/
border: 0px solid #CCCCCC; padding: 3px;
font: 10px/1.4em Helvetica, Arial, Verdana, sans-serif; }
.picture img { border: 1px solid #CCCCCC;
vertical-align:middle; margin-bottom: 3px; }
.right { margin: 0.0em 0pt 0.5em 18px; float:right; }/*0.5em 0pt 0.5em 0.8em*/
.left { margin: 0.0em 18px 0.5em 0pt; float:left; }/*0.5em 0.8em 0.5em 0pt*/
body,td,th {
font-family: Helvetica, Arial, Verdana, sans-serif;/*orig Verdana, Arial, Helvetica, sans-serif*/
font-size: 14px;
color: #000;
margin: 0px;
padding: 0px;
line-height: normal;
font-weight: normal;
text-align: left;
a:link {
text-decoration: none;
color: #000000;
input {
font-size: 14px;/*11px*/
line-height: normal;
font-weight: normal;
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #0000FF;
a:visited {
text-decoration: none;
color: #000000;
a:hover {
text-decoration: none;
color: #25408F;/*ffffff, 5a5a5a*/
a:active {
text-decoration: none;
h1 {
font-size: 22px;
line-height: normal;
font-style: normal;
margin-bottom: .1em;
h2 {
font-size: 20px;
line-height: normal;
font-style: normal;
margin-bottom: .1em;
h3 {
font-size: 18px;
line-height: normal;
font-style: normal;
margin-bottom: .1em;
h4 {
font-size: 16px;
font-style: normal;
line-height: normal;
margin-bottom: .1em;
h5 {
font-size: 14px;
font-style: normal;
line-height: normal;
margin-bottom: .1em;
#topmenu {
text-align: center;
height: 20px;
vertical-align: auto;
padding: 0px;
width: 600px;
float: none;
margin: 0px;
font-size: 14px;
h6 {
font-size: 12px;
font-style: normal;
line-height: normal;
margin-bottom: .1em;
body {
margin: 0;
#txo-search {
float: left;
width: 812px;
#container{
width: 900px;
margin-left: auto;/*auto*/
margin-right: auto;/*20px*/
border:0px none #000000;
height: auto;
padding: 0px;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #FFF;
#searchbar {
float: right;
padding-top: 3px;
padding-right: 12px;
padding-bottom: 0px;
padding-left: 0px;
font-size: 9px;
text-transform: uppercase;
#sidebar{
float:left;
background: #ebebeb;
background-color: #FFF;
width: 225px;
padding: 0px 0px 0px 12px;
margin: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
height: auto;
text-align: left;
font-size: 14px;/*12px*/
line-height:normal;
color: #000;
position: relative;
#sidebar2{
float:left;
background: #ebebeb;
background-color: #FFF;
width: 205px;/*205px*/
padding: 30px 0px 0px 0px;/*12px, 20px*/
margin: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
height: auto;
text-align: left;
font-size: 14px;/*12px*/
line-height:normal;
color: #000;
position: inherit;
z-index: 2;
}#textonly{
padding-top: 3px;
float: left;
padding-left: 12px;
padding-right: 0px;
padding-bottom: 0px;
#mainContent{
padding:0px 6px 0px 0px;/*0px 6px*/
width: 650px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
margin: 0px;
float: left;
position: relative;
height: auto;
color: #000;
background-color: #FFF;
#mainContent2{
padding: 6px 6px 6px 6px;/*0px 6px*/
width: 650px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
margin: 0px;
float: left;
position: relative;
height: auto;
color: #000;
}#headerpic {
padding:0px 0px 0px 0px;
width: 900px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
margin: -28px 0px 0px 0px;
float: left;
position: inherit;
height: 246px;
z-index: -2;
}#headerpicCaption {
padding:6px 0px 0px 12px;
width: 888px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
margin: -24px 0px 0px 0px;
float: left;
position: relative;
height: 19px;
z-index: 1;
background-color: rgba(149,149,149,0.7);
color: #FFF;
font-weight: bold;
}#horizontalmenudiv {
padding:0px;
width: 900px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
margin: 0px 0px 0px 0px;
float: left;
position: relative;
height: 28px;/*24, 28px*/
z-index: 1;
background-color: rgba(0,0,0,0.0); /*0.6*/
#header {
margin:0px;
border:0px none #000000;
height: auto;
padding: 0px;
float: left;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: #990000;
text-align: left;
vertical-align: top;
width: 900px;
z-index: 1;
position: relative;
#footer {
width:900px;
margin:0px;
text-align:center;
height: auto;
padding: 0px;
border-top: 0px none;
border-right: 0px none;
border-bottom: 0px none;
border-left: 0px none;
float: left;
z-index:1
position: relative; /*background-color: #68a4db;*/
#logocontainer {
width:140px;
margin:0px;
height: 92px;
padding: 0px 0px 0px 12px;
float: left;
border-top: 0px none;
border-right: 0px none;
border-bottom: 0px none;
border-left: 0px none;
background-color: #990000;
#logocontainer2 {
width:140px;
margin:0px;
height: 92px;
padding: 0px 12px 0px 0px;
float: left;
border-top: 0px none;
border-right: 0px none;
border-bottom: 0px none;
border-left: 0px none;
background-color: #990000;
.MainTitle {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 28px;
color: #ffcc00;
font-weight: bold;
.homepagethemediv {
font-family: Helvetica, Arial, Verdana, sans-serif;
margin: 0px;
padding: 3px 3px 3px 0px;/*3px*/
height: auto;
width: 205px;
text-align: left;
float: left;
vertical-align: top;
line-height: normal;
.regpagethemediv3x {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:12px;/*12px*/
margin: 0px;
padding: 3px;
height: 220px;/*300px*/
width: 205px;
float: left;
vertical-align: top;
text-align: left;
line-height: normal;
.regpagethemediv2x {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:12px;/*12px*/
margin: 0px;
padding: 0px 18px 0px 0px;
height: 375px;/*300px*/
width: 300px;
float: left;
vertical-align: top;
text-align: left;
line-height: normal;
.regpagethemediv2xstaff {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:12px;/*12px*/
margin: 0px;
padding: 0px 18px 0px 0px;
height: auto;/*300px*/
width: 300px;
float: left;
vertical-align: top;
text-align: left;
line-height: normal;
.regpagethemediv2xcenter {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:12px;/*12px*/
margin: 0px; /*0px*/
padding: 3px;
height: 500px;/*300px*/
width: 270px;
float: left;
vertical-align: top;
text-align: left;/*left*/
line-height: normal;
#center_div
width:270px;
left:50%;
margin-left:-135px;
z-index: 2;
.regpagethemediv1x {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:12px;/*12*/
margin: 0px;
padding: 3px 3px 3px 0px;
height: auto;/*300px*/
width: 625px;
float: left;
vertical-align: top;
text-align: left;
line-height: normal;
.regpagefloaterLeft {
font-size:12px;/*12px*/
margin: 0px;
padding: 3px;
height: auto;/*300px*/
width: 45%;
vertical-align: top;
text-align: left;
line-height: normal;
float: left;
border: 2px;
border-color: 25408F;
border-style: solid;
.regpagefloaterRight {
font-size:12px;/*12px*/
margin: 0px 0px 0px 18px;
padding: 3px;
height: auto;/*300px*/
width: 45%;
vertical-align: top;
text-align: left;
line-height: normal;
float: right;
border: 2px;
border-color: #25408F;
border-style: solid;
.smallprint {
font-size: 10px;
.SGBlue {
color: #25408F;
#SGBlue {
color: #25408F;

MenuHoriz dropdown horizontal in IE 7

Similar Messages

Maybe you are looking for