Webpage CSS problems

wildest_jjk · 17 Nov 2011 at 15:00

So I am creating a website and have a horizontal nav bar, it looks and works fine. However as soon as I add borders to the side of my buttons and zoom out on the page it actually moves the buttons.

Has anybody else had a problem with using the browser zoom function and it moving something on your page?

Thanks

Chanc3 · 17 Nov 2011 at 15:20

Have you taken into account that the width will change when you add a border?

How have you defined the width? Fluid or Fixed?

wildest_jjk · 17 Nov 2011 at 16:13

Hello,

Thanks for your response, I have taken the border thickness into account. When I am not zoomed in it is fine. However I have not set fluid or fixed. What do these mean?

Thanks

Chanc3 · 17 Nov 2011 at 16:41

Have you set the width as a percentage or in pixels?

wildest_jjk · 17 Nov 2011 at 16:54

Pixels:

div.menu a{

float: left;
text-decoration: none;
color: white;
text-align:center;
line-height:2.5em;

width:240px;
height: 40px;
background-color: #4F4F4F;
margin-bottom: 40px;

border-right-style:solid;
border-right-width:1px;
border-right-color: #000000;

}

Also have a border around the main div:

div#main{

background-color:#FFFFFF;
width:960px;
margin:0 auto;
padding-bottom: 750px;
border-style:solid;
border-width:1px;
border-color: #DBDBDB;
}

wildest_jjk · 17 Nov 2011 at 20:51

Anybody?

wildest_jjk · 18 Nov 2011 at 09:29

I have been looking into this problem further and it is clear that it is because of the borders. I'm just not sure if there is anything I can do about it!