SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cross Browser Problem (mostly Opera 9)

    Hello

    I have learnt css and html from Ian Lloyd's book "Build Your Own Website etc etc" so the site I have borrows heavily from the lessons in his book and I am awaiting delivery of "Advanced CSS" ... but in the meantime ...

    I have a site that validates xhtml and whose css appears to check out (except for some colour issues).

    Every page looks as expected IE7, Netscape8 and Firefox. But in Opera the pages are inconsistent.

    Site is here

    http://members.iinet.net.au/~allsaint@ihug.com.au

    Completely Messed Page
    Links
    Pages which look as expected ...
    Meet the Staff, Ministries
    right div too far left
    All the other pages

    I am not sure if you need the style sheet but I have pasted it below ... let me know if you need any more information, and also let me know if the stylesheet has any glaring errors or is a mess.

    Many thanks - I really appreciate what I have learned here.
    Deb

    asfresh style sheet

    /*
    CSS for All Saints' Anglican Church Site - with credit to "Build Your Own Website the Right Way Using CSS and HTML" by Ian Young www.sitepoint.com
    */
    body {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    background-color: #F7F1D5;
    line-height: 125%;
    padding: 0;
    margin: 0;
    }

    h1, h2, h3, h4 {
    font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
    }

    h1 {
    font-size: medium;
    background-image: url(images/heading_fade.gif);
    background-repeat: repeat-y;
    background-color: #F7F1D5;
    color: #F7F1D5;
    padding-top: .2em;
    padding-bottom: .2em;
    padding-left: .4em;
    margin: 0;
    }

    h2 {
    color: #423C18;
    font-size: 150%;
    font-weight: bold;
    padding-top: 15px;
    text-transform: uppercase;
    }

    h3 {
    color: #423C18;
    font-size: 120%;
    font-weight: bold;
    padding-top: 15px;
    }

    h4 {
    color: #423C18;
    font-weight: bold;
    padding-top: 10px;
    }

    h5 {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #423C18;
    color: #F7F1D5;
    font-size: small;
    font-weight: bold;
    padding-bottom: 2px;

    }
    li {
    font-size: smaller;
    list-style-type: none;
    }

    p {
    font-size: smaller;
    color: #423C18;
    }

    div#banner {
    height: 65px;
    padding-left:20px;
    padding-bottom: 5px;
    padding-top: 5px;
    background: #423C18;
    }

    #tagline {
    font-family: Georgia, Times, serif;
    border-top: 3px solid #ADA242;

    padding-top: .2em;
    padding-bottom: .2em;
    padding-left: .8em;
    margin: 0;
    background: #F7F1D5;
    }


    #tagline p {
    padding-top: .2em;
    padding-bottom: .2em;
    padding-left: .8em;
    margin: 0;
    }


    #tagline #tag-email {
    padding-right: .8em;
    float: right;
    }

    #bottominfo {
    font-family: Georgia, Times, serif;
    border-top: 3px solid #ADA242;
    border-bottom: 3px solid #ADA242;
    padding-top: .2em;
    padding-bottom: .2em;
    padding-left: .8em;
    margin: 0;
    background: #F7F1D5;
    }

    #bottominfo p {
    padding-top: .2em;
    padding-bottom: .2em;
    padding-left: .8em;
    margin: 0;
    }


    #rightdiv {
    background-color: #F7F1D5;
    padding: 5px 15px 5px 15px;
    border-left: 3px solid #ADA242;
    border-bottom: 3px solid #ADA242;

    }
    #rightdiv p {
    margin-top: 0;
    padding-top: 0;
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
    font-size: x-small;
    line-height: 100%;

    }

    a {
    font-weight: bold;
    }

    a:link {
    color: #423C18;
    }

    a:visited {
    color: #655B25;
    }

    a:hover {
    text-decoration: none;
    color: white;
    background-color: #423C18;
    }

    a:active {
    color: white;
    background-color: #423C18;
    }

    /* pushes the image on the home page over to the right */
    img.home {
    padding: 0;
    border: 0;
    float: right;
    margin: 0;
    }

    img.staff {
    float: left;
    margin: 30px 20px 20px 0px;
    padding: 0;
    }

    div.credit {
    font-family: Georgia, Times, serif;
    color: #6D6729;
    letter-spacing: .05em;
    padding-top: .2em;
    padding-bottom: 2em;
    padding-left: 20em;
    padding-right: 2em;
    margin: 0;
    background: #F7F1D5;
    }

    /* text of blog post content */
    .post-body {
    font-size: smaller;
    color: #423C18;
    }

    img.right {
    float: right;
    margin: 0;
    padding: 20px 20px 20px 20px;
    }

    .fun {
    color: #6D6729;
    font-family: Georgia, Times, serif;
    letter-spacing: 0.05em;
    }

    /* applied to list on staff page */

    ul.fun {
    list-style: square;
    margin-left: 100px;
    }


    blockquote.fun {
    font-style: italic;
    }

    table.download {
    border-collapse: collapse;
    }

    table.download th, table.download td {
    padding: 4px;
    border: 2px solid #ADA242;
    }

    table.download th {
    font-size: x-small;
    text-align: left;
    background: #F7F1D5;
    color: #423C18;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 2px;
    padding-right: 2px;
    }

    table.download td {
    font-size: small;
    background: #F7F1D5;
    }

    table.download caption {
    color: #423C18;
    font-size: small;
    font-weight: bold;
    text-align: left;
    padding-bottom: 5px;
    }

    #navigation {
    border-top: 3px solid #ADA242;
    width: 180px;
    height: 484px;
    background-image: url(images/nav_with_spire.gif);
    background-repeat: no-repeat;
    }

    #navigation ul {
    padding-top: 15px;
    }


    #navigation li {
    padding-top: 5px;
    font-size: smaller;
    }
    #header {
    border-top: 3px solid #ADA242;
    }

    img.feature {
    float: right;
    margin: 10px;
    }

    /* This section formats the photos on the album pag */

    .galleryphoto {
    padding-bottom: 10px;
    border-bottom: 1px solid #423C18;
    margin-bottom: 20px;
    }


    .galleryphoto img {
    margin-top: 20px;
    }
    .galleryphoto p {
    font-size: 65%;
    font-weight: bold;
    margin-top: 0;
    width: 430px;
    line-height: 1.4em;
    }

    .galleryphoto p span {
    font-weight: normal;
    color: gray;
    }

    /*
    This section deals with the position of items on the screen.
    It uses absolute positioning - fixed x and y coordinates measured from the
    top-left corner of the browser's content display.
    */



    #navigation, #bodycontent, #header, #container {
    position: absolute;
    }
    #container {
    width:100%;
    top: 114px;


    }
    #rightdiv {
    float: right;
    width: 150px;

    }

    /*#navigation, #bodycontent{
    top: 113px;
    }*/

    #bodycontent {
    border-top: 3px solid #ADA242;
    left: 200px;
    }

    #header {
    width: 100%;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,551
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to supply the right position for opera.
    Code:
    #bodycontent {
      border-top: 3px solid #ADA242;
      left: 200px;
    		right:0;
    }
    That will fix the misplaced sidebar.

  3. #3
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you SOO much!

    How easy was that!

    Is there some kind of repository of knowledge of all these little quirks or is it something you just sort of pick up on the way?

    Deb

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,551
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Is there some kind of repository of knowledge of all these little quirks
    Yes there is and its called my brain lol

    Have a look at the PIE site and quirksmode sites for more hints and tips. Also have a look at the faq for the most common problems.


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
  •