Trouble with bottom margin on DW SpryMenu

HTML & CSS
1

I’m not sure where I should be posting this, so if there’s a better category, please let me know.

I’ve built my first-ever spry menu and simply cannot figure out how to put a margin on the bottom of it to shove the following page content down. I’ve been struggling for hours, adding and removing divs, but no matter what I do I cannot get a bottom margin so I’ve tried adding padding to top of the div the body copy is in, I’ve tried adding padding to the top of the div the body copy is in. Everything I do in the CSS displays just fine in DW but when I go to Live View or preview in a browser, all the extra space at the top disappears.

Here’s the bulk of the code, crappy as it is from all my frustration but hopefully you’ll get the idea and can help me figure out how to move the body (in this case the “orderform” dive) away from the bottom of the menu tabs:

<div id="header">
        <img class="logo" src="CRpics/CR-logo-white.jpg" width="302" height="95" alt="Canine Review Magazine logo">
        
        <div id="dirButton">
        New Directory
        <!-- dirButton --></div>
        
      <div id="subsButton">
        Subscribe
        <!-- subsButton --></div>
        
      <h1>Celebrating Canada's Purebred Dogs, <br />
        Their People and Events Since 1978
      </h1>
  <!-- header --></div>

    <div id="headeradsense">
        <img src="CRpics/Adsense-468x60.jpg" width="468" height="60" />
    <!-- headeradsense --></div>
        
  <div id="sprymenu">
        <ul id="MenuBar1" class="MenuBarHorizontal">
              <li><a class="MenuBarItemSubmenu" href="#">Judges Gallery</a>
                    <ul>
                      <li><a href="judges.php">View Gallery</a></li>
                      <li><a href="judge-order.php">Add Listing</a></li>
            </ul>
          </li>
                  <li><a href="#" class="MenuBarItemSubmenu">Advertise</a>
                    <ul>
                      <li><a href="#">Deadlines</a></li>
                      <li><a href="#">Pay for ads</a></li>
                    </ul>
                </li>
                  <li><a href="#"> Way We Were</a>                  </li>
                  <li><a href="#">Contact Us</a>                </li>
                <li><a href="#">Top Dogs</a></li>
                <li><a href="#">Single Issues</a></li>
                <li><a href="#">Home</a></li>
    </ul>
<!-- sprymenu --></div>    
 
      <div id="orderform">
            <img src="CRpics/CR_TOPDOGS-white.jpg" alt="Canine Review Top Dogs graphic" height="204" width="356" border="0"/>
            <h1>Is your dog in the top 10 in its group<br>
                    or higher?</h1>
            <p>Every time your dog appears in the standings we will include your photo next to his/her name in our online Top Dog standings (including puppies) for only $40 + tax per year. Please sign up and send the picture using the form below. NOTE: This is FREE for our 2011 advertisers.</p>
            <p>We will post your dog&rsquo;s photo when we see the name in the standings.</p>
            <p>* Denotes required field</p>
    <!-- orderform --></div>
2

Yeah, Dw design view is not web design, unfortunately. The only real test is the browser view.

We need to see your CSS to know what’s happening here. Can you post that, or preferably provide a live link?

3

Duh - can you tell I was not thinking straight? You can see the culprit page at http://caninereview.ca/SpryTemplate.php

4

That’s better. :wink:

One way to fix things would be to add the red bits to your style sheet (line 14):

ul.MenuBarHorizontal {
  cursor: default;
  font-size: 100%;
  list-style-type: none;
  margin: 0 0 0 8px;
  [COLOR="#FF0000"]overflow: hidden;[/COLOR]
  padding: 0;
  width: auto;
  [COLOR="#FF0000"]clear: both;[/COLOR]
}
5

THANK YOU!!! That did the trick. I never thought to try to fix it in that css file, was struggling with my own file. I did make a few tentative changes in that file but was too chicken to do much to it. :>) Thanks so much, Ralph.

6

You’re welcome. Feel free to ask as many questions as you like. We love to play with CSS code. :slight_smile: