1. Home
  2. Forums Index
  3. Browser Side / CSS 4:26 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Trouble with css padding

padding seems to extend into border

         

kdwyer

12:09 am on Jul 5, 2010 (gmt 0)

10+ Year Member



Happy 4th! Perhaps someone in the UK will answer this ;)

This is a simple horizontal menu. The trouble is, when I try to add padding to the tops and bottoms of the list elements, the padding extends into the borders of the containing divs. Any help will be appreciated!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<STYLE type="text/css">
/* #003366 Dark Blue */
/* #ccffff Light Blue */

* {
margin: 0px;
padding: 0px;
}

body {
background: #ccffff;
}
div.header_wrapper {
background: #003366;
}
div.header {
background: #003366;
color: #ccffff;
padding: 15px;
padding-top: 20px;
font-size: 2.5em;
font-family: Arial,sans-serif;
font-style: italic;
}

div.navbar {
padding: 0px;
margin: 0px;
border-top: 5px solid #ccffff;
border-bottom: 5px solid #003366;
}
#navmenu ul {
list-style-type: none;
}
#navmenu ul li {
display: inline;
}
#navmenu li a {
font-family: Arial,sans-serif;
font-size: 14px;
font-weight: normal;
text-decoration: none;
padding: .2em 1em;
/*padding-left: 1em; */
/*padding-right: 1em; */
color: #ccffff;
background: #003366;
}

#navmenu ul li a:hover {
color: #003366;
background: #ccffff;
}

</STYLE>
</head>
<body>
<div class="header_wrapper">
<div class="header">
Allison Moore Salon
</div>
<div class="navbar" id="navmenu">
<ul>
<li><a href="http://www.example.com">Home</a></li>
<li><a href="http://www.example.com">Services and Prices</a></li>
<li><a href="http://www.example.com">Hours and Location</a></li>
<li><a href="http://www.example.com">Testimonials</a></li>
<li><a href="http://www.example.com">About Allison Moore</a></li>
</ul>
</div>
</div>
</body>
</html>

birdbrain

10:42 am on Jul 5, 2010 (gmt 0)



Hi there kdwyer,

and a warm welcome to these forums. ;)

Try it like this... 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>untitled document</title>

<style type="text/css">
/* #036 Dark Blue */
/* #cff Light Blue */

* {
margin:0;
padding:0;
}
body {
font-family:arial,sans-serif;
background-color:#cff;
}
#header_wrapper {
background-color:#036;
}
#header {
padding:20px 15px 15px;
font-size:2.5em;
font-weight:normal;
font-style:italic;
color:#cff;
}
#navmenu {
width:100%;
border-top:5px solid #cff;
border-bottom:5px solid #036;
list-style-type:none;
overflow:hidden;
}
#navmenu li {
float:left;
}
#navmenu a {
display:block;
padding:0.2em 1em;
font-size:14px;
color: #cff;
text-decoration: none;
}
#navmenu a:hover {
color:#036;
background:#cff;
}
</style>

</head>
<body>

<div id="header_wrapper">

<h1 id="header">Allison Moore Salon</h1>

<ul id="navmenu" >
<li><a href="http://www.example.com">Home</a></li>
<li><a href="http://www.example.com">Services and Prices</a></li>
<li><a href="http://www.example.com">Hours and Location</a></li>
<li><a href="http://www.example.com">Testimonials</a></li>
<li><a href="http://www.example.com">About Allison Moore</a></li>
</ul>

</div>

</body>
</html>

birdbrain

kdwyer

11:41 pm on Jul 5, 2010 (gmt 0)

10+ Year Member



Thanks so much, Birdbrain ;-) For both the warm welcome and for solving the problem. A few questions....

First it seems like the css lines that did the trick were using display:block in the "#navmenu a" specification in combination with using overflow:hidden in the "#navmenu" specification. The padding won't work without this, but I don't understand why. I've encountered plenty of horizontal menus on the web using display:inline (without the float:left for the li). So I'm wondering if there is a reason you prefer the display:block implementation. It seems counter-intuitive to me (but clearly I'm clueless).

Also, you seem to like the three character hex codes for colors as opposed to the 6 character representations. Why is that? Is there some algorithm for deriving the three character codes from the six character ones? What would I use for #424242 for example...

Thanks so much for any insight you can give me! Karen

birdbrain

10:07 am on Jul 6, 2010 (gmt 0)



Hi there Karen,

have a look at this little example, it may show you the problems with applying padding to an inline element... 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
div {
margin:30px 0;
background-color:#ccc;
text-align:center;border:1px solid #000;
}

.ideal-span{
padding:20px;
background-color:#ccf;
}

#span2{
padding:0 20px;
background-color:#cfc;
}

#span3{
line-height:58px;
padding:0 20px;
background-color:#fcc;
}

#span4{
display:block;
width:130px;
padding:20px;
margin:auto;
background-color:#ffc;
}

#div2 {
padding:20px 0;
}
</style>

</head>
<body>

<div>
<span class="ideal-span">padding:20px</span>
</div>

<div>
<span id="span2">padding:0 20px</span>
</div>

<div>
<span id="span3">line-height:58px;padding:0 20px</span>
</div>

<div>
<span id="span4">display:block; width:130px; padding:20px; margin:auto;</span>
</div>

<div id="div2">
<span class="ideal-span">padding:20px</span>
</div>

</body>
</html>


Now using your original code this is how I could have made it work... 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>untitled document</title>


<style type="text/css">
/* #003366 Dark Blue */
/* #ccffff Light Blue */

* {
margin: 0px;
padding: 0px;
}

body {
background: #ccffff;
}
div.header_wrapper {
background: #003366;
}
div.header {
background: #003366;
color: #ccffff;
padding: 15px;
padding-top: 20px;
font-size: 2.5em;
font-family: Arial,sans-serif;
font-style: italic;
}

div.navbar {
padding: 0px;
margin: 0px;
border-top: 5px solid #ccffff;
border-bottom: 5px solid #003366; 
}

#navmenu ul { 
list-style-type: none;

padding:0.2em 0 ;

}

#navmenu ul li {
display: inline;
}

#navmenu li a {
font-family: Arial,sans-serif;
font-size: 14px;
font-weight: normal;
text-decoration: none;
/*padding: .2em 1em;*/

padding:0.4em 1em .2em;

/*padding-left: 1em; */
/*padding-right: 1em; */
color: #ccffff;
background: #003366;
}

#navmenu ul li a:hover {
color: #003366;
background: #ccffff;
} 
</style>

<!--[if IE 6]>
<style type="text/css">
#navmenu ul {
zoom:1;
</style>
<![endif]--> 

</head>
<body>

<div class="header_wrapper">
<div class="header">
Allison Moore Salon
</div>
<div class="navbar" id="navmenu">
<ul>
<li><a href="http://www.example.com">Home</a></li>
<li><a href="http://www.example.com">Services and Prices</a></li>
<li><a href="http://www.example.com">Hours and Location</a></li>
<li><a href="http://www.example.com">Testimonials</a></li>
<li><a href="http://www.example.com">About Allison Moore</a></li>
</ul>
</div>
</div> 

</body>
</html>


The three character hex codes can only be used for three paired values...

#000000 can be #000
#ee9944 can be #e9b
#bb77aa can be #b7a

...to save a few bytes. ;)

Explanations are not really my forte, so I hope that this may have helped in some small way. :)

birdbrain

kdwyer

9:19 pm on Jul 7, 2010 (gmt 0)

10+ Year Member



Dear birdbrain,

Thanks so much for all the time you took to illustrate the padding complexities for me. I appreciate your efforts and your ability to clean up my hacks ;) Someday, browsers will all operate the same way. Then maybe we can spend less time on webforums and hacking code.

Saving a few bytes! How deliciously old school!

Thanks again! Karen

birdbrain

9:30 pm on Jul 7, 2010 (gmt 0)



No problem, you're very welcome. ;)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 4:26 pm May 1, 2026