SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Left margin on bulleted list

    Hi,

    I created a nav bar from a bulleted list, and I need the whole bar to be moved 15px to the left. I tried creating a container with margin-left:15px; but it didn't work. I can't apply it to the actual code of the nav bar, because then it spaces the buttons. My code is below. Thanks.

    html
    Code:
     <div id="topNav">
        <ul>
        <li><h2><a href="/">Home</a></h2></li>
        <li><h2><a href="/news/">News</a></h2></li>
        <li><h2><a href="/overview/">Overview</a></h2></li>
        <li><h2><a href="/featured/">Featured</a></h2></li>
        <li><h2><a href="/forums/">Forums</a></h2></li>
        </ul>
        </div>
    css
    Code:
    #topNav ul {
    	float: left;
    	list-style: none;
    	padding: 0;
    	margin: 0px;
    }
    #topNav li {
    	float: left;
    	margin-top: 89px;
    	margin-left: 1px;
    }
    #topNav li a {
    	background: url(images/headNav.gif);
    	height: 25px;
    	line-height: 25px;
    	float: left;
    	width: 75px;
    	display: block;
    	color: #fff;
    	text-decoration: none;
    	text-align: center;
    	font-size: 13px;
    }
    #topNav li a:hover {
    	background: url(images/headNavhover.gif);
    	color: #023661;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,496
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not understanding what you want here exactly as applying a 15px left margin to the ul (or to #topNav) will shift the element 15px from the left as expected.

    Code:
    #topNav ul {
        float: left;
        list-style: none;
        padding: 0;
        margin: 0 0 0 15px;
    }
    I think you must mean something else.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I figured it out. I had some contradictory coding which I took out right before I posted this, and then I tried the left margin again and it worked.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,726
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Not that this really matters because this is one pixel, but you need ot watch out for the IE6 double float margin bug on this
    Code:
    #topNav li {
    	float: left;
    	margin-top: 89px;
    	margin-left: 1px;
    }
    A horizontal margin set the same direction as a float = dobuled margin in IE6. display:inline; is the fix
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by RyanReese View Post
    Not that this really matters because this is one pixel, but you need ot watch out for the IE6 double float margin bug on this
    Code:
    #topNav li {
        float: left;
        margin-top: 89px;
        margin-left: 1px;
    }
    A horizontal margin set the same direction as a float = dobuled margin in IE6. display:inline; is the fix
    Good pick up, rye!
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quite oddly, the bug is not there. The bar looks exactly the same in ie6 as the other browsers. I inspected it closely.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,726
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Dunno, just telling you what I have told hundreds of other people and it all happened for them-perhaps IE6 is moving it over due to some other error in your code and is masking it.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could be - there's a lot going on in my code. Thanks for your help.


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
  •