...

View Full Version : border-collapse issue (one top border not showing)



haley
02-03-2005, 07:16 PM
Ok, I'm making a left column with navigation. The links make the whole TD change color on hover, and I've finally got it all set the way I wanted...but I have this teeny problem.

Here is what it looks like in IE and FF:
http://www.nrha.com/nrhanew/help/cssnav.jpg

(I just checked it on Mac IE and it works perfectly) Mac IE:
http://www.nrha.com/nrhanew/help/cssnav2.jpg

The problem is that the border-collapse seems to be eating the top (darker) border on the 2nd dark 'category' cell (where it says NRHA). If I adjust the border to 2, it works, but then it's actually 2px. Removing the collapse on the category cells doens't work, either.

This is my CSS for the column:


table.menus {
width: 140px;
background-color: #EAE5DE;
border-collapse: collapse;
}
.menus td {
border-top: 1px solid #A48B78; border-bottom:1px solid #A48B78;
text-align: left;
padding: 0;
}
.menus td a:link, .menus td a:visited {
font: 11px Arial, sans-serif;
text-decoration:none;
color: #000000;
background-color:#EAE5DE;
display:block;
padding: 2px 0;
width: 100%;
}
.menus td a:hover {
background-color:#C1C6CB;
color: #000000;
}
table.menus2 {
width: 140px;
background-color: #EAE5DE;
border-collapse: collapse;
}
.menus2 td {
border-top: 1px solid #422B1B;
border-bottom:1px solid #422B1B;
text-align: center;
padding: 0;
background-color:#A48B78;
}

And here is my HTML:


<table width="140" border="0" cellspacing="0" cellpadding="0" class="menus">
<tr class="menus2">
<td>NRHA</td>
</tr>
<tr>
<td><a href="index.html">&nbsp;NRHA Membership</a></td>
</tr>
<tr>
<td><a href="index.html">&nbsp;NRHA Membership</a></td>
</tr>
<tr>
<td><a href="index.html">&nbsp;NRHA Membership</a></td>
</tr>
<tr>
<td><a href="index.html">&nbsp;NRHA Membership</a></td>
</tr>
<tr class="menus2">
<td>NRHA</td>
</tr>
<tr>
<td><a href="index.html">&nbsp;NRHA Membership</a></td>
</tr>
<tr>
<td><a href="index.html">&nbsp;NRHA Membership</a></td>
</tr>
<tr>
<td><a href="index.html">&nbsp;NRHA Membership</a></td>
</tr>
<tr>
<td><a href="index.html">&nbsp;NRHA Membership</a></td>
</tr>
</table>

Am I overlooking something obvious? I've been frustrated for about an hour. Thanks!

hemebond
02-03-2005, 09:36 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>51582</title>
<style type="text/css">
ul, li
{
margin:0;
padding:0;
}

#menu li
{
background-color:#A48B78;
border-top:1px solid #422B1B;
}
#menu ul
{
border-top:1px solid #422B1B;
}
#menu ul li
{
background-color:#EAE5DE;
border-top:1px solid #A48B78;
border-bottom:1px solid #A48B78;
}
#menu ul li:hover
{
background-color:#C1C6CB;
}
</style>
</head>
<body>
<ul id="menu">
<li>NRHA
<ul>
<li><a href="index.html">NRHA Membership</a></li>
<li><a href="index.html">NRHA Membership</a></li>
<li><a href="index.html">NRHA Membership</a></li>
<li><a href="index.html">NRHA Membership</a></li>
</ul>
</li>
<li>NRHA
<ul>
<li><a href="index.html">NRHA Membership</a></li>
<li><a href="index.html">NRHA Membership</a></li>
<li><a href="index.html">NRHA Membership</a></li>
<li><a href="index.html">NRHA Membership</a></li>
</ul>
</li>
</ul>
</body>
</html>

haley
02-03-2005, 10:07 PM
Thanks for that. Ok, a few questions. How do I get the border to be 1px like when I use collapsed in tables? And how do I get rid of the list circles? Thanks!

PS It's not working in IE...did I copy it wrong?

mcdougals4all
02-03-2005, 10:17 PM
Try adding this to the style section:




#menu li
{
background-color:#A48B78;
border-top:1px solid #422B1B;
margin-bottom:-1px;
list-style-type:none;
}

hemebond
02-04-2005, 12:44 AM
PS It's not working in IE...did I copy it wrong?Probably not. IE is rubbish. I didn't test in IE.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>51582</title>
<style type="text/css">
ul, li
{
margin:0;
padding:0;
}

#menu li
{
background-color:#A48B78;
border-top:1px solid #422B1B;
}
#menu ul li
{
background-color:#EAE5DE;
}
#menu ul li + li
{
border-top:1px solid #A48B78;
}
#menu ul li:hover
{
background-color:#C1C6CB;
}
</style>
</head>
<body>
<ul id="menu">
<li>NRHA
<ul>
<li><a href="index.html">NRHA Membership</a></li>
<li><a href="index.html">NRHA Membership</a></li>
<li><a href="index.html">NRHA Membership</a></li>
<li><a href="index.html">NRHA Membership</a></li>
</ul>
</li>
<li>NRHA
<ul>
<li><a href="index.html">NRHA Membership</a></li>
<li><a href="index.html">NRHA Membership</a></li>
<li><a href="index.html">NRHA Membership</a></li>
<li><a href="index.html">NRHA Membership</a></li>
</ul>
</li>
</ul>
</body>
</html>

Crewcut
02-04-2005, 03:01 PM
Here is the solution to your problem, it works in both IE and Firefox for Windows.
Should work on Mac too, perhaps someone can test it :)
What you do basicly is getting rid of those horrible tables and listitem objects, making sure you use the power of layers, css and a tiny bit of javascript magic ;-)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>51582</title>
<style type="text/css">
div#menu {
width:170px;
background-color: #422B1B;
border-right:solid 1px #422B1B;
border-bottom:solid 1px #422B1B;
}
div#menu a {
font:normal 11px/18px Verdana,Helvetica,sans-serif;
color:#000;
margin-left:6px;
text-decoration:none;
}
div#menu div {
font:bold 11px/18px Verdana,Helvetica,sans-serif;
height:20px;
width:100%;
margin:0px 0px 0px 10px;
padding:0px;
}
div#menu div.header {
text-align:center;
background-color:#A48B78;
border-top:solid 1px #422B1B;
}
div#menu div.out {
border-top:solid 1px #A48B78;
}

div#menu div.over {
border-top:solid 1px #A48B78;
}
/* lets give it some HOVERING color folks ;) */
.over {
background-color:#C1C6CB;
}
.out {
background-color:#EAE5DE;
}
/* works in BOTH Internet Explorer and Firefox */
</style>
</head>
<body>
<div id="menu">
<div class="header">NRHA Header 1</div>
<div class="out" onMouseOver="this.className='over';" onMouseOut="this.className='out';"><a href="index.html">NRHA Membership</a></div>
<div class="out" onMouseOver="this.className='over';" onMouseOut="this.className='out';"><a href="index.html">NRHA Membership</a></div>
<div class="out" onMouseOver="this.className='over';" onMouseOut="this.className='out';"><a href="index.html">NRHA Membership</a></div>
<div class="out" onMouseOver="this.className='over';" onMouseOut="this.className='out';"><a href="index.html">NRHA Membership</a></div>
<div class="header">NRHA Header 2</div>
<div class="out" onMouseOver="this.className='over';" onMouseOut="this.className='out';"><a href="index.html">NRHA Membership</a></div>
<div class="out" onMouseOver="this.className='over';" onMouseOut="this.className='out';"><a href="index.html">NRHA Membership</a></div>
<div class="out" onMouseOver="this.className='over';" onMouseOut="this.className='out';"><a href="index.html">NRHA Membership</a></div>
<div class="out" onMouseOver="this.className='over';" onMouseOut="this.className='out';"><a href="index.html">NRHA Membership</a></div>
</div>
</body>
</html>


The code above isn't that compact yet... you could crunch it even more, but for tutorial purposes i verbosed it a bit... :)

Enjoy and let me know if it works for you.

mcdougals4all
02-04-2005, 04:06 PM
getting rid of those horrible tables and listitem objects, making sure you use the power of layers, css and a tiny bit of javascript magic ;-)

Getting rid of the tables I can agree with, but the solution Hemebond offered is more semantically appropriate. And frankly, your approach is overkill. There is no need to add javascript where css alone will suffice. Changing the unordered list to div's removes the structure as well. Which in the end, makes the mark-up less meaningful and hurts in areas like accessibility and being search-engine friendly.

Crewcut
02-04-2005, 05:37 PM
Getting rid of the tables I can agree with, but the solution Hemebond offered is more semantically appropriate. And frankly, your approach is overkill. There is no need to add javascript where css alone will suffice. Changing the unordered list to div's removes the structure as well. Which in the end, makes the mark-up less meaningful and hurts in areas like accessibility and being search-engine friendly.

It might be semantically appropriate, but it does not work in IE now does it?

Concerning the javascript i used, did you actually look at my code at all? It is so incredible small and only used at onMouseOver and at onMouseOut; pretty standard and hardly posing any problems if ya ask me.

When you define a DIV as absolute you will take it out of the structure flow of the document. I did not do that though, so it goes nicely with the rest of the html structure.

As for accessibility (quite a buzzword isn't it?), well that's a completely different matter is it not? Let's take all those not filled in alt properties on links and images for example..... or sites completely made up with Flash... Hardly a friendly place for visually impaired people now is it?

Oh well, just tried to help here...... don't use my code if you don't like it :)

mcdougals4all
02-04-2005, 06:30 PM
It might be semantically appropriate, but it does not work in IE now does it?
With a little more attention it does.



<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>51582</title>
<style type="text/css">
ul, li { list-style-type:none; margin:0; padding:0; }

#menu li {background-color:#a48b78; border:1px solid #422b1b; width:9em; margin-bottom:-1px; font-weight:bold; text-align:center; }

#menu li ul li { border-right:0; border-left:0; border-bottom:0; padding:0; margin:0; font-weight:normal; text-align:left; }

a { background-color:#eae5de; width:auto !important; width:100%; text-decoration:none; color:#000; padding:0 .3em; display:block; }

a:hover { background-color:#c1c6cb; }
</style>
</head>
<body>
<ul id="menu">
<li>NRHA
<ul>
<li><a href="index.html">NRHA Membership</a></li>
<li><a href="index.html">NRHA Membership</a></li>
<li><a href="index.html">NRHA Membership</a></li>
<li><a href="index.html">NRHA Membership</a></li>
</ul>
</li>
<li>NRHA
<ul>
<li><a href="index.html">NRHA Membership</a></li>
<li><a href="index.html">NRHA Membership</a></li>
<li><a href="index.html">NRHA Membership</a></li>
<li><a href="index.html">NRHA Membership</a></li>
</ul>
</li>
</ul>
</body>
</html>




Concerning the javascript i used, did you actually look at my code at all? It is so incredible small and only used at onMouseOver and at onMouseOut; pretty standard and hardly posing any problems if ya ask me.

I don't suggest it's posing problems, there's just no need.



When you define a DIV as absolute you will take it out of the structure flow of the document. I did not do that though, so it goes nicely with the rest of the html structure.

I was referring to the semantic structure, not the layout.



As for accessibility (quite a buzzword isn't it?), well that's a completely different matter is it not? Let's take all those not filled in alt properties on links and images for example..... or sites completely made up with Flash... Hardly a friendly place for visually impaired people now is it?

Agreed. But there's no reason to remove the semantic mark-up in favor of mark-up which provides no context.



Oh well, just tried to help here...... don't use my code if you don't like it


We're all here to help and learn. No solution is the be-all, end-all. Cheers.

hemebond
02-04-2005, 09:38 PM
Concerning the javascript i used, did you actually look at my code at all? It is so incredible small and only used at onMouseOver and at onMouseOut; pretty standard and hardly posing any problems if ya ask me.Except it violates the seperation of structure and behaviour.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum