CODEWITHSUNDEEP
css
Jim
Jim

Reputation: 17

website resolution issues

I use % for everything so my site works the same in all screen resolutions. However the position of the content is misplaced and varies from resolution to resolution and from browser to browser. A thing that I noticed and is probably related to the problem is that the background image doesn't react to zoom. The content however reacts.

html {height: 200%; width: 100%;}

body { min-width: 99%; height: 100%; margin: 0; padding: 0; color: #969696; background-color: black; text-align: center; font-family: Arial; font-size: 100%; }

container {

position: relative;
height: 100%;
margin: auto;
width: 85%;
text-align: center;
border: 1px solid red;
background-image: url('images/bgmain.png');
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: hidden; }

navbar {

position: relative;
min-height: 2%;
margin-top: 21%;
margin-left: 2%;
padding: 0 auto;
width: 95%;
text-align: center;
overflow: hidden; }

For example the navigation bar in my resolution is fine while on other resolutions its misplaced. Is there any mistake? Do I miss something? Thanks in advance.

Upvotes: 0

Views: 65

Answers (1)

Jon P
Jon P

Reputation: 821

A reset of css styles would help to gain much control to your styles. Refer to this link http://meyerweb.com/eric/tools/css/reset/ and this http://developer.yahoo.com/yui/reset/ and also this http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/

Upvotes: 0

Related Questions