10 Replies Latest reply on May 13, 2010 8:39 AM by rebeccajane1299

    How do I remove automatic margins when using list tags?

    rebeccajane1299

      Hi there,

       

      i'm trying to create a list of links on my webpage using Dreamweaver CS4. I've created a .li tag using CSS so that no bullets/numbers show up and i've then created .ul a:link, ul a:hover etc compound tags to make all list items into rollovers.

       

      However, the text in the lists indents automatically (as if I have set some sort of margin) and is thus, out of line with the text above it. No margin/padding is set in any of the CSS elements so I am confused.

       

      Any help would be appreciated.

        • 1. Re: How do I remove automatic margins when using list tags?
          osgood_ Level 8

          Can you post your code/css here for your navigation please so someone can take a look?

          • 2. Re: How do I remove automatic margins when using list tags?
            rebeccajane1299 Level 1

            yeah sure...

             

            code:

             

            </head>


            <body class="twoColFixLtHdr">


            <div id="container">

              <div id="header"><img src="../images/navbar_footer/navbar_ips.gif" alt="International Project Space" width="334" height="90" border="0" /><img src="../images/navbar_footer/navbar_ex.gif" width="128" height="90" alt="IPS- Exhibitions" /><img src="../images/navbar_footer/navbar_pro.gif" width="148" height="90" alt="IPS- projects" /><img src="../images/navbar_footer/navbar_info.gif" width="142" height="90" alt="IPS- Info" /></div>

              <!-- end #header -->

              <div id="sidebar1"><!-- end #sidebar1 -->

              </div>

              <div id="mainContent">

              <ul>

                <li><a href="../index.html">Current</a></li>

                <li><a href="../index.html">Forthcoming</a></li>

                <li><a href="../index.html">Archive</a></li>

                <li><a href="../index.html">NOICES</a></li>

              </ul>

              <!-- end #mainContent --></div>

            <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->

            <br class="clearfloat" />

              <div id="footer"><img src="../images/navbar_footer/footer.gif" width="193" height="80" alt="IPS- Contact Us" />

              <!-- end #footer --></div>

            <!-- end #container --></div>

            </body>

            </html>

            CSS:
            @charset "UTF-8";
            body  {
            font: 100% Verdana, Arial, Helvetica, sans-serif;
            background: #666666;
            margin: 0;
            padding: 0;
            text-align: center;
            color: #000000;
            }
            .twoColFixLtHdr #container {
            width: 780px; 
            background: #FFFFFF;
            margin:0 auto;
            text-align: left;
            }
            .twoColFixLtHdr #header {
            margin: 0;
            background: #FFFFFF;
            padding: 0 0px 0 0px; 
            }
            .twoColFixLtHdr #header h1 {
            margin: 0;
            padding: 0px 0;
            .twoColFixLtHdr #sidebar1 {
            float: left;
            width: 334px;
            background: #FFFFFF;
            padding: 0px;
            height: 529px;
            }
            .twoColFixLtHdr #mainContent {
            margin: 0 0 0 334px;
            padding: 0 7px;
            }
            .twoColFixLtHdr #footer {
            background:#FFFFFF;
            width: 334px;
            padding-top: 0;
            padding-right: 10px;
            padding-bottom: 0;
            padding-left: 0px;
            }
            .twoColFixLtHdr #footer p {
            margin: 0;
            padding: 10px 0;
            }
            .fltrt {
            float: right;
            margin-left: 8px;
            }
            .fltlft {
            float: left;
            margin-right: 8px;
            }
            .clearfloat {
            clear:both;
                height:0;
                font-size: 1px;
                line-height: 0px;
            }
            ul a:link {
            font-family: "Courier New", Courier, monospace;
            font-size: 12px;
            color: #000;
            text-decoration: none;
            }
            ul a:visited {
            font-family: "Courier New", Courier, monospace;
            font-size: 12px;
            color: #000;
            text-decoration: none;
            }
            ul a:hover {
            font-family: "Courier New", Courier, monospace;
            font-size: 12px;
            color: #F00;
            }
            li {
            list-style-type: none;
            }

            • 3. Re: How do I remove automatic margins when using list tags?
              osgood_ Level 8
              First off you're missing a closing bracket after the h1 css selector:

              .twoColFixLtHdr #header h1 {
              margin: 0;
              padding: 0px 0;

               

               

              Plus you need to zero out the margin and padding on both the <ul> and <li> tags:

               

               

              ul {
              margin: 0;
              padding: 0;
              }

               

              li {
              margin: 0;
              padding: 0;
              list-style-type: none;
              }

              1 person found this helpful
              • 4. Re: How do I remove automatic margins when using list tags?
                thuy.copeland Level 2

                Hi Rebecca,

                 

                Browsers assign default styles to certain tags. Some tags come with default padding and/or margins. Unordered lists have default top and bottom margins and left padding. Paragraph tags come with default top and bottom margins too.

                 

                To reset them, set your CSS to this:

                 

                ul{

                     margin: 0;

                     padding: 0;

                }

                 

                For more background information on default styles in browers, check out http://meyerweb.com/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss/

                 

                Or, if you're really brave, go ahead and read/experiment with Eric Meyer's CSS reset: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

                1 person found this helpful
                • 5. Re: How do I remove automatic margins when using list tags?
                  rebeccajane1299 Level 1

                  Thanks for your replies. I set ul and li styles to 0px (padding and margin). But I still have the same problem 

                  • 6. Re: How do I remove automatic margins when using list tags?
                    osgood_ Level 8

                    rebeccajane1299 wrote:

                     

                    Thanks for your replies. I set ul and li styles to 0px (padding and margin). But I still have the same problem 

                     

                    Did you insert the missing bracket after your h1 css selector as I pointed out in my first post?

                     

                    If you don't the css won't cascade properly.

                     

                    If you did you should be seeing no issues. The link text lines up beneath each other as it should do.

                    • 7. Re: How do I remove automatic margins when using list tags?
                      rebeccajane1299 Level 1

                      apologies, the bracket's missing due to me copying and pasting the css...it's present in the original file. So it can't be that that's making it out of line??

                      • 8. Re: How do I remove automatic margins when using list tags?
                        osgood_ Level 8

                        Here is the complete page and css code (below). Copy all, paste into a new Dreamweaver document. What happens?

                         

                         

                        <!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>
                        <style type="text/css">
                        body  {
                        font: 100% Verdana, Arial, Helvetica, sans-serif;
                        background: #666666;
                        margin: 0;
                        padding: 0;
                        text-align: center;
                        color: #000000;
                        }
                        .twoColFixLtHdr #container {
                        width: 780px;
                        background: #FFFFFF;
                        margin:0 auto;
                        text-align: left;
                        }
                        .twoColFixLtHdr #header {
                        margin: 0;
                        background: #FFFFFF;
                        padding: 0 0px 0 0px;
                        }
                        .twoColFixLtHdr #header h1 {
                        margin: 0;
                        padding: 0px 0;
                        }
                        .twoColFixLtHdr #sidebar1 {
                        float: left;
                        width: 334px;
                        background: #FFFFFF;
                        padding: 0px;
                        height: 529px;
                        }
                        .twoColFixLtHdr #mainContent {
                        margin: 0 0 0 334px;
                        padding: 0 7px;
                        }
                        .twoColFixLtHdr #footer {
                        background:#FFFFFF;
                        width: 334px;
                        padding-top: 0;
                        padding-right: 10px;
                        padding-bottom: 0;
                        padding-left: 0px;
                        }
                        .twoColFixLtHdr #footer p {
                        margin: 0;
                        padding: 10px 0;
                        }
                        .fltrt {
                        float: right;
                        margin-left: 8px;
                        }
                        .fltlft {
                        float: left;
                        margin-right: 8px;
                        }
                        .clearfloat {
                        clear:both;
                            height:0;
                            font-size: 1px;
                            line-height: 0px;
                        }
                        ul a:link {
                        font-family: "Courier New", Courier, monospace;
                        font-size: 12px;
                        color: #000;
                        text-decoration: none;
                        }
                        ul a:visited {
                        font-family: "Courier New", Courier, monospace;
                        font-size: 12px;
                        color: #000;
                        text-decoration: none;
                        }
                        ul a:hover {
                        font-family: "Courier New", Courier, monospace;
                        font-size: 12px;
                        color: #F00;
                        }
                        ul {
                        margin: 0;
                        padding: 0;
                        }

                         

                        li {
                        margin: 0;
                        padding: 0;
                        list-style-type: none;
                        }
                        </style>
                        </head>

                         

                        <body class="twoColFixLtHdr">

                         


                        <div id="container">

                         

                          <div id="header"><img src="../images/navbar_footer/navbar_ips.gif" alt="International Project Space" width="334" height="90" border="0" /><img src="../images/navbar_footer/navbar_ex.gif" width="128" height="90" alt="IPS- Exhibitions" /><img src="../images/navbar_footer/navbar_pro.gif" width="148" height="90" alt="IPS- projects" /><img src="../images/navbar_footer/navbar_info.gif" width="142" height="90" alt="IPS- Info" /></div>

                         

                          <!-- end #header -->

                         

                          <div id="sidebar1"><!-- end #sidebar1 -->

                         

                          </div>

                         

                          <div id="mainContent">

                         

                          <ul>

                         

                            <li><a href="../index.html">Current</a></li>

                         

                            <li><a href="../index.html">Forthcoming</a></li>

                         

                            <li><a href="../index.html">Archive</a></li>

                         

                            <li><a href="../index.html">NOICES</a></li>

                         

                          </ul>

                         

                          <!-- end #mainContent --></div>

                         

                        <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->

                         

                        <br class="clearfloat" />

                         

                          <div id="footer"><img src="../images/navbar_footer/footer.gif" width="193" height="80" alt="IPS- Contact Us" />

                         

                          <!-- end #footer --></div>

                         

                        <!-- end #container --></div>

                         

                        </body>
                        </html>

                        • 9. Re: How do I remove automatic margins when using list tags?
                          thuy.copeland Level 2

                          Once you add the margin/padding 0 to your css and close the bracket, everything lines up for me. Can you post a screenshot of the problem?

                          • 10. Re: How do I remove automatic margins when using list tags?
                            rebeccajane1299 Level 1

                            ah, I think I might have solved it... The bodytext css was set to text-align: centre, now that I have changed that too left align, it seems to be working ok.

                             

                            Many thanks for all your help