SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2002
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need help with basic css page layout

    [FONT=century gothic]I'm trying to impletment CSS to throw together a fairly simple site. However, the layout of the page varies considerably on different browers as well as macs and PCs. In particular, when the brower text size is changed (larger and smaller) my columns are distorted. I don't think I'm using very obscure CSS selectors but obviously I'm doing something wrong. My style sheet is linked so I've copied it below. I'd apprechiate if someone could give the site a quick look:
    http://www.primax.com/ori ]

    Thanks.

    __________________


    body
    { color: #000000; text-align: left; margin: 0px }

    #content
    { font-size: 11px;
    line-height: 20px;
    font-family: Verdana, Geneva, Arial, sans-serif;
    background-color: #FFFFFF;
    text-align: left;
    margin-right: auto;
    margin-left: auto;
    width: 700px;
    height: auto }

    #header
    {
    background-color: #49370E;
    text-align: center;
    width: 100%;
    height: 21px;
    }

    #logoArea
    {
    background-color: #FFFFFF;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 0px;
    width: 700px;
    height: 113px;
    border-bottom: 1px solid #C0A05D;
    }


    .col1
    {
    font-size: 7pt;
    line-height: 11px;
    text-align: left;
    color: #999999;
    background-color: #FFFFFF;
    float: left;
    width: 299px;
    height: auto;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    }

    .col2
    {
    font-family: times, serif;
    font-size: 10pt;
    line-height: 14px;
    padding: 1px 10px 3px 15px;
    background-color: rgb(255, 255, 255);
    float: left;
    height: auto;
    width: 400px;
    padding-bottom: 10px;
    }


    .rolloverbar
    {
    color: #999999;
    background-color: #C0A05D;
    width: 280px;
    height: 40px;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    }

    #footer
    {
    color: #49370E;
    font-size: 10pt;
    font-family: times, serif;
    background-color: #FFFFFF;
    border-top: 1px solid #C0A05D;
    text-align: center;
    clear: left;
    margin-top: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 700px;
    height: 50px;
    }

    a:link
    {
    color: #49370E;
    background-color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    }

    a:hover
    {
    color: #C0A05D;
    background-color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    }

    a:visited
    {
    color: #999999;
    background-color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    }

    h3
    {
    font-weight: bold;
    font-style: italic;
    font-size: 11pt;
    color: #C0A05D;
    background-color: #FFFFFF;
    }

    .tiny
    {
    font-size: 7pt;
    font-family: arial, sans-serif;
    color: #000000;
    }

  2. #2
    SitePoint Evangelist worksdev's Avatar
    Join Date
    Mar 2002
    Location
    Central, PA - originally from Monterey, CA
    Posts
    497
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just viewed it in Netscape and IE 6 on Windows XP. It did not appear to change much between browsers, and the columns looked fine.

    I am not a CSS expert, but I have had a simular problem:

    I would try setting an excact font size also in the body tag's CSS defintion. I ran into something simular in the past. Even though all my font sizes were defined in the different classes, the space on the page's body changed by what Font Size Selection was chosen in the browser.

    Also make sure that you clear your cache when making changes and viewing them again. Some broswers aren't the best at clearing a style sheet.

    best regards,
    worksdev


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
  •