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 –
<b>Salary:</b> £27,000 – <b>Type:</b> Full-Time</a></li>
<li><a href="">Front-End Web Developer <b>at</b> Headscape <br/> <b>Location:</b> Devon, UK –
<b>Salary:</b> £27,000 – <b>Type:</b> Full-Time</a></li>
<li><a href="">Front-End Web Developer <b>at</b> Headscape <br/> <b>Location:</b> Devon, UK –
<b>Salary:</b> £27,000 – <b>Type:</b> Full-Time</a></li>
<li><a href="">Front-End Web Developer <b>at</b> Headscape <br/> <b>Location:</b> Devon, UK –
<b>Salary:</b> £27,000 – <b>Type:</b> Full-Time</a></li>
<li><a href="">Front-End Web Developer <b>at</b> Headscape <br/> <b>Location:</b> Devon, UK –
<b>Salary:</b> £27,000 – <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 –
<b>Salary:</b> £27,000 – <b>Type:</b> Full-Time</a></li>
<li><a href="">Front-End Web Developer <b>at</b> Headscape <br/> <b>Location:</b> Devon, UK –
<b>Salary:</b> £27,000 – <b>Type:</b> Full-Time</a></li>
<li><a href="">Front-End Web Developer <b>at</b> Headscape <br/> <b>Location:</b> Devon, UK –
<b>Salary:</b> £27,000 – <b>Type:</b> Full-Time</a></li>
<li><a href="">Front-End Web Developer <b>at</b> Headscape <br/> <b>Location:</b> Devon, UK –
<b>Salary:</b> £27,000 – <b>Type:</b> Full-Time</a></li>
<li><a href="">Front-End Web Developer <b>at</b> Headscape <br/> <b>Location:</b> Devon, UK –
<b>Salary:</b> £27,000 – <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?