Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Overlapping borders problem (newbie question)

    I'm pretty new to CSS. I've dabbled in the past, based on tutorials I could find on the internet, etc. I'm in the early stages of trying to create a drop-line navigation bar. Right now, I'm just working on creating an inline list, with each item having its own border. Eventually, I'm going to put a gap between each of the list items, but right now the problem I'm facing is that if the list takes more room than I give it and wraps onto a second line, the bottom border of the top line and the top border of the bottom line overlap each other. Given my inexperience, most likely I did something dumb, but as googling hasn't given me any solutions, I'm hoping a real person can =).

    Here's the xhtml code for the list:

    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">
    <head>
    	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	<title>My Title Here</title>
    	<meta http-equiv="imagetoolbar" content="no" />
    	<link rel="stylesheet" type="text/css" href="mystyle.css" />
    </head>
    <body>
    <div id="inline-list">
    
    	<ul>
    		<li>Team Members</li>
    		<li>Team Procedures</li>
    		<li>News</li>
    		<li>Calendars</li>
    		<li>Participation</li>
    		<li>Links</li>
    		<li>Feedback</li>
    	</ul>
    </div>
    and here's the css:

    Code:
    #inline-list {
    	border: 1px solid #000;
    	margin: 2em;
    	width: 90%;
    	padding: 5px;
    	font-family: Verdana, sans-serif;
    	}
    
    #inline-list ul {
    	display: inline;
    	margin: 0;
    	padding: 1px;
    	color: #339;
    	font-weight: normal;
    	}
    
    #inline-list li {
    	border: 1px solid #399;
    	display: inline;
    	margin: 0;
    	padding: 1px;
    	color: #339;
    	font-weight: normal;
    	}
    I've tried playing with the margins and the padding in the li and ul definitions, but nothing seems to make any difference.

    Any help is appreciated!

    edit: I'm viewing this in IE 6
    Last edited by elleg; 04-27-2009 at 09:47 PM. Reason: added browser version

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by elleg View Post
    I'm pretty new to CSS. I've dabbled in the past, based on tutorials I could find on the internet, etc. I'm in the early stages of trying to create a drop-line navigation bar. Right now, I'm just working on creating an inline list, with each item having its own border. Eventually, I'm going to put a gap between each of the list items, but right now the problem I'm facing is that if the list takes more room than I give it and wraps onto a second line, the bottom border of the top line and the top border of the bottom line overlap each other. Given my inexperience, most likely I did something dumb, but as googling hasn't given me any solutions, I'm hoping a real person can =).

    Here's the xhtml code for the list:

    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">
    <head>
    	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	<title>My Title Here</title>
    	<meta http-equiv="imagetoolbar" content="no" />
    	<link rel="stylesheet" type="text/css" href="mystyle.css" />
    </head>
    <body>
    <div id="inline-list">
    
    	<ul>
    		<li>Team Members</li>
    		<li>Team Procedures</li>
    		<li>News</li>
    		<li>Calendars</li>
    		<li>Participation</li>
    		<li>Links</li>
    		<li>Feedback</li>
    	</ul>
    </div>
    and here's the css:

    Code:
    #inline-list {
    	border: 1px solid #000;
    	margin: 2em;
    	width: 90%;
    	padding: 5px;
    	font-family: Verdana, sans-serif;
    	}
    
    #inline-list ul {
    	display: inline;
    	margin: 0;
    	padding: 1px;
    	color: #339;
    	font-weight: normal;
    	}
    
    #inline-list li {
    	border: 1px solid #399;
    	display: inline;
    	margin: 0;
    	padding: 1px;
    	color: #339;
    	font-weight: normal;
    	}
    I've tried playing with the margins and the padding in the li and ul definitions, but nothing seems to make any difference.

    Any help is appreciated!
    Hello and welcome to the forums!

    I'm not staring at the HTML/CSS rulebook right now so hopefully someone who is more regularly into them won't smear me if I'm wrong, but...

    I don't think you can add padding or margins to an inline element.

    Anyway, what I would do is set them to display:block; and then add a left float to the <li> items.
    Last edited by Rowsdower!; 04-27-2009 at 09:53 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, that worked like a charm. (I didn't realize I could change the display from inline to block and that it would still stay 'inline').

    edit: It also seems to work fine without adding the float left, just the display block seems to fix the issue.
    Last edited by elleg; 04-27-2009 at 10:00 PM.

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by elleg View Post
    Thanks, that worked like a charm. (I didn't realize I could change the display from inline to block and that it would still stay 'inline').
    No problem. The trick is the left float. That stacks each item on the same level pushed as far left as possible until you run out of room. Once you're out of room the next floated item starts to stack just below the previous row also pushing left, etc., etc., etc.

    If not for the left float your items would simply flow downward.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You replied before I could delete my edit =) I just realized I only deleted the float left out of one spot, and if I got rid of them all, yes, they do end up stacked.


  •  

    Posting Permissions

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