Strange padding issue

  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

I have a strange padding problem on a page. When I have no padding I get this strange space between the header and the navigation. And when I put a single pixel It goes away but the text jumps down quite a bit. Basicly what I want is the navigation to be right below the header, and the text to be centered in the blue bar.

Image

Live version: http://mymediaguy.com/main.html

CSS Code: [ Select ]
#headerContainer {
   background-image: url(images/header_bg.jpg);
   width: 1000px;
}
#mmgLogo {
   background-image: url(images/header.jpg);
   height: 115px;
   width: 492px;
}
#headerNavContainer {
   background-image: url(images/bar.jpg);
   height: 32px;
}
#bar {
   background-image: url(images/bar.jpg);
   height: 32px;
   
}
#headerNav {
 
}
#headerNav a:link {
   color:#FFFFFF;
   font-size: 16px;
   font-weight:bold;
   }
#headerNav a:hover {
   color:#FFFFFF;
   font-size: 16px;
   font-weight:bold;  
}
#headerNav ul {}
#headerNav ul li {
   display: inline;
   list-style-type: none;
}
  1. #headerContainer {
  2.    background-image: url(images/header_bg.jpg);
  3.    width: 1000px;
  4. }
  5. #mmgLogo {
  6.    background-image: url(images/header.jpg);
  7.    height: 115px;
  8.    width: 492px;
  9. }
  10. #headerNavContainer {
  11.    background-image: url(images/bar.jpg);
  12.    height: 32px;
  13. }
  14. #bar {
  15.    background-image: url(images/bar.jpg);
  16.    height: 32px;
  17.    
  18. }
  19. #headerNav {
  20.  
  21. }
  22. #headerNav a:link {
  23.    color:#FFFFFF;
  24.    font-size: 16px;
  25.    font-weight:bold;
  26.    }
  27. #headerNav a:hover {
  28.    color:#FFFFFF;
  29.    font-size: 16px;
  30.    font-weight:bold;  
  31. }
  32. #headerNav ul {}
  33. #headerNav ul li {
  34.    display: inline;
  35.    list-style-type: none;
  36. }


HTML Code: [ Select ]
  <div id="headerContainer">
      <div id="mmgLogo"></div>
      <div id="headerNavContainer">
         <div id="headerNav">
            <ul>
               <li><a href="#">Link</a></li>
               <li><a href="#">Link</a></li>
               <li><a href="#">Link</a></li>
               <li><a href="#">Link</a></li>
            </ul>
         </div>
      </div>
   </div>
  1.   <div id="headerContainer">
  2.       <div id="mmgLogo"></div>
  3.       <div id="headerNavContainer">
  4.          <div id="headerNav">
  5.             <ul>
  6.                <li><a href="#">Link</a></li>
  7.                <li><a href="#">Link</a></li>
  8.                <li><a href="#">Link</a></li>
  9.                <li><a href="#">Link</a></li>
  10.             </ul>
  11.          </div>
  12.       </div>
  13.    </div>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

You know what I think might be messing you up? All the default padding and margin settings that different browsers have. Try putting this in your CSS and see if it helps at all:
Code: [ Select ]
div{margin:0px;padding:0px;}
ul{margin:0px;padding:0px;}
li{margin:0px;padding:0px;}
h1{margin:0px;padding:0px;}
h2{margin:0px;padding:0px;}
h3{margin:0px;padding:0px;}
p{margin:0px;padding:0px;}
  1. div{margin:0px;padding:0px;}
  2. ul{margin:0px;padding:0px;}
  3. li{margin:0px;padding:0px;}
  4. h1{margin:0px;padding:0px;}
  5. h2{margin:0px;padding:0px;}
  6. h3{margin:0px;padding:0px;}
  7. p{margin:0px;padding:0px;}
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

CSS Code: [ Select ]
div, ul, li, h1, h2, h3, p {
margin:0px;
padding:0px;
}
  1. div, ul, li, h1, h2, h3, p {
  2. margin:0px;
  3. padding:0px;
  4. }

:P
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

neksus wrote:
CSS Code: [ Select ]
div, ul, li, h1, h2, h3, p {
margin:0px;
padding:0px;
}
  1. div, ul, li, h1, h2, h3, p {
  2. margin:0px;
  3. padding:0px;
  4. }

:P

Well.. if you like doing things the easy way...

:lol:
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Easy...I like that. Most people would have said lazy :P
  • Bogey
  • Bogey
  • Genius
  • Bogey
  • Posts: 8363
  • Loc: USA

Post 3+ Months Ago

jameson5555 wrote:
You know what I think might be messing you up? All the default padding and margin settings that different browsers have. Try putting this in your CSS and see if it helps at all:
Code: [ Select ]
div{margin:0px;padding:0px;}
ul{margin:0px;padding:0px;}
li{margin:0px;padding:0px;}
h1{margin:0px;padding:0px;}
h2{margin:0px;padding:0px;}
h3{margin:0px;padding:0px;}
p{margin:0px;padding:0px;}
  1. div{margin:0px;padding:0px;}
  2. ul{margin:0px;padding:0px;}
  3. li{margin:0px;padding:0px;}
  4. h1{margin:0px;padding:0px;}
  5. h2{margin:0px;padding:0px;}
  6. h3{margin:0px;padding:0px;}
  7. p{margin:0px;padding:0px;}

jameson5555 wrote:
neksus wrote:
CSS Code: [ Select ]
div, ul, li, h1, h2, h3, p {
margin:0px;
padding:0px;
}
  1. div, ul, li, h1, h2, h3, p {
  2. margin:0px;
  3. padding:0px;
  4. }

:P

Well.. if you like doing things the easy way...

:lol:

:lol: Don't worry... I do the same thing... I'm not lazy :P

Although, I'll go for easy any time :D
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

*shrugs*
I got used to optimizing bandwidth for dial up connections and the habit stuck :P
  • Bogey
  • Bogey
  • Genius
  • Bogey
  • Posts: 8363
  • Loc: USA

Post 3+ Months Ago

neksus wrote:
*shrugs*
I got used to optimizing bandwidth for dial up connections and the habit stuck :P

That's a good thing :P
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Yeah...I had 14.4 for about 4 years.

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 53 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.