Log in

View Full Version : works good in most browsers but when resized it doesnt.



Raztat
09-07-2007, 11:15 PM
My site looks good on most browsers but when people resize their screens or have the resolution set 800x600 it looks all messed up, the banner goes off the page, text runs into things. How will I go about fixing this? ill post the css code below.


/* CSS Document */

body {
background-color: #FFFFFF;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
h1 {
color: #009900;
font-size: 16px;
font-family:Georgia, "Times New Roman", Times, serif;
}
#h1 {
color: #009900;
font-size: 16px;
font-family:Georgia, "Times New Roman", Times, serif;
}
h2 {
color: #000000;
font-size: 14px;
font-family:Georgia, "Times New Roman", Times, serif;
}
div#wrapper {
width: 80%;
background-color:#FFFFFF;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
}
div#header {
padding: 15px;
margin: 0px;
text-align: center;
}
div#nav {
padding: 10px;
margin-top: 1px;
float: left;
width: 25%;
}
div#main {
margin-left: 30%;
margin-top: 1px;
padding: 10px;
}
div#footer {
padding: 15px;
margin: 0px;
}
p {
color: #8B4513;
letter-spacing: 2px;
}
#p {
padding-right: 200px;
}
#footer {
font-size: 8px;
background-color: #8ec63f;
color: #8B4513;
letter-spacing: 2px;
}


#rightside {
font-size: 10px;
padding: 15px;
width: 137px;
right: 321px;
top: 305px;
position: absolute;
height: 95px;
}
ul#navmenu {
margin : 0;
padding : 0;
list-style-type : none;
}

ul#navmenu li {
margin-bottom : 5px;
}

ul#navmenu a {
display : block;
width : 190px;
height : auto;
background : #003366 url(images/glossyback.jpg) repeat-x; /* CHANGED/ADDED THIS */
text-decoration : none;
color : #009900;
cursor : pointer;
}

ul#navmenu a:hover, ul#navmenu a:focus, ul#navmenu a:active,
ul#navmenu a.selected, ul#navmenu a.selected:hover, ul#navmenu a.selected:focus, ul#navmenu a.selected:active {
background : #333 url(images/glossyback2.jpg) repeat-x;
color : #009900;
}

ul#navmenu a.selected {
text-align : left;
cursor : default;
}

ul#navmenu a:hover, ul#navmenu a:focus, ul#navmenu a:active {
background : #333 url(images/glossyback2.jpg) repeat-x; /* CHANGED/ADDED THIS */
color : #fff;
}

.style1 {
color: #999999;
font-size: 36px;
}
.style3 {color: #999900}
.style4 {
color: #97CB4F;
font-weight: bold;
}
.style5 {font-size: 10px}


you can see my site at http://www.bkconway.com

Twey
09-08-2007, 01:33 AM
Never mix absolute and relative units (like pixels and percentages as you've done there) unless you really know what you're doing. Use either solely pixels or solely percentages, preferably the latter.

Raztat
09-08-2007, 05:16 AM
so that will fix my problem? ill give it a try in the morning thanks.