Hi there ems,
I am pleased that you have managed to resolve your problem.
coothead
CSS Codes
Elite Coders
Hi there ems,
I am pleased that you have managed to resolve your problem.
coothead
~ the original bald headed old fart ~
Junior Coders
The only thing that doesn't work anymore is the 1px shift down when hovering. But that's OK.
Elite Coders
Hi there ems
post your full HTML and CSS code for me to test.
coothead
~ the original bald headed old fart ~
Junior Coders
Here it is:
Code:/<style media="screen"> body { font: normal 1em / 1.62em sans-serif; } .indentmenu { text-align: center; } .indentmenu ul { display: inline-block; margin: 0; padding: 0; border: 1px solid #38571A; /* dark green border */ background: #000 url(navbar/indentgreen.gif) center center repeat-x; box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 ); } .indentmenu ul li { display: inline-block; vertical-align:middle; } .indentmenu ul li a { display: block; padding: 0.32em 0.69em; border-right: 2px solid #FFFFFF; /* white divider between menu items */ font: 1.25em Verdana; text-decoration: none; color: #fff; /*text color*/ } .indentmenu ul li:last-of-type a { border-right: 0; } .indentmenu ul li a:visited { color: #fff; } .indentmenu ul li a:hover, .indentmenu ul li a:active, .indentmenu ul li .current { padding-top: 0.36em; /*shift text down 1px for selected and active item*/ padding-bottom: 0.28em; /*shift text down 1px for selected and active item*/ background: #000 url(navbar/indentgreen2.gif) center center repeat-x; color: #fff; /*text color of selected and active item*/ } </style> </head> <body> <div class="indentmenu"> <ul> <li> <a href="#">link one</a> </li><li> <a href="#">link two</a> </li><li> <a href="#">link three</a> </li><li> <a href="#">link four</a> </li> </ul> </div> </body> </html> <div class="indentmenu"> <ul> <li><a href="index.html" class="current">About Us</a></li> <li><a href="meeting.htm">Meeting Dates & Topics</a></li> <li><a href="members.htm">Members-Only Info</a></li> <li><a href="garden.htm">Garden</a></li> </ul> </div>
Last edited by james438; 12-10-2020 at 02:25 AM. Reason: format
Elite Coders
Hi there ems,
the hover effect works OK on these...
- Meeting Dates & Topics
- Members-Only Info
- Garden
You will find that this...
...is moving About Us down 1px without hover.Code:.indentmenu ul li a:hover, .indentmenu ul li a:active, .indentmenu ul li .current { padding-top: 0.36em; /*shift text down 1px for selected and active item*/ padding-bottom: 0.28em; /*shift text down 1px for selected and active item*/ background: #000 url(navbar/indentgreen2.gif) center center repeat-x; color: #fff; /*text color of selected and active item*/ }
See image:-
coothead
~ the original bald headed old fart ~
Junior Coders
I was not talking about the hover effect, that works just fine.
I'm talking about the 1px shift down when hovering. It shifts with your original code when I see Times Roman.
However, when I take out the "sans serif" part and I see Verdana, the 1px shift when hovering does not happen.
Elite Coders
Hi there esm,
I am sorry but I cannot replicate any of the
problems that you state that you are having.
I use Firefox and Google Chrome to test
my code, which browser(s) are you using
to test yours?
coothead
~ the original bald headed old fart ~
Junior Coders
OK, we're closing in.
I normally use Opera (shift down does not work) but I just tested it with Firefox and it does work there.
So, just on Opera problem. Thanks for the help.
Cheers,
Ed
Junior Coders
coothead,
I just noticed another thing: to the left of each tab there seems to be what looks like a 5px gap that does not change when hovering.
Is there any way to get rid of that gap?
Thanks,
Ed
Elite Coders
Hi there esm,
I am not sure what you mean.
At present the a elements have this padding...
normal state:-
hover state:-Code:padding: 0.32em 0.69em;
So what do you actually require?Code:padding: 0.36em 0.69em 0.28em;
coothead
~ the original bald headed old fart ~
Posting Permissions
Reply With Quote
Bookmarks