SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Extra spaces between everything

    http://www.wolfdogrescue.net/index2.html is my website. Im getting extra space between my paragraphs and I dont know why. In ie, it affects everything below the header, in ff, it affects the whole page. Adding * {margin:0; padding:0;} fixes it, but I have read that this is a bad thing to do. What alternatives do I have?

    Here is the code for a page:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Wolfdog Rescue Network - Home</title>
    <meta name="keywords" content="wolf, wolves, dog, dogs, hybrid, hybrids, wolf-hybrid, wolf-hybrids, wolfdog, wolfdogs, wolf-dog, wolf-dogs, adopt, adoption, rescue, rescues, sanctuary, sanctuaries, place, placement">
    <meta name="description" content="Assisting in the Rescue and Placement of Wolfdogs and their Kin">
    
    <link href="StyleSheets/styles.css" rel="stylesheet" type="text/css">
    
    </head>
    <body>
    
    <!-- start logo -->
     <div id="logo">
      <div id="logopic">&nbsp;</div>
      <div id="logotext">
       <div id="head1"><h1>WOLFDOG</h1></div> 
       <div id="head2"><h1>RESCUE</h1></div> 
       <div id="head3"><h1>NETWORK</h1></div>
      </div>
    
    <!-- start menu -->
      <div id="menu">
       <ul>
        <li><a href="index2.html">Home</a></li>
        <li><a href="adopt.html">Adoption</a></li>
        <li><a href="place.html">Placement</a></li>
        <li><a href="adopted.html">Adopted</a></li>
        <li><a href="memorial.html">Memorial</a></li>
        <li><a href="faq.html">FAQ</a></li>
        <li><a href="contact.html">Contact</a></li>
       </ul>
       <div id="menuright">&nbsp;</div>      
      </div>	
    <!-- end menu -->
     </div>
    <!-- end logo -->
    
    <div id="outer"> 
    <!-- start page -->
     <div id="page">
      <h1 id="title">WELCOME</h1>
      <div id="entry">
       <img src="StyleSheets/images/frontmeissa.png" id="indeximage" alt="">
       <p>blah, blah, blah</p> 
       <br>
       <p>blah, blah, blah</p>
       <br>
       <p>blah, blah, blah</p>
       <br>
       <p><img src="StyleSheets/images/frontbandit.png" id="indeximage2" alt=""></p>
      </div>
      <div style="clear: both;">&nbsp;</div>
     </div>
    <!-- end page -->
    </div>
    
    <!-- start footer -->
     <div id="footer">
      <p>Copyright &copy; 2008. Design by <a href="http://www.metamorphozis.com/" title="Flash Web Templates">Flash Web Templates</a></p>
      <p><a href="mailto:pams@nightowl.net">Contact</a> | <a href="faq.html">FAQ</a> | <a href="rescues.html">Other Rescues</a></p>
     </div>
    <!-- end footer -->
    
    </body>
    </html>
    The css:
    Code:
    body{
     margin:0;
     padding:0;
     background:#D5EDB3 url(images/bg.gif) repeat-y left;
     font-family:Arial, Helvetica, sans-serif;
     }
    
    h1{
     color:#337733;
     }
    
    h2{
     font-size:1.13em;
     font-weight:bold;
     color:#993300;
     }
    
    a{
     text-decoration:underline;
     color:#2C5C89;
     }
    
    a:hover{
     border:none;
     text-decoration:none;
     }
    
    #outer{
     margin-left:50px;
     margin-right:42px;
     min-width:776px;
     }
    
     
    /* Logo */
    #logo{
     height:120px;
     background:url(images/logoline.gif) repeat-x;
     }
    
    #logopic{
     height:86px;
     width:383px;
     background:url(images/logo.png) no-repeat;
     float:left
     }
     
    #logomid{
     height:86px;
     float:left;
     }
    
    #logotext{
     height:69px;
     background:url(images/back.gif) no-repeat right;
     float:right;
     padding-right:70px;
     padding-top:17px;
     }
    
    #logotext h1{
     color:#666666;
     font-size:.75em;
     letter-spacing:.38em;
     }
     
    #head1{
     height:18px;
     }
     
    #head2{
     height:18px;
     padding-left:45px;
     }
     
    #head3{
     height:18px;
     padding-left:90px;
     }
     
    
    /* Menu (contained by logo) */
    #menu{
     height:34px;
     background: url(images/barline.gif) repeat-x;
     min-width:735px;
     float:left;
     width:100%; 
     }
    
    #menu ul{
     margin:0;
     padding:0;
     list-style:none;
     line-height:normal;
     }
    
    #menu li{
     float:left;
     }
    
    #menu a{
     display:block;
     float:left;
     height:24px;
     width:105px;
     text-decoration:none;
     font-size:.94em;
     font-weight:bold;
     color:#ffffff;
     padding-top:10px;
     text-align:center;
     }
    
    #menu a:hover{
     color:#CC4400;
     background:url(images/barline2.gif) repeat-x;
     }
     
    #menuright{
     float:right;
     width:8px;
     height:34px;
     background:url(images/pagebg.gif) repeat-y;
     }
    
    /* Page */
    #page{
     background:#FFFFCC url(images/pagebg.gif) repeat-y right;
     padding-top:20px;
     padding-left:18px;
     min-height:400px;
     color:#444444;
     }
     
    #title{
     padding-left:5px;
     padding-bottom:15px;
     font-weight:normal;
     height:30px;
     font-size:1.56em;
     }
    
    #entry{
     padding:0 41px 30px 15px;
     line-height:1.56em;
     font-size:.81em;
     }
     
    #entry ul{
     padding-left:15px;
     } 
     
    #entry li{
     padding-bottom:15px;
     }
     
    /* Footer */
    #footer{
     padding:20px;
     background:url(images/pagebg.gif) repeat-y right;
     }
    
    #footer p{
     text-align:center;
     font-size:9px;
     color:#999999;
     margin:0px;
     padding:0px;
     }
     
    #footer a{
     color:#999999;
     }
    
    
    /* Extra ID's */
    #arrow{
     height:49px;
     width:122px;
     float:right;
     background:url(images/arrow.png) no-repeat;
     padding-top:23px;
     padding-left:15px;
     display:block;
     }
     
    #arrow a{
     font-size:1.23em;
     font-weight:bold;
     color:#ffffff;
     text-decoration:none;
     }
     
    #arrow a:hover{
     color:#CC4400;
     }
      
    #indeximage{
     padding-left:20px;
     float:right;
     display:block;
     }
     
    #indeximage2{
     margin-left:auto;
     margin-right:auto;
     display:block;
     } 
     
    #updates{
     background:#FFFFFF;
     border:#000000 1px solid;
     padding:10px;
     margin-bottom:25px;
     }
     
    #updates ul{
     padding-left:20px;
     } 
     
     
    /* Classes */ 
    .adopted{
     color:#006600;
     }
    .urgent{
     color:#FF0000
     }
    .faq{
     font-weight:bold;
     color:#FF0000;
     padding-top:15px;
     }
    Help?

  2. #2
    SitePoint Zealot loathsome's Avatar
    Join Date
    Jul 2008
    Location
    Norway
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just reset the margin values globally for each paragraph tag. Add this to your CSS:

    Code:
    p {
    margin:0;
    }
    And globally resetting both margin and padding (* {}) is actually not a "bad thing to do", in fact it's a very good practice to always do this, then manually set those values later on. (Different browsers have different standard values for margin/padding)

    This way, you always have a 100&#37; control of all your code.
    Time you enjoy wasting is not wasted time.

    Loathsome Systems

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Adding * {margin:0; padding:0;} fixes it, but I have read that this is a bad thing to do.
    That's because it upsets form elements. If you remove the margin and padding from form some form elements you change their behaviour in some browsers.

    For instance the depressed effect on submit buttons disappears in gecko browsers and can't be re-instated. There are are also issues with select elements.

    You would be better off using a proper reset technique like this. I have also documented some of the issues with the the other method here. If you don't have any form elements then * {margin:0;padding:0} would be ok to use and I use it while testing anyway. However a proper reset is the way to go although it does increase code weight.

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys! I think I will be sticking to the * selector then, since I dont have any form elements. Maybe when I get better at css I will go through and style things individually, but for now I'll stay with what works. Thank you Paul for the links! I'll play around with that reset code, although so far the only problems I was having at all were fixed with * {margin:0; padding:0;} .


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
  •