SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Location
    British Columbia, Canada
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble with bottom margin on DW SpryMenu

    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:

    Code:
    <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>
    Last edited by ralph.m; Feb 14, 2012 at 22:57. Reason: added code tags

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,611
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by Helen W Lee View Post
    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.
    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. #3
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Location
    British Columbia, Canada
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    We need to see your CSS to know what's happening here. Can you post that, or preferably provide a live link?
    Duh - can you tell I was not thinking straight? You can see the culprit page at http://caninereview.ca/SpryTemplate.php

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,611
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by Helen W Lee View Post
    You can see the culprit page at http://caninereview.ca/SpryTemplate.php
    That's better.

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

    Code:
    ul.MenuBarHorizontal {
      cursor: default;
      font-size: 100%;
      list-style-type: none;
      margin: 0 0 0 8px;
      overflow: hidden;
      padding: 0;
      width: auto;
      clear: both;
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Location
    British Columbia, Canada
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,611
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    You're welcome. Feel free to ask as many questions as you like. We love to play with CSS code.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •