PDA

View Full Version : CSS Overlapping borders problem (newbie question)



elleg
Apr 27th, 2009, 10:34 PM
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:



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



#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

Rowsdower!
Apr 27th, 2009, 10:49 PM
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:



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



#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.

elleg
Apr 27th, 2009, 10:57 PM
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.

Rowsdower!
Apr 27th, 2009, 11:00 PM
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.

elleg
Apr 27th, 2009, 11:02 PM
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.