Web Analytics Made Easy -
StatCounter Strange bumping - CodingForum

Announcement

Collapse
No announcement yet.

Strange bumping

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Strange bumping

    Can someone take a look at this and tell me why the hover links are slightly bumping the other cells? It is slight, but it is moving. I am missing something in my CSS.

    Thank you

    http://gruenebydesign.com/csstest2.html

  • #2
    Try validating your HTML and CSS. There are several problems in your code:
    Code:
    #navigate td a {
    	font-size: 11px;
    	font-weight: normal;
    	text-decoration: none;
    	display: block;
    	margin: 0;
    	padding: 0;
    	spacing: 0;
    	}
    [color=red]The 'spacing' attribute doesn't exist[/color]
    
    #navigate td a:hover {
    	color: #fff;
    	background: #5b0000;
    	width: 95px;
    	line-height: 14px;
    	font-decoration: none;
    	} 
    [color=red]Technically not a validation error, but here you should use 
    background-color instead of background[/color]
    
    #navigate {
    	border-top: 10px solid #5b0000;
    	border-spacing: 0;
    		}
    [color=red]The 'border-spacing' attribute doesn't exist[/color]
    
    #about {border-left: 1px solid #5b0000; border-bottom: 1px solid #5b0000;}
    #service {border-left: 1px solid #5b0000; border-bottom: 1px solid #5b0000;}
    #staff {border-left: 1px solid #5b0000; border-bottom: 1px solid #5b0000;}
    #tech {border-left: 1px solid #5b0000; border-bottom: 1px solid #5b0000;}
    #service {border-left: 1px solid #5b0000; border-bottom: 1px solid #5b0000;}
    #fdcpa {border-left: 1px solid #5b0000; border-bottom: 1px solid #5b0000;}
    #hipaa {border-left: 1px solid #5b0000; border-bottom: 1px solid #5b0000;}
    #client  {border-left: 1px solid #5b0000; border-bottom: 1px solid #5b0000;}
    #debtor {border-left: 1px solid #5b0000; border-bottom: 1px solid #5b0000; border-right: 1px solid #5b0000;}
    [color=red]Again, technically not a validation error, but these should be grouped.[/color]
    HTML:
    Code:
    <table width="760" align="center" cellpadding="0" cellspacing="0" id = "navigate">
    [color=red]Shouldn't be a gap between the attribute name, equals sign and the
     equals sign and the value. ie, it should read id="navigate".[/color]
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

    Comment


    • #3
      Thanks. I knew there were a few errors. That does not solve the bumping though. It has to do with the math on the borders and hover effects I think.

      Comment


      • #4
        I updated it, and it is getting closer. When you hover over Services, Technology bumps, and that is the only one now. Strange...

        Comment


        • #5
          Maybe it's the width:95px you have in the hover tag? Try moving that to the #navigate td a { tag instead

          Comment


          • #6
            BINGO!

            Thanks. I knew it was something simple!

            Comment

            Working...
            X