...

View Full Version : Strange bumping



mqcarpenter
02-23-2004, 04:37 PM
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

me'
02-23-2004, 05:59 PM
Try validating your HTML (http://validator.w3.org) and CSS (http://jigsaw.w3.org/css-validator). There are several problems in your 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:
<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".

mqcarpenter
02-23-2004, 06:09 PM
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.

mqcarpenter
02-23-2004, 06:14 PM
I updated it, and it is getting closer. When you hover over Services, Technology bumps, and that is the only one now. Strange...

Nightfire
02-23-2004, 06:15 PM
Maybe it's the width:95px you have in the hover tag? Try moving that to the #navigate td a { tag instead

mqcarpenter
02-23-2004, 06:51 PM
BINGO!

Thanks. I knew it was something simple!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum