Advanced Search

Results 1 to 3 of 3

Thread: works good in most browsers but when resized it doesnt.

  1. #1
    Join Date
    Jun 2007
    Location
    Inman, SC
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default works good in most browsers but when resized it doesnt.

    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

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Jun 2007
    Location
    Inman, SC
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    so that will fix my problem? ill give it a try in the morning thanks.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •