Invision Power Services

Invision Power Services > Community Forums > Community Web Design and Coding

Sebastian Mares

Jul 9 2005, 12:36 PM

I need some help with CSS, again.

Do you have any idea how to make the borders of two elements collapse into one single border? The reason is that I have a menu and each anchor has a 1px border. However, the border between the elements is 2px wide - the border of the first element + the border of the second element.
To see what I mean, here is a quick and dirty example:

HTML

<html>
<head>
<style>
#Test {
list-style: none;
margin: 0;
padding: 0
}
#Test li a {
border: 1px solid #ccc;
display: block
}
#Test li a:hover {
border: 1px solid #f00
}
#Test li ul {
list-style: none;
margin: 0;
padding: 0
}
#Test li ul li a {
padding-left: 25px
}
</style>
</head>
<body>
<ul id="Test">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a>
<ul>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
<li><a href="#">Item 8</a></li>
</ul>
</li>
<li><a href="#">Item 9</a></li>
<li><a href="#">Item 10</a></li>
</ul>
</body>
</html>

So what I would like to do is make the border between the elemetns 1px thick, too. Any ideas?

Regards,
Sebastian

IAIHMB

Jul 9 2005, 12:43 PM

Just place a border on the top right and left side of the UL tag and then place a border on the bottom of all of the LIs.

CODE

<html>
  <head>
    <style>
            ul{
                border: 1px solid #000;
                border-bottom: 0px;
                list-style-type: none;
                margin: 0px;
                padding: 0px;
            }

            li{
                border-bottom: 1px solid #000;
            }
    </style>
  </head>
  <body>
        <div class="container">
            <ul>
                <li>Content.</li>
                <li>Content.</li>
                <li>Content.</li>
                <li>Content.</li>
                <li>Content.</li>
            </ul>
        </div>
  </body>
</html>

Sebastian Mares

Jul 9 2005, 04:52 PM

Thanks for that, but as you can see from my example, I need hover and sub-list support which can't be obtained using your code.
So there is no CSS attribute for collapsing borders, right? The only thing I found was for tables.

Jul 9 2005, 05:07 PM

Is border-collapse for tables only?

Sebastian Mares

Jul 9 2005, 05:13 PM

QUOTE(Veracon @ Jul 9 2005, 07:07 PM)

Is border-collapse for tables only?

Yep.

http://www.w3schools.com/css/pr_tab_border-collapse.asp

Jul 9 2005, 05:54 PM

It's also IE only.

Sebastian Mares

Jul 9 2005, 06:01 PM

It works under Firefox (with tables, that is).

IAIHMB

Jul 10 2005, 08:15 PM

For some reason or another, I was thinking about this while I was sleeping.

Anyways, you could always use relative positioning (So that you could move the list items up so that the border "collapses".) and the Z index (So that you could accomplish the hover effect correctly.).

Rikki

Jul 10 2005, 08:34 PM

What I do is set the margin-top to -1px so that the borders overlap.

Jul 10 2005, 08:52 PM

QUOTE(Rikki @ Jul 10 2005, 01:34 PM)

What I do is set the margin-top to -1px so that the borders overlap.

Same here. Then I put a padding of 1px on the parent element.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.