Back To Website Design Forum

Strange padding issue

  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Joined: May 22, 2004
  • Posts: 3415
  • Loc: Richland, WA
  • Status: Offline

Post April 19th, 2008, 5:52 pm

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>
#define NULL (::rand() % 2)
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 19th, 2008, 5:52 pm

  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post April 23rd, 2008, 12:28 pm

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;}
phoenix web design
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 10, 2004
  • Posts: 2194
  • Loc: Canada
  • Status: Offline

Post April 23rd, 2008, 12:42 pm

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
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post April 23rd, 2008, 1:17 pm

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:
phoenix web design
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 10, 2004
  • Posts: 2194
  • Loc: Canada
  • Status: Offline

Post April 23rd, 2008, 4:41 pm

Easy...I like that. Most people would have said lazy :P
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post April 23rd, 2008, 6:36 pm

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
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 10, 2004
  • Posts: 2194
  • Loc: Canada
  • Status: Offline

Post April 23rd, 2008, 7:41 pm

*shrugs*
I got used to optimizing bandwidth for dial up connections and the habit stuck :P
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post April 23rd, 2008, 7:42 pm

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

That's a good thing :P
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 10, 2004
  • Posts: 2194
  • Loc: Canada
  • Status: Offline

Post April 23rd, 2008, 7:54 pm

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

Page 1 of 1

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 115 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
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.