jQuery & Appending LIs to a UL: Margin / Spacing Issues

I’m working on a tab menu system that allows you to add more tabs when the ‘+’ sign (link) is clicked. The problem is that I’ve noticed that the margin-right is different between the tabs that the page loads with versus those created from the ‘+’ link. In fact, I’m not sure if it’s really a margin issue but rather a float issue, so because of this, I’m not sure if I should’ve posted this here. (I went ahead and posted in the jQuery forum due to my page using it but if someone feels it should be somewhere else, by all means, feel free to move it.)

All that being said, here’s my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <title>Menu Idea</title>
        <link rel="stylesheet" type="text/css" media="all" href="style.css" />
        <style type="text/css">
            #left{border:1px solid #666;margin:0 !important;margin-top:2em !important;padding:1em 0 !important;width:100% !important;height:100% !important;float:left !important;background:#ccc}
            /* #projects is the UL I'm using. */
            #projects{border:1px solid red;margin:0 !important;padding:0 !important;white-space:nowrap;overflow:hidden}
            #projects li{position:relative;margin:0 !important;margin-right:5px !important;padding:0 !important;display:inline-block;white-space:nowrap}
            #projects a{border:2px solid #666;margin-right:0;padding:.25em .5em .25em 1.5em;display:inline;text-decoration:none;font-weight:bold}
            #projects a:hover{color:red}
            /* #add is the "Add More" link or the '+' sign I mentioned above. */
            #projects #add{margin-right:0;margin-left:0;padding-left:.5em}

            /* Unless these are causing issues, feel free to disregard these. (They're going to be a remove feature I plan on adding--a simple 'x' to delete the respective tab.) */
            #projects button.delete{border:2px solid #666;-moz-border-radius:20px;border-radius:20px;border-radius:20px;-webkit-border-radius:20px;-khtml-border-radius:20px;position:absolute;top:-1em;right:-.7em;z-index:1;padding:0 !important;background:#fff;line-height:1em;font-weight:bold}
        <div id="wrapper">
            <div id="header">
                <h1>Menu Idea</h1>
            <div id="left">
                <ul id="projects">
                    <li><a href="#" title="Add Tab" id="add">+</a></li>
                    <li><a href="#20132014" title="2013 - 2014" class="project">2013 - 2014</a><button type="button" class="delete" value="d20132014">x</button></li>
                    <li><a href="#20142015" title="2014 - 2015" class="project">2014 - 2015</a><button type="button" class="delete" value="d20142015">x</button></li>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            var years = [];
            var new_year;
            var verbiage;


                $('#projects li a.project').each(function(){
                new_year = Math.max.apply(null, years);
                new_year = (parseInt(new_year.toString().substr(0,4))+1).toString() + (parseInt(new_year.toString().substr(4,4))+1).toString();
                verbiage = (parseInt(new_year.toString().substr(0,4))+1).toString() +' - '+ (parseInt(new_year.toString().substr(4,4))+1).toString();

                $('#projects').append('<li><a href="#'+new_year+'" title="'+verbiage+'" class="project">'+verbiage+'</a><button type="button" class="delete" value="d'+new_year+'">x</button></li>');

I’m using jQuery 1.4.4 due to the system this will be integrated with.

Long story short, the space between the tabs is off between those the page opens with versus those created from the jQuery. I’m not sure why and any insights would be appreciated.
(Here’s a generic fiddle of this: http://jsfiddle.net/2z2Z4/)

The white space between the list items is causing the problem.

Some options are:

[list][]get rid of the whitespace between them, but that makes the HTML harder to read
]add whitespace between the new list items, but that makes the JavaScript more complex
[*]use CSS to adjust the display of things, which could be as easy as setting the font size of ul to 0 and li back to normal

I’ll pass this on to the CSS forum for some further guidance if need be.

It seems to me (JS illiterate Ron) that the easiest solution would be to add a space in front of the added menu items as @paul_wilkins suggested…

$('#projects').append('<li><a href="#'

$('#projects').append(' <li><a href="#'

Off Topic:

It’s awkward to suggest without knowing how the code is to be used. For example, if it is to be written to a permanent HTML file eventually, I would probably put each added menu item on a new line (I believe the JS is currently creating them inline) - FWIW.

PS: since the list items are not being floated, you do not need overflow:hidden here. It chops the plus in half, too. :slight_smile:

#projects {
    border:1px solid red;
    padding:0 !important;
    margin:0 !important;

Major help guys. Indeed, it was the white space. Is that a JavaScript thing? I don’t understand why it would do that…

(To elaborate a bit on this, this menu system is going to be used to create additional pages pertinent to individual years. These pages correspond to projects for each respective year and when clicked on, will reveal configurations for processes in a pane that I didn’t include in the code. Basically, this is an app I’m working on for our financial aid people [I work in higher ed and they have some processes they need to have better control over–everything is ran through SHELL right now and I’m just trying to create an easy interface for them].) :slight_smile:

Ron, I put the overflow:hidden on there because I plan on eventually creating a horizontally-scrolling navigation. My apologies, I probably should’ve mentioned this.

Nope, for once JavaScript has absolutely nothing to do with that problem. A good detailed rundown on fighting the space between inline blocks is given by Chris Coyier.

Hi, Wolf_22.

Take a look at this short thread for two examples by Paul showing how to scroll list items (and where {overflow:auto} should be placed (not on the <ul>) :slight_smile:

Thanks for the links, ronpat. :slight_smile: