Hey guys, as you can see here http://thetestzone.forumotion.com/ the nav bar when you put the mouse one the text and the other text moves to the right and left and how can I fix that so the only hover can show but the text doesn't to the right and left if you know what I mane.

You need to applied negative margin/padding, you have applied padding or margins somwhere.

Then add the right and left padding up and set that as the negative padding/margin...

So if you have applied 5px margin you go -10px

Hey RockerMan, Thanks for replying but as you can see the code I have applied much with padding no margin so can you please fix this.


#page-header .navbar {
display:block;
background-color: #99ccff;
border-style: solid;
border-width: 1px;
border-color: #3a93c6;
padding-top:5px;
padding-bottom:5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

#page-header .navbar a:hover{
background-color:#d3e6f3;
border-left: 1px solid #3a93c6;
border-right: 1px solid #3a93c6;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
padding-top:8px;
padding-bottom:9px;
padding-right:4px;
padding-left:4px;
}

OK so add -4px on the #page-header .navbar a:hover

Code:


padding-right:-4px;
padding-left:-4px;


Add it after the padding-left:4px;

Hope this helps

I did as you said but nothing happen

Btw here is where I get the idea from http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced

I've just tried it in Firebug and worked fine for me :/

Ad !important to the two rules...

Hmm... still nothing any other way on doing this or if you want I give you a test account with admin rights so you can check it.

Yeah,send me the test account details via PM

Sent

I think you'll have to add the padding for the individual button ID's..not the whole navbar.
#i_icon_mini_index
#i_icon_mini_calendar
etc.
It should add padding in between the buttons so it will have the same padding as it does when hovered.

It's something in the forums basic CSS, you need to deactivate the basic CSS then paste it in to the custom CSS bit. Unless someone can come up with another soloution.
I don't really know how Forumotion CSS works...

People ask why I hate forumotion, this is why along with alot of other things :@

Remove the padding from the hover part (:

Edit: if not works, the problem is the border-right,left (:

Gangstar15 wrote:Remove the padding from the hover part (:

Yeah...that would be easier

Syfte wrote:

Gangstar15 wrote:Remove the padding from the hover part (:

Yeah...that would be easier

Gangstar15 Right

Never worked, that was the first thing I tried...

It's something the basic CSS

I edited my post (:

Gangstar15 wrote:Remove the padding from the hover part (:

Edit: if not works, the problem is the border-right,left (:

Gangstar15, your current the borders are the problem but I want to have them cuz without border looks ugly.

Hmm.. okay (: in the normal code add border-right,left and make the colors the same as the background (:

I tried that and nothing happen.

Edit:
Add this to your CSS:

Code:


#page-header .navbar a{
padding-top:9px;
padding-bottom:10px;
border-left:1px solid #99CCFF;
border-right:1px solid #99CCFF;}


and replace the hover part with this:

Code:


#page-header .navbar a:hover{
background: #D3E6F3;
padding-top:9px;
padding-bottom:10px;
border-left:1px solid #fff;
border-right:1px solid #fff;}


Is the same so whatever we do nothing changes and I think i need to let it stay like it is.

nope its not.. i tried it and it works, just give me the test account (:

Sent.

Take a look (:

Nice but the left and right border are to closed to the text so is it possible to have some space between right and left.