Assistance Requested: Margins refusing to disappear?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • alternium
    New Member
    • Mar 2007
    • 3

    Assistance Requested: Margins refusing to disappear?

    Hi all,
    Thanks for providing this forum. I know every other poster tries to hammer the time-sensitivity point, so I'll forego that. Suffice to say, Monday is go-day.
    I'm having an issue getting my margins to disappear. I've tried all sorts of manipulations on my margin and padding tags, all to no avail. On the page below, I've temporarily set the container's background to grey to illuminate the gaps I want to disappear within "container. "

    http://www.alternium.n et/Bodie/index.html
    Here's my css:

    Code:
    /* CSS Document */
    /* CSS Document */
    
    html,body {
    	background-color: #c6c6c6;
    	margin:0px; 
    	padding:0px; 
    	min-width:700px;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	color: #000000;
    	font-size:100%;
    	font-style: normal;
    	line-height: normal;
    	font-weight: normal;
    	text-align:center;
    	text-decoration: none;
    }
    #container {
    	margin-top:0px;
    	margin-left:auto;
    	margin-right:auto;
    	margin-bottom:0px;
    	float: none;
    /*	background-color:#ffffff;*/
    	background-color:#999999;
    	text-align: left;
    	width:700px;
    	padding:0px;
    }
    #banner{
     	margin-left:0px;
    	margin-bottom:4px;
    	margin-top:0px;
    	margin-right:0px;
    /*	margin:auto;*/
    	width:700px;
    	height:130px;
    	background-color: #ffffff;
    	padding:0px;
    }
    #navigation{
    	background-color:#ff2700;
    	width:700px;
    	height:45;
    	padding:0px;
     	margin-left:0px;
    	margin-bottom:4px;
    	margin-top:0px;
    	margin-right:0px;
    }
    #body {
    	width:700px;
    	height:98px;
    	background-color:#ffffff;
    	padding:0px;
     	margin-left:0px;
    	margin-bottom:4px;
    	margin-top:0px;
    	margin-right:0px;
    
    /*	background:url(images/top.jpg) no-repeat;*/
    }
    #footer {
    	background-color: ;
    	width:700px;
    	height:72px;
    	background-color:#ff2700;
    	padding:0px;
     	margin-left:0px;
    	margin-bottom:4px;
    	margin-top:0px;
    	margin-right:0px;
    
    /*	background:url(images/bottom.jpg) no-repeat;*/
    If anyone has a helpful pointer, I'd love to hear it.
    Thanks!
    -Ars
  • drhowarddrfine
    Recognized Expert Expert
    • Sep 2006
    • 7434

    #2
    Many elements have a default margin on them. To get rid of all of them, just add this to your css:
    *{margin:0;padd ing:0}

    That will require some adjusting of each element but it gets rid of the gaps.

    Comment

    • alternium
      New Member
      • Mar 2007
      • 3

      #3
      Originally posted by drhowarddrfine
      Many elements have a default margin on them. To get rid of all of them, just add this to your css:
      *{margin:0;padd ing:0}

      That will require some adjusting of each element but it gets rid of the gaps.
      I actually tried setting the generic margin to 0 and that didn't work which is why I then tried setting each margin to 0 or 4 individually. I'm thinking there might be a problem with my HTML or the way I'm organizing my divs?
      URL changed to http://www.alternium.n et/Bodie/index.php
      Thanks for advice, though.
      -Ars

      Comment

      • drhowarddrfine
        Recognized Expert Expert
        • Sep 2006
        • 7434

        #4
        I don't know why the fix I gave you didn't work, it does for me.
        Your h2 and h4 on this current page have margins that are causing the problem there. Just set their margins to zero.

        Comment

        • alternium
          New Member
          • Mar 2007
          • 3

          #5
          That was It!
          Thanks so much for pointing that out.
          Kudos.
          -Ars Moriendi

          Comment

          Working...