CSS Bottom Margin Issue

HTML & CSS
1

Hey folks,

I’m having a bit of a weird issue with, what seems to me, to be a bottom margin issue. I’ve attached a screenshot of what I currently have working below, and you’ll see that there is space between each list item, I’ve highlighted the space in red for three instances of the issue, but I don’t want this.

Here is the HTML I’m using:

				<div class="column-1">
					<ul class="featured-jobs">
						<li><a href="">Front-End Web Developer <b>at</b> Headscape <br/> <b>Location:</b> Devon, UK &ndash;
						<b>Salary:</b> &pound;27,000 &ndash; <b>Type:</b> Full-Time</a></li>
						<li><a href="">Front-End Web Developer <b>at</b> Headscape <br/> <b>Location:</b> Devon, UK &ndash;
						<b>Salary:</b> &pound;27,000 &ndash; <b>Type:</b> Full-Time</a></li>
						<li><a href="">Front-End Web Developer <b>at</b> Headscape <br/> <b>Location:</b> Devon, UK &ndash;
						<b>Salary:</b> &pound;27,000 &ndash; <b>Type:</b> Full-Time</a></li>
						<li><a href="">Front-End Web Developer <b>at</b> Headscape <br/> <b>Location:</b> Devon, UK &ndash;
						<b>Salary:</b> &pound;27,000 &ndash; <b>Type:</b> Full-Time</a></li>
						<li><a href="">Front-End Web Developer <b>at</b> Headscape <br/> <b>Location:</b> Devon, UK &ndash;
						<b>Salary:</b> &pound;27,000 &ndash; <b>Type:</b> Full-Time</a></li>
					</ul>
				</div>

				<div class="column-2">
					<ul class="featured-jobs">
						<li><a href="">Front-End Web Developer <b>at</b> Headscape <br/> <b>Location:</b> Devon, UK &ndash;
						<b>Salary:</b> &pound;27,000 &ndash; <b>Type:</b> Full-Time</a></li>
						<li><a href="">Front-End Web Developer <b>at</b> Headscape <br/> <b>Location:</b> Devon, UK &ndash;
						<b>Salary:</b> &pound;27,000 &ndash; <b>Type:</b> Full-Time</a></li>
						<li><a href="">Front-End Web Developer <b>at</b> Headscape <br/> <b>Location:</b> Devon, UK &ndash;
						<b>Salary:</b> &pound;27,000 &ndash; <b>Type:</b> Full-Time</a></li>
						<li><a href="">Front-End Web Developer <b>at</b> Headscape <br/> <b>Location:</b> Devon, UK &ndash;
						<b>Salary:</b> &pound;27,000 &ndash; <b>Type:</b> Full-Time</a></li>
						<li><a href="">Front-End Web Developer <b>at</b> Headscape <br/> <b>Location:</b> Devon, UK &ndash;
						<b>Salary:</b> &pound;27,000 &ndash; <b>Type:</b> Full-Time</a></li>
					</ul>
				</div>

And here is the CSS I’m using, I’ve left out the CSS for the column-1 and column-2 divisions because I don’t believe they have anything to do with the issue I’m having.

ul.featured-jobs {
	border: 1px solid black;
	padding: 0;
	margin: 0;
}

ul.featured-jobs li {
	list-style-type: none;
	background-color: #EEEEEE;
	border-bottom: 1px solid black;
}

ul.featured-jobs li a:link, ul.featured-jobs li a:visited {
	border-bottom: none;
	display: block;
	padding: 1em;
}

Now, I know this can be done, because there’s a very similar navigation list here:

<div id="navigation">
    <ul>
    	<li><a href="#" title="Home">Home</a></li>
        <li><a href="#" title="Microsoft">Microsoft</a></li>
        <li><a href="#" title="About Us">About Us</a></li>
        <li><a href="#" title="Contact">Contact</a></li>
        <li><a href="#" title="Sitemap">Sitemap</a></li>
    </ul>
</div>

And the CSS:

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
}

#navigation {
	width: 250px;
}

#navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: #66CCFF;
}

#navigation li {
	border-bottom: 1px solid #CCCCCC;
}

#navigation li a:link, #navigation li a:visited {
	font-size: 90%;
	display: block;
	padding: 0.4em 0 0.4em 0.5em;
	background-color: #66CCFF;
	color: #000000;
	text-decoration: none;
}

#navigation li a:hover {
	background-color: #6699FF;
	color: #FFFFFF;
}

Which results in the following screenshot:

As far as I can see from the current code I have to the code with the other sample that does work…I’ve done nothing wrong. I’ve tried doing minus margins and even padding but I really think it’s an issue with the bottom margin. I’ve looked at the SitePoint CSS Reference and it hasn’t been much help, it’s also shockingly out of date.

Can anyone help me and put me out of my misery, please?

2

When I run that code you provided, no such margin occurs. The background fills out the LI.

If you test that code alone, do you still get the margin? If so, what browser is it in?

3

Weird. I tested the code alone and there’s no margin issues, the background fills out the li. I’m using Chrome 20 as well. So, it must be some other CSS that is having an effect on it then?

Also, thanks for the quick reply Ralph.

4

Almost certainly, I’d say. If you can’t post a live link, perhaps make up a demo that includes the behavior and that can be posted here as code. If all else fails, use the full HTML and CSS and strip it down to where the behavior suddenly disappears. That may be enough to help identify the problem for yourself, but if not, post away! :slight_smile:

5

Hmm. I looked through the whole of the CSS, and there was this:

#content ul li {
	margin-bottom: 1em;
}

Which I added to the demo of just the problem on its own and it replicated the issue. So I amended the CSS to this:

ul.featured-jobs li {
	list-style-type: none;
	background-color: #EEEEEE;
	border-bottom: 1px solid black;
	margin-bottom: 0;
}

And that worked perfectly fine.

But…When I tried adding the margin-bottom: 0; to this same segment of CSS in the complete CSS file, it didn’t make any difference. So, there must STILL be a problem somewhere that I’ve not spotted…But I don’t understand, I’ve been through it so many times with my eyes a bloody fingers-length away from the screen and I can’t find the damn problem.

Here’s the complete CSS file for the site where I’m having this bottom-margin issue, if you need a demo page with the HTML though then just ask and I’ll whip one up.

Forgive me for the mess. After I’ve finished with the CSS for a site I do clean it up, optimize everything, add comments, and change values to shorthand, etc. It’s just easier for me this way, then using Ctrl + F to find and make changes until it’s ready to be optimized for a live site.

body {
	font-family: 'Open Sans', Verdana, Arial, sans-serif;
	font-size: 0.9em;
	background-image: url(../images/layout/bg-tile.png);
	background-repeat: repeat-x;
	background-color: #E4FDFE;
	margin-top: 0px;
	margin-bottom: 0px;
	line-height: 1.5em;
}

#container {
	margin-left: auto;
	margin-right: auto;
	width: 1250px;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	padding: 25px;
	background-color: #FFFFFF;
}

#content h1, h2, h3, h4 {
	font-family: Trebuchet MS;
	line-height: 1.5em;
	clear: both;
}

#content h1 {
	border-bottom: 2px solid #0099FF;
	padding-top: 10px;
}

#content img.right {
	padding: 10px;
	margin-left: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
	border: 1px solid #AAAAAA;
	float: right;
}

#content img.left {
	padding: 10px;
	margin-right: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
	border: 1px solid #AAAAAA;
	float: left;
}

#content img.book-cover {
	float: left;
	background-color: #FFFFFF;
	border: 1px solid #000000;
	margin-right: 1em;
	margin-bottom: 1em;
	width: 200px;
	height: 225px;
}

#content p.highlighted {
	text-align: right;
}

#content ul li {
	margin-bottom: 1em;
}

#intro-video {
	text-align: center;
}

.clear {
	clear: both;
}

.quick-question {
	border: 1px solid black;
	padding: 10px;
	margin: 5px;
	background-color: #E2E2E2;
}

.quick-question p.header {
	font-weight: bold;
	border-bottom: 1px solid black;
	margin-top: 0;
	padding-top: 0;
}

#fewd {
	float: left;
	background-color: #EEEEEE;
	border: 1px solid #000000;
	width: 330px;
	height: 115px;
	margin-bottom: 1em;
	margin-left: 2px;
}

#bewd {
	float: right;
	background-color: #EEEEEE;
	border: 1px solid #000000;
	width: 330px;
	height: 115px;
	margin-bottom: 1em;
}

#webdesdev {
	float: left;
	background-color: #EEEEEE;
	border: 1px solid #000000;
	width: 330px;
	height: 115px;
	margin-bottom: 1em;
}

#fewd h2, #bewd h2, #webdesdev h2 {
	text-align: center;
}

#content-footer {
	background-color: #EEEEEE;
	border: 2px solid #0099FF;
	padding: 10px;
	margin-bottom: 5px;
	clear: both;
}

#content-footer h2 {
	margin-top: 0;
	margin-bottom: 0;
	border-bottom: 2px solid black;
	line-height: 1.2em;
}

#content-footer #footer-ad {
	float: right;
	width: 450px;
}

#content-footer #footer-ad #footeradplacement {
	width: 450px;
	height: 150px;
	margin-top: 10px;
	border: 1px solid black;
}

#content-footer #related-content {
	float: left;
	width: 450px;
}

#content-footer #related-content ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#content-footer #related-content ul li {
	margin: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	line-height: 1.5em;
}

#content-footer #related-content ul li a {
	display: block;
	border-bottom: none;
	margin: 0;
	padding: 5px 20px;
}

#content-footer #related-content ul li a:hover {
	display: block;
	border-bottom: none;
	background-color: #E2E2E2;
	margin: 0;
}

#content-footer #networks {
	clear: both;
	overflow: hidden;
	padding-top: 15px;
	padding-bottom: 15px;
}

#content-footer #networks ul {
	padding: 0;
	padding-top: 10px;
}

#content-footer #networks ul li#twitter {
	list-style-type: none;
	background: transparent url(../images/layout/twitter-16x16.png) no-repeat left center;
	list-style-position: outside;
	display: block;
	float: left;
	margin-right: 80px;
	padding-left: 20px;
}

#content-footer #networks ul li#facebook {
	list-style-type: none;
	background: transparent url(../images/layout/facebook-16x16.png) no-repeat left center;
	list-style-position: outside;
	display: block;
	float: left;
	padding-left: 20px;
}

#content-footer #networks ul li#newsletter {
	list-style-type: none;
	background: transparent url(../images/layout/email-16x16.png) no-repeat left center;
	list-style-position: outside;
	display: block;
	float: right;
	padding-left: 20px;
}

#content-footer form fieldset .field {
	clear: both;
}

#content-footer form fieldset .field p {
	font-weight: bold;
}

#content-footer form fieldset .field ul li {
	float: left;
	list-style-type: none;
	margin-right: 20px;
}

p#summary {
	font-style: italic;
}

#content ul {
	list-style-type: square;
}

#content li span {
	display: block;
}

#content ul.tut-roadmap-containers li {
	list-style-type: none;
	display: inline;
	border: 2px solid #0099FF;
	padding: 1em;
	background-color: #FFFFFF;
	margin-right: 0.5em;
}

figure {
	background-color: #99CCFF;
	border: 1px solid #000000;
	padding-left: 5px;
	padding-top: 5px;
	padding-right: 7px;
	padding-bottom: 5px;
	margin-left: auto;
	margin-right: auto;
	width: 820px;
	/*height: 620px;*/
}

figure img {
	border: 1px solid #000000;
	padding: 10px;
	background-color: #FFFFFF;
	width: 800px;
	/*height: 600px;*/
}

section.listing {
	background-color: #EEEEEE;
	border: 1px solid #000000;
	padding: 1em;
	padding-top: 0;
	padding-bottom: 0;
	margin: 1em;
	clear: both;
}

.column-1 {
	float: left;
	width: 475px;
	margin-top: 10px;
	margin-bottom: 20px;
}

.column-2 {
	float: right;
	width: 475px;
	margin-top: 10px;
	margin-bottom: 20px;
}

abbr {
	border-bottom: dashed #000000 1px;
	color: #FF0000;
}

header img {
	border: none;
	text-decoration: none;
	float: left;
	margin-top: 0;
	padding-top: 0;
}

header #tagline {
	float: right;
	margin-right: 10px;
	padding-top: 0;
	width: 550px;
	font-style: italic;
}

.skipto {
	display: none;
}

#content {
	text-align: justify;
}

#content table#fewd {
	width: 440px;
	padding: 0px;
	border: 1px solid #000000;
	border-spacing: 0px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

#content td#header {
	background-color: #C6D9F1;
	border-bottom: 1px solid #000000;
	font-weight: bold;
}

#content td.js {
	background-color: #E5DFEC;
	border-bottom: 1px solid #000000;
}

#content td.css {
	background-color: #F2DBDB;
	border-bottom: 1px solid #000000;
}

#content td.html {
	background-color: #EAF1DD;
}

#content td.border {
	border-right: 1px solid #000000;
	width: 202px;
}

#content td.width {
	width: 202px;
}

ul.tutorial-listing li {
	border: 1px solid black;
	margin-bottom: 1em;
	list-style-type: none;
	padding: 0.5em;
	background-color: #EEEEEE; 
}

blockquote {
	background-color: #99CCFF;
	border: 5px solid #666666;
	width: 900px;
	padding: 5px;
}

p.cite {
	text-align: right;
}

pre {
	background-color: #99CCFF;
	border: 1px solid #000000;
	padding: 5px;
	font-size: 1em;
}
 
code {
	line-height: 1.5em;
	background-color: #99CCFF;
	font-size: 1em;
}

footer {
	border-top: 1px solid #000000;
	clear: both;
}

footer p {
	text-align: center;
}

article#content {
	float: left;
	width: 1000px;
}

aside {
	background-color: #EEEEEE;
	border: 2px solid #0099FF;
	padding: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
	width: 200px;
	float: right;
}

aside h2 {
	margin-top: 0;
	margin-bottom: 0;
	border-bottom: 2px solid black;
	line-height: 1.2em;
}

aside img {
	width: 200px;
	height: 150px;
	margin-top: 10px;
	border: 1px solid black;
}

ul.featured-jobs {
	border: 1px solid black;
	padding: 0;
	margin: 0;
}

ul.featured-jobs li {
	list-style-type: none;
	background-color: #EEEEEE;
	border-bottom: 1px solid black;
	margin-bottom: 0;
}

ul.featured-jobs li a:link, ul.featured-jobs li a:visited {
	border-bottom: none;
	display: block;
	padding: 1em;
	margin-bottom: 0;
}

/* Navigation Menu */

nav {
	margin-top: 180px;
}

ul#nav, ul#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
 
ul#nav  li {
	position: relative;
	float: left;
	width: 125px;
}
	
#nav li ul {
	position: absolute;
	margin-left: -999em; /* hide menu from view */
	top: auto;
	left:0;
}
 
/* Styles for Menu Items */
ul#nav  li a {
	display: block;
	text-decoration: none;
	color: #0099FF;
	background: #EEEEEE; /* IE6 Bug */
	padding: 5px;
	border-top: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	margin-bottom: -1px;
	min-height: 0;
	text-align: center;
}

ul#nav li a#home {
	border-left: 1px solid #000000;
}

/* commented backslash mac hiding hack \\*/ 
* html ul#nav  li a {height:1%;	position:relative;}
/* end hack */ 
 
/* this sets all hovered lists to red */
#nav li:hover a,#nav  li.over a,
#nav li:hover li a:hover,#nav li.over li a:hover {
   color: #000000;
}
 
/* set dropdown to default */
#nav li:hover li a,#nav li.over li a {
	color: #0099FF;
	background-color: #EEEEEE;
	border-left: 1px solid #000000;
	width: 150px;
}

#nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
#nav li:hover ul,#nav li.over ul {margin-left:0; } /* show menu*/

/* Content Links */

a:link, a:visited {
	color: #0099FF;
	text-decoration: none;
	border-bottom: 1px solid #AAAAAA;
}

a:hover {
	color: #000000;
	text-decoration: none;
	border-bottom: 1px solid #000000;
}
6

Me o my, even the full CSS you posted above doesn’t produce the margin effect for me with the HTML you posted initially. Does it for you?

7

No…It doesn’t…Ok, now this is bloody weird. So…Is it the CSS or not? Because now it seems like it’s possibly a HTML issue, but that doesn’t make any sense whatsoever. Why would it be a HTML issue?

Advise, please?

8

It’s most likely a CSS issue. Is the page online, by any chance? You could PM me the link if you like.

If you grab all the HTML and CSS, can you recreate the issue then?

9

Just wanted to update this thread to say that Ralph figured out the problem with the whole page together after I PM’ed him. Turns out that all I needed to do was change:

ul.featured-jobs li {
	list-style-type: none;
	background-color: #EEEEEE;
	border-bottom: 1px solid black;
	margin-bottom: 0;
}

To:

#content ul.featured-jobs li {
	list-style-type: none;
	background-color: #EEEEEE;
	border-bottom: 1px solid black;
	margin-bottom: 0;
}

Because of:

#content ul li {
	margin-bottom: 1em;
}

So now it works perfectly :slight_smile: Thanks again Ralph.

10

Beware of them specificity issues!