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 6 of 6

Thread: Strange bumping

  1. #1
    New Coder
    Join Date
    Feb 2004
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 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
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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;
    	}
    The 'spacing' attribute doesn't exist
    
    #navigate td a:hover {
    	color: #fff;
    	background: #5b0000;
    	width: 95px;
    	line-height: 14px;
    	font-decoration: none;
    	} 
    Technically not a validation error, but here you should use 
    background-color instead of background
    
    #navigate {
    	border-top: 10px solid #5b0000;
    	border-spacing: 0;
    		}
    The 'border-spacing' attribute doesn't exist
    
    #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;}
    Again, technically not a validation error, but these should be grouped.
    HTML:
    Code:
    <table width="760" align="center" cellpadding="0" cellspacing="0" id = "navigate">
    Shouldn't be a gap between the attribute name, equals sign and the
     equals sign and the value. ie, it should read id="navigate".
    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!

  • #3
    New Coder
    Join Date
    Feb 2004
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Feb 2004
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I updated it, and it is getting closer. When you hover over Services, Technology bumps, and that is the only one now. Strange...

  • #5
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,266
    Thanks
    6
    Thanked 48 Times in 48 Posts
    Maybe it's the width:95px you have in the hover tag? Try moving that to the #navigate td a { tag instead

  • #6
    New Coder
    Join Date
    Feb 2004
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    BINGO!

    Thanks. I knew it was something simple!


  •  

    Posting Permissions

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