8 Replies Latest reply on Aug 1, 2007 2:54 AM by Newsgroup_User

    What is causing this?

    ~Billy~ Level 1
      I am messing about with a css menu, and all looks as it should in IE, but in Firefox and Safari the menu starts to far over to the right.

      My code is -

      #lowermenu{
      padding: 1px 0px 1px 1px;/
      background-color: #FFFFFF;
      text-decoration:none;
      font-size: 86%;
      height: 50px;
      }

      #lowermenu ul{
      margin: 5px;
      list-style-type: none;
      background-image:
      }

      #lowermenu ul li{
      float:left;
      }

      #lowermenu ul li a{
      border: 1px solid #778;
      color: #FFFFFF;
      padding: 1px 30px;
      margin-right: 1px;
      text-decoration: none;
      background-color: #9191FF;
      font-weight: bold;

      }

      #lowermenu ul li a:hover{
      background-color: #CCC;
      color: blue;
      }


      <div id="lowermenu">
      <ul>
      <li><a href="#">Home1</a>
      <li><a href="#">Home2</a></li>
      <li><a href="#">Home3</a></li>
      <li><a href="#">Home4</a></li>
      </ul>
      </div>

      Could any of you brainy people point out to me where the problem lies?

      Cheers

      Billy
        • 1. Re: What is causing this?
          Level 7
          Can you upload the page and post a link?

          --
          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
          ==================


          "~Billy~" <webforumsuser@macromedia.com> wrote in message
          news:f8o07a$37q$1@forums.macromedia.com...
          >I am messing about with a css menu, and all looks as it should in IE, but
          >in
          > Firefox and Safari the menu starts to far over to the right.
          >
          > My code is -
          >
          > #lowermenu{
          > padding: 1px 0px 1px 1px;/
          > background-color: #FFFFFF;
          > text-decoration:none;
          > font-size: 86%;
          > height: 50px;
          > }
          >
          > #lowermenu ul{
          > margin: 5px;
          > list-style-type: none;
          > background-image:
          > }
          >
          > #lowermenu ul li{
          > float:left;
          > }
          >
          > #lowermenu ul li a{
          > border: 1px solid #778;
          > color: #FFFFFF;
          > padding: 1px 30px;
          > margin-right: 1px;
          > text-decoration: none;
          > background-color: #9191FF;
          > font-weight: bold;
          > /*background-image: url(DSC00408.JPG);*/
          > }
          >
          > #lowermenu ul li a:hover{
          > background-color: #CCC;
          > color: blue;
          > }
          >
          >
          > <div id="lowermenu">
          >

          • >
          • <a href="#">Home1</a>
            >
          • <a href="#">Home2</a></li>
            >
          • <a href="#">Home3</a></li>
            >
          • <a href="#">Home4</a></li>
            >

          > </div>
          >
          > Could any of you brainy people point out to me where the problem lies?
          >
          > Cheers
          >
          > Billy
          >
          >


          • 2. Re: What is causing this?
            ~Billy~ Level 1
            yup, will do...
            • 3. What is causing this?
              ~Billy~ Level 1
              http://www.tomkilbourn.com/menu.html

              The menu starts way out to the right of the div in FF and Safari (ok maybe about 20px too far out, but it is ok in IE7)

              • 4. Re: What is causing this?
                Level 7
                .oO(~Billy~)

                > http://www.tomkilbourn.com/menu.html
                >
                >The menu starts way out to the right of the div (ok maybe about 20px too far out, but it is ok in IE7)

                Different browsers have different default values. When working with
                lists, you have to adjust both margin and padding for the list itself
                and the list items. In your case it's the default padding on the 'ul'.

                Micha
                • 5. Re: What is causing this?
                  Level 7
                  Just trying to clarify myself, but are you talking about the padding like
                  this that he has:

                  #lowermenu ul li a{
                  border: 1px solid #778;
                  color: #FFFFFF;
                  padding: 1px 30px;Randy"Michael Fesser" <netizen@gmx.de> wrote in message
                  news:td3va3h5uar807hpf4melvf12d94gucila@4ax.com...
                  > .oO(~Billy~)
                  >
                  >> http://www.tomkilbourn.com/menu.html
                  >>
                  >>The menu starts way out to the right of the div (ok maybe about 20px too
                  >>far out, but it is ok in IE7)
                  >
                  > Different browsers have different default values. When working with
                  > lists, you have to adjust both margin and padding for the list itself
                  > and the list items. In your case it's the default padding on the 'ul'.
                  >
                  > Micha


                  • 6. Re: What is causing this?
                    ~Billy~ Level 1
                    Yes i want the padding to display the same in IE, FF and Safari.
                    • 7. Re: What is causing this?
                      ~Billy~ Level 1
                      Think Ive sorted it, added a padding of 0px to the ul and it seems ok now.
                      • 8. Re: What is causing this?
                        Level 7
                        .oO(Randy)

                        >Just trying to clarify myself, but are you talking about the padding like
                        >this that he has:
                        >
                        >#lowermenu ul li a{
                        > border: 1px solid #778;
                        > color: #FFFFFF;
                        > padding: 1px 30px;

                        Not exactly. The 'ul' and 'li' elements itself might have a default
                        margin and/or padding, depending on the browser. The rule above just
                        applies an additional padding to the link.

                        Micha