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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Location
    oklahoma
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    border-collapse issue (one top border not showing on PC)

    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:


    (I just checked it on Mac IE and it works perfectly) Mac IE:


    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:

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

    Code:
    <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!
    Last edited by haley; 02-03-2005 at 06:38 PM. Reason: add'l info

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!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>

  • #3
    New to the CF scene
    Join Date
    Jan 2005
    Location
    oklahoma
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try adding this to the style section:
    Quote Originally Posted by hemebond
    Code:
    #menu li
      {
         background-color:#A48B78;
         border-top:1px solid #422B1B;
         margin-bottom:-1px;
         list-style-type:none;
      }
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #5
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by haley
    PS It's not working in IE...did I copy it wrong?
    Probably not. IE is rubbish. I didn't test in IE.
    Code:
    <!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>

  • #6
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE rubbish?? Hardly i think.... :)

    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 ;-)
    Code:
    <!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.

  • #7
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by crewcut
    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.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #8
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mcdougals4all
    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

  • #9
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Crewcut
    It might be semantically appropriate, but it does not work in IE now does it?
    With a little more attention it does.

    Code:
    <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>
    Quote Originally Posted by Crewcut
    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.

    Quote Originally Posted by Crewcut
    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.

    Quote Originally Posted by Crewcut
    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.

    Quote Originally Posted by Crewcut
    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.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #10
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Crewcut
    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.


  •  

    Posting Permissions

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