SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)

    CSS Bottom Margin Issue

    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.

    css-bottom-margin-issue-ss.png

    Here is the HTML I'm using:

    HTML Code:
    				<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.

    Code:
    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:

    HTML Code:
    <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:

    Code:
    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:

    2012-07-07_1407.png

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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. #3
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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?
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by AndrewCooper View Post
    So, it must be some other CSS that is having an effect on it then?
    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!

  5. #5
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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!
    Hmm. I looked through the whole of the CSS, and there was this:


    Code:
    #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:

    Code:
    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.

    Code:
    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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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. #7
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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?
    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. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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. #9
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    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:

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

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

    Code:
    #content ul li {
    	margin-bottom: 1em;
    }
    So now it works perfectly Thanks again Ralph.

  10. #10
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Beware of them specificity issues!
    Maleika E. A. | Rockatee | Twitter | Dribbble




Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •