Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Help w/ WordPress page – "Fit to Width" Browser

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • June 27, 2010 at 1:52 pm #29482
    gratefulhealer
    Member

    I have seen other posts like this but nothing really has helped.

    I am trying to make my page fit the user’s browser, so that my site is user-friendly and fits all within the browser size.

    Here is my page: http://www.GratitudeHealing.info

    In Mozilla the page looks perfect, but in IE version 8.0 on windows vista, the page is so wide and cuts off the content off the monitor, necessitating an annoying left/right scroll.

    You can view it yourself and see that in some browsers/operating systems, the page goes off the screen and a left/right scroll bar is needed. If the page looks fine on your computer, you can use http://www.multibrowserviewer.com to see what the page would look like on all the possible browser/operating system combinations out there.

    -Matt

    God Bless anybody who can help, my webpage exists to help people suffering with illnesses and cancer….

    Here is my Stylesheet:

    Code:
    /*
    Theme Name: gratitudehealing_wp68p_both_Edited
    Theme URI:
    Description: Artisteer-generated theme
    Version: 1.0
    Author: Ample Green Foundation
    Author URI: http://www.amplegreen.org
    Tags: fixed width, three columns, valid XHTML, widgets
    */

    /* begin Page */

    /* Generated with Artisteer version 2.3.0.23326, file checksum is FF7398DE. */

    body

    {
    margin: auto;
    padding: 0;
    max-width : 100%;
    background-color: #FCFDFD;
    }

    #art-main
    {
    position: relative;
    width: 100%;
    max-width : 900px;
    left: 0;
    top: 0;
    }

    #art-page-background-simple-gradient
    {
    position: absolute;
    background-image: url(‘images/Page-BgSimpleGradient.jpg’);
    background-repeat: repeat-x;
    top:0;
    width: 100%;
    max-width : 900px;
    height: 500px;
    }

    .cleared
    {
    float: none;
    clear: both;
    margin: 0;
    padding: 0;
    border: none;
    font-size:1px;
    }

    form
    {
    padding:0 !important;
    margin:0 !important;
    }

    table.position
    {
    position: relative;
    width: 100%;
    max-width : 900px;
    table-layout: fixed;
    }
    /* end Page */

    /* begin Box, Sheet */
    .art-Sheet
    {
    position:relative;
    z-index:0;
    margin:0 auto;
    width: 1229px;
    min-width:35px;
    min-height:35px;
    }

    .art-Sheet-body
    {
    position: relative;
    z-index: 1;
    padding: 13px;
    }

    .art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl, .art-Sheet-tc, .art-Sheet-bc,.art-Sheet-cr, .art-Sheet-cl
    {
    position:absolute;
    z-index:-1;
    }

    .art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl
    {
    width: 34px;
    height: 34px;
    background-image: url(‘images/Sheet-s.png’);
    }

    .art-Sheet-tl
    {
    top:0;
    left:0;
    clip: rect(auto, 17px, 17px, auto);
    }

    .art-Sheet-tr
    {
    top: 0;
    right: 0;
    clip: rect(auto, auto, 17px, 17px);
    }

    .art-Sheet-bl
    {
    bottom: 0;
    left: 0;
    clip: rect(17px, 17px, auto, auto);
    }

    .art-Sheet-br
    {
    bottom: 0;
    right: 0;
    clip: rect(17px, auto, auto, 17px);
    }

    .art-Sheet-tc, .art-Sheet-bc
    {
    left: 17px;
    right: 17px;
    height: 34px;
    background-image: url(‘images/Sheet-h.png’);
    }

    .art-Sheet-tc
    {
    top: 0;
    clip: rect(auto, auto, 17px, auto);
    }

    .art-Sheet-bc
    {
    bottom: 0;
    clip: rect(17px, auto, auto, auto);
    }

    .art-Sheet-cr, .art-Sheet-cl
    {
    top: 17px;
    bottom: 17px;
    width: 34px;
    background-image: url(‘images/Sheet-v.png’);
    }

    .art-Sheet-cr
    {
    right:0;
    clip: rect(auto, auto, auto, 17px);
    }

    .art-Sheet-cl
    {
    left:0;
    clip: rect(auto, 17px, auto, auto);
    }

    .art-Sheet-cc
    {
    position:absolute;
    z-index:-1;
    top: 17px;
    left: 17px;
    right: 17px;
    bottom: 17px;
    background-image: url(‘images/Sheet-c.png’);
    }

    .art-Sheet
    {
    margin-top: -13px !important;
    }

    #art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare
    {
    max-width:900px;
    }

    /* end Box, Sheet */

    /* begin Header */
    div.art-Header
    {
    margin: 0 auto;
    position: relative;
    z-index:0;
    width: 1203px;
    height: 265px;
    }

    div.art-Header-jpeg
    {
    position: absolute;
    z-index:-1;
    top: 0;
    left: 0;
    width: 1203px;
    height: 265px;
    background-image: url(‘images/Header.jpg’);
    background-repeat: no-repeat;
    background-position: center center;
    }
    /* end Header */

    /* begin Menu */
    /* menu structure */

    .art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
    {
    text-align:left;
    text-decoration:none;
    outline:none;
    letter-spacing:normal;
    word-spacing:normal;
    }

    .art-menu, .art-menu ul
    {
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
    display: block;
    }

    .art-menu li
    {
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    float: left;
    position: relative;
    z-index: 5;
    background:none;
    }

    .art-menu li:hover
    {
    z-index: 10000;
    white-space: normal;
    }

    .art-menu li li
    {
    float: none;
    }

    .art-menu ul
    {
    visibility: hidden;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    background:none;
    }

    .art-menu li:hover>ul
    {
    visibility: visible;
    top: 100%;
    }

    .art-menu li li:hover>ul
    {
    top: 0;
    left: 100%;
    }

    .art-menu:after, .art-menu ul:after
    {
    content: “.”;
    height: 0;
    display: block;
    visibility: hidden;
    overflow: hidden;
    clear: both;
    }
    .art-menu, .art-menu ul
    {
    min-height: 0;
    }

    .art-menu ul
    {
    background-image: url(images/spacer.gif);
    padding: 10px 30px 30px 30px;
    margin: -10px 0 0 -30px;
    }

    .art-menu ul ul
    {
    padding: 30px 30px 30px 10px;
    margin: -30px 0 0 -10px;
    }

    /* menu structure */

    .art-menu
    {
    padding: 6px 6px 6px 6px;
    }

    .art-nav
    {
    position: relative;
    height: 35px;
    z-index: 265;
    }

    .art-nav .l, .art-nav .r
    {
    position: absolute;
    z-index: -1;
    top: 0;
    height: 35px;
    background-image: url(‘images/nav.png’);
    }

    .art-nav .l
    {
    left: 0;
    right:0px;
    }

    .art-nav .r
    {
    right: 0;
    width: 1003px;
    clip: rect(auto, auto, auto, 1003px);
    }

    /* end Menu */

    /* begin MenuItem */
    .art-menu ul li
    {
    clear: both;
    }

    .art-menu a
    {
    position:relative;
    display: block;
    overflow:hidden;
    height: 23px;
    cursor: pointer;
    text-decoration: none;
    margin-right: 1px;
    margin-left: 1px;
    }

    .art-menu a .r, .art-menu a .l
    {
    position:absolute;
    display: block;
    top:0;
    z-index:-1;
    height: 99px;
    background-image: url(‘images/MenuItem.png’);
    }

    .art-menu a .l
    {
    left:0;
    right:3px;
    height:20px;

    }

    .art-menu a .r
    {
    width:606px;
    right:0;
    height:20px;

    clip: rect(auto, auto, auto, 403px);
    }

    .art-menu a .t
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 17px;
    font-style: normal;
    font-weight: normal;
    color: #183449;
    padding: 0 8px;
    margin: 0 3px;
    line-height: 23px;
    text-align: center;
    }

    .art-menu a:hover .l, .art-menu a:hover .r
    {
    top:-23px;
    }

    .art-menu li:hover>a .l, .art-menu li:hover>a .r
    {
    top:-23px;
    }

    .art-menu li:hover a .l, .art-menu li:hover a .r
    {
    top:-23px;
    }
    .art-menu a:hover .t
    {
    color: #27333A;
    }

    .art-menu li:hover a .t
    {
    color: #27333A;
    }

    .art-menu li:hover>a .t
    {
    color: #27333A;
    }

    .art-menu a.active .l, .art-menu a.active .r
    {
    top: -46px;
    }

    .art-menu a.active .t
    {
    color: #C3D4DF;
    }

    /* end MenuItem */

    /* begin MenuSubItem */
    .art-menu ul a
    {
    display:block;
    text-align: center;
    white-space: nowrap;
    height: 30px;
    width: 260px;
    overflow:hidden;
    line-height: 30px;
    margin-right: auto;

    background-image: url(‘images/blue222.jpg’);
    background-position: left top;
    background-repeat: repeat-x;
    border-width: 0px;
    border-style: solid;
    }

    .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
    {
    display: inline;
    float: none;
    margin: inherit;
    padding: inherit;
    background-image: none;
    text-align: inherit;
    text-decoration: inherit;
    }

    .art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
    {
    text-align: center;
    text-indent: 15px;
    text-decoration: none;
    line-height: 35px;
    color: #214763;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    }

    .art-menu ul ul a
    {
    margin-left: auto;
    }

    .art-menu ul li a:hover
    {
    color: #000000;
    background-position: 0 -20px;
    }

    .art-menu ul li:hover>a
    {
    color: #000000;
    background-position: 0 -20px;
    }

    .art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
    {
    color: #000000;
    }

    .art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
    {
    color: #000000;
    }

    /* end MenuSubItem */

    /* begin ContentLayout */
    .art-contentLayout
    {
    position: relative;
    margin-bottom: 1px;
    width: 1203px;
    }
    /* end ContentLayout */

    /* begin Box, Block */
    .art-Block
    {
    position:relative;
    z-index:0;
    margin:0 auto;
    min-width:15px;
    min-height:15px;
    }

    .art-Block-body
    {
    position: relative;
    z-index: 1;
    padding: 7px;
    }

    .art-Block-tr, .art-Block-tl, .art-Block-br, .art-Block-bl, .art-Block-tc, .art-Block-bc,.art-Block-cr, .art-Block-cl
    {
    position:absolute;
    z-index:-1;
    }

    .art-Block-tr, .art-Block-tl, .art-Block-br, .art-Block-bl
    {
    width: 14px;
    height: 14px;
    background-image: url(‘images/Block-s.png’);
    }

    .art-Block-tl
    {
    top:0;
    left:0;
    clip: rect(auto, 7px, 7px, auto);
    }

    .art-Block-tr
    {
    top: 0;
    right: 0;
    clip: rect(auto, auto, 7px, 7px);
    }

    .art-Block-bl
    {
    bottom: 0;
    left: 0;
    clip: rect(7px, 7px, auto, auto);
    }

    .art-Block-br
    {
    bottom: 0;
    right: 0;
    clip: rect(7px, auto, auto, 7px);
    }

    .art-Block-tc, .art-Block-bc
    {
    left: 7px;
    right: 7px;
    height: 14px;
    background-image: url(‘images/Block-h.png’);
    }

    .art-Block-tc
    {
    top: 0;
    clip: rect(auto, auto, 7px, auto);
    }

    .art-Block-bc
    {
    bottom: 0;
    clip: rect(7px, auto, auto, auto);
    }

    .art-Block-cr, .art-Block-cl
    {
    top: 7px;
    bottom: 7px;
    width: 14px;
    background-image: url(‘images/Block-v.png’);
    }

    .art-Block-cr
    {
    right:0;
    clip: rect(auto, auto, auto, 7px);
    }

    .art-Block-cl
    {
    left:0;
    clip: rect(auto, 7px, auto, auto);
    }

    .art-Block-cc
    {
    position:absolute;
    z-index:-1;
    top: 7px;
    left: 7px;
    right: 7px;
    bottom: 7px;
    background-color: #E8EEF3;
    }

    .art-Block
    {
    margin: 7px;
    }

    /* end Box, Block */

    /* begin BlockHeader */
    .art-BlockHeader
    {
    position:relative;
    z-index:0;
    height: 30px;
    padding: 0 5px;
    margin-bottom: 7px;
    }

    .art-BlockHeader .t
    {
    height: 30px;
    color: #214763;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    white-space : nowrap;
    padding: 0 6px;
    line-height: 30px;
    }

    .art-BlockHeader .l, .art-BlockHeader .r
    {
    display:block;
    position:absolute;
    z-index:-1;
    height: 30px;
    background-image: url(‘images/BlockHeader.png’);
    }

    .art-BlockHeader .l
    {
    left:0;
    right:6px;
    }

    .art-BlockHeader .r
    {
    width:1223px;
    right:0;
    clip: rect(auto, auto, auto, 1217px);
    }

    .art-header-tag-icon
    {
    height: 30px;
    background-position:left top;
    background-image: url(‘images/BlockHeaderIcon.png’);
    padding:0 0 0 12px;
    background-repeat: no-repeat;
    min-height: 12px;
    margin: 0 0 0 5px;
    }

    /* end BlockHeader */

    /* begin Box, BlockContent */
    .art-BlockContent
    {
    position:relative;
    z-index:0;
    margin:0 auto;
    min-width:1px;
    min-height:1px;
    }

    .art-BlockContent-body
    {
    position: relative;
    z-index: 1;
    padding: 6px;
    }

    .art-BlockContent-body
    {
    color:#1D262A;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    }

    .art-BlockContent-body a:link
    {
    color: #29577A;
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    }

    .art-BlockContent-body a:visited, .art-BlockContent-body a.visited
    {
    color: #708D9E;
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    }

    .art-BlockContent-body a:hover, .art-BlockContent-body a.hover
    {
    color: #3672A1;
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
    }

    .art-BlockContent-body ul
    {
    list-style-type: none;
    color: #4C6370;
    margin:0;
    padding:0;
    }

    .art-BlockContent-body ul li
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 16px;
    text-decoration: none;
    line-height: 125%;
    line-height: 1.25em;
    padding: 0px 0 0px 13px;
    background-image: url(‘images/BlockContentBullets.png’);
    background-repeat: no-repeat;
    }

    /* end Box, BlockContent */

    /* begin Box, Post */
    .art-Post
    {
    position:relative;
    z-index:0;
    margin:0 auto;
    min-width:1px;
    min-height:1px;
    }

    .art-Post-body
    {
    position: relative;
    z-index: 1;
    padding: 10px;
    }

    .art-Post
    {
    margin: 7px;
    }

    /* Start images */
    a img
    {
    border: 0;
    }

    .art-article img, img.art-article
    {
    border: solid 1px #AFC6D4;
    margin: 1em;
    }

    .art-metadata-icons img
    {
    border: none;
    vertical-align: middle;
    margin: 2px;
    }
    /* Finish images */

    /* Start tables */

    .art-article table, table.art-article
    {
    border-collapse: collapse;
    margin: 1px;
    width:auto;
    }

    .art-article table, table.art-article .art-article tr, .art-article th, .art-article td
    {
    background-color:Transparent;
    }

    .art-article th, .art-article td
    {
    padding: 2px;
    border: solid 1px #608DA9;
    vertical-align: top;
    text-align:left;
    }

    .art-article th
    {
    text-align: center;
    vertical-align: middle;
    padding: 7px;
    }

    /* Finish tables */

    pre
    {
    overflow: auto;
    padding: 0.1em;
    }

    /* end Box, Post */

    /* begin PostHeaderIcon */
    .art-PostHeader
    {
    text-decoration:none;
    margin: 0.2em 0;
    padding: 0;
    font-weight:normal;
    font-style:normal;
    letter-spacing:normal;
    word-spacing:normal;
    font-variant:normal;
    text-decoration:none;
    font-variant:normal;
    text-transform:none;
    text-align:left;
    text-indent:0;
    line-height:inherit;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 22px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #1C3C54;
    }

    .art-PostHeader a, .art-PostHeader a:link, .art-PostHeader a:visited, .art-PostHeader a:hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 22px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    margin:0;
    color: #1C3C54;
    }

    /* end PostHeaderIcon */

    /* begin PostHeader */
    .art-PostHeader a:link
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
    text-align: left;
    color: #224967;
    }

    .art-PostHeader a:visited, .art-PostHeader a.visited
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
    text-align: left;
    color: #384852;
    }

    .art-PostHeader a:hover, .art-PostHeader a.hovered
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
    text-align: left;
    color: #1B3950;
    }
    /* end PostHeader */

    /* begin PostMetadata */
    .art-PostMetadataHeader
    {
    padding:1px;
    background-color: #D4E0E8;
    border-color: #AFC6D4;
    border-style: solid;
    border-width: 1px;
    }
    /* end PostMetadata */

    /* begin PostIcons */
    .art-PostHeaderIcons
    {
    padding:1px;
    }

    .art-PostHeaderIcons, .art-PostHeaderIcons a, .art-PostHeaderIcons a:link, .art-PostHeaderIcons a:visited, .art-PostHeaderIcons a:hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 16px;
    color: #36464F;
    }

    .art-PostHeaderIcons a, .art-PostHeaderIcons a:link, .art-PostHeaderIcons a:visited, .art-PostHeaderIcons a:hover
    {
    margin:0;
    }

    .art-PostHeaderIcons a:link
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    color: #265273;
    }

    .art-PostHeaderIcons a:visited, .art-PostHeaderIcons a.visited
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    color: #265273;
    }

    .art-PostHeaderIcons a:hover, .art-PostHeaderIcons a.hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
    color: #265273;
    }
    /* end PostIcons */

    /* begin PostContent */
    /* Content Text Font & Color (Default) */
    body
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    color: #3C4E58;
    }

    .art-PostContent p
    {
    margin: 0.5em 0;
    }

    .art-PostContent, .art-PostContent p
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    text-align: justify;
    color: #3C4E58;
    }

    .art-PostContent
    {
    margin:0;
    }

    /* Start Content link style */
    /*
    The right order of link pseudo-classes: Link-Visited-Hover-Focus-Active.
    http://www.w3schools.com/CSS/css_pseudo_classes.asp
    http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states/
    */
    a
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    color: #3672A1;
    }

    /* Adds special style to an unvisited link. */
    a:link
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    color: #3672A1;
    }

    /* Adds special style to a visited link. */
    a:visited, a.visited
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    color: #2B3840;
    }

    /* :hover – adds special style to an element when you mouse over it. */
    a:hover, a.hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
    color: #1B3950;
    }

    /* Finish Content link style */

    /* Resert some headings default style & links default style for links in headings*/
    h1, h2, h3, h4, h5, h6,
    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
    h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
    h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
    {
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    }

    /* Start Content headings Fonts & Colors */
    h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 28px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #29577A;
    }

    h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 22px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #29577A;
    }

    h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 18px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #39576A;
    }

    h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #1D262A;
    }

    h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #1D262A;
    }

    h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #1D262A;
    }
    /* Finish Content headings Fonts & Colors */
    /* end PostContent */

    /* begin PostBullets */
    /* Start Content list */
    ol, ul
    {
    color: #0E1315;
    margin:1em 0 1em 2em;
    padding:0;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 16px;
    }

    li ol, li ul
    {
    margin:0.5em 0 0.5em 2em;
    padding:0;
    }

    li
    {
    margin:0.2em 0;
    padding:0;
    }

    ul
    {
    list-style-type: none;
    }

    ol
    {
    list-style-position:inside;

    }

    .art-Post li
    {
    padding:0px 0 0px 13px;
    line-height:1.2em;
    }

    .art-Post ol li, .art-Post ul ol li
    {
    background: none;
    padding-left:0;
    }

    .art-Post ul li, .art-Post ol ul li
    {
    background-image: url(‘images/PostBullets.png’);
    background-repeat:no-repeat;
    padding-left:13px;
    }

    /* Finish Content list */
    /* end PostBullets */

    /* begin PostQuote */
    /* Start blockquote */
    blockquote,
    blockquote p,
    .art-PostContent blockquote p
    {
    color:#0B1014;
    font-family: Arial, Helvetica, Sans-Serif;
    font-style: italic;
    font-weight: normal;
    text-align: left;
    }

    blockquote,
    .art-PostContent blockquote
    {
    border:solid 1px #AFC6D4;
    margin:10px 10px 10px 50px;
    padding:5px 5px 5px 41px;
    background-color:#D4E0E8;
    background-image:url(‘images/PostQuote.png’);
    background-position:left top;
    background-repeat:no-repeat;
    }

    /* Finish blockuote */
    /* end PostQuote */

    /* begin PostIcons */
    .art-PostFooterIcons
    {
    padding:1px;
    }

    .art-PostFooterIcons, .art-PostFooterIcons a, .art-PostFooterIcons a:link, .art-PostFooterIcons a:visited, .art-PostFooterIcons a:hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 11px;
    text-decoration: none;
    color: #3C4E58;
    }

    .art-PostFooterIcons a, .art-PostFooterIcons a:link, .art-PostFooterIcons a:visited, .art-PostFooterIcons a:hover
    {
    margin:0;
    }

    .art-PostFooterIcons a:link
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    color: #29577A;
    }

    .art-PostFooterIcons a:visited, .art-PostFooterIcons a.visited
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    color: #29577A;
    }

    .art-PostFooterIcons a:hover, .art-PostFooterIcons a.hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
    color: #29577A;
    }
    /* end PostIcons */

    /* begin Button */
    .art-button-wrapper .art-button
    {
    display:inline-block;
    width: auto;
    outline:none;
    border:none;
    background:none;
    line-height:33px;
    margin:0 !important;
    padding:0 !important;
    overflow: visible;
    cursor: default;
    text-decoration: none !important;
    z-index:0;
    vertical-align: middle;
    }

    .art-button img, .art-button-wrapper img
    {
    margin: 0;
    }

    .art-button-wrapper
    {
    display:inline-block;
    vertical-align: middle;
    position:relative;
    height: 33px;
    overflow:hidden;
    white-space: nowrap;
    width: auto;
    z-index:0;
    }

    .firefox2 .art-button-wrapper
    {
    display:block;
    float:left;
    }

    .art-button-wrapper .art-button
    {
    display:block;
    height: 33px;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    white-space: nowrap;
    text-align: left;
    padding: 0 21px !important;
    line-height: 33px;
    text-decoration: none !important;
    color: #224967 !important;
    }

    input, select
    {
    vertical-align: middle;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    }

    .art-button-wrapper.hover .art-button, .art-button:hover
    {
    color: #EEF3F6 !important;
    text-decoration: none !important;
    }

    .art-button-wrapper.active .art-button
    {
    color: #F3F5F7 !important;
    }

    .art-button-wrapper .l, .art-button-wrapper .r
    {
    display:block;
    position:absolute;
    z-index:-1;
    height: 99px;
    background-image: url(‘images/Button.png’);
    }

    .art-button-wrapper .l
    {
    left:0;
    right:10px;
    }

    .art-button-wrapper .r
    {
    width:409px;
    right:0;
    clip: rect(auto, auto, auto, 399px);
    }

    .art-button-wrapper.hover .l, .art-button-wrapper.hover .r
    {
    top: -33px;
    }

    .art-button-wrapper.active .l, .art-button-wrapper.active .r
    {
    top: -66px;
    }

    /* end Button */

    /* begin Footer */
    .art-Footer
    {
    position:relative;
    z-index:0;
    overflow:hidden;
    width: 1203px;
    margin: 5px auto 0px auto;
    }

    .art-Footer .art-Footer-inner
    {
    height:1%;
    position: relative;
    z-index: 0;
    padding: 8px;
    text-align: center;
    }

    .art-Footer .art-Footer-background
    {
    position:absolute;
    z-index:-1;
    background-repeat:no-repeat;
    background-image: url(‘images/Footer.png’);
    width: 1203px;
    height: 150px;
    bottom:0;
    left:0;
    }

    .art-rss-tag-icon
    {
    position: relative;
    display:block;
    float:left;
    background-image: url(‘images/rssIcon.png’);
    background-position: center right;
    background-repeat: no-repeat;
    margin: 0 5px 0 0;
    height: 25px;
    width: 25px;
    cursor: default;
    }

    .art-Footer .art-Footer-text p
    {
    margin: 0;
    }

    .art-Footer .art-Footer-text
    {
    display:inline-block;
    color:#1A364D;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 11px;
    }

    .art-Footer .art-Footer-text a:link
    {
    text-decoration: none;
    color: #265273;
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    }

    .art-Footer .art-Footer-text a:visited
    {
    text-decoration: none;
    color: #536B79;
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    }

    .art-Footer .art-Footer-text a:hover
    {
    text-decoration: none;
    color: #336D99;
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
    }
    /* end Footer */

    /* begin PageFooter */
    .art-page-footer, .art-page-footer a, .art-page-footer a:link, .art-page-footer a:visited, .art-page-footer a:hover
    {
    font-family:Arial;
    font-size:10px;
    letter-spacing:normal;
    word-spacing:normal;
    font-style:normal;
    font-weight:normal;
    text-decoration:underline;
    color:#7DAED4;
    }

    .art-page-footer
    {
    margin:1em;
    text-align:center;
    text-decoration:none;
    color:#98ADB9;
    }
    /* end PageFooter */

    /* begin LayoutCell */
    .art-contentLayout .art-sidebar1
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 240px;
    }
    /* end LayoutCell */

    /* begin LayoutCell */
    .art-contentLayout .art-content
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 721px;
    }
    .art-contentLayout .art-content-sidebar1
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 961px;
    }
    .art-contentLayout .art-content-sidebar2
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 961px;
    }
    .art-contentLayout .art-content-wide
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 1201px;
    }
    /* end LayoutCell */

    /* begin LayoutCell */
    .art-contentLayout .art-sidebar2
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 240px;
    }
    /* end LayoutCell */

    .commentlist, .commentlist li
    {
    background: none;
    }

    .commentlist li li
    {
    margin-left:30px;
    }

    .commentlist li .avatar
    {
    float: right;
    border: 1px solid #eee;
    padding: 2px;
    margin:1px;
    background: #fff;
    }

    .commentlist li cite
    {
    font-size:1.2em;
    }

    #commentform textarea
    {
    width: 100%;
    }

    img.wp-smiley
    {
    border:none;
    margin:0;
    padding:0;
    }

    .navigation
    {
    display: block;
    text-align: center;
    }

    /* Recommended by http://codex.wordpress.org/CSS */
    /* Begin */
    .aligncenter, div.aligncenter, .art-article .aligncenter img, .aligncenter img.art-article, .aligncenter img, img.aligncenter
    {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    .alignleft
    {
    float: left;
    }

    .alignright
    {
    float: right;
    }

    .alignright img, img.alignright
    {
    margin: 1em;
    margin-right: 0;
    }

    .alignleft img, img.alignleft
    {
    margin: 1em;
    margin-left: 0;
    }

    .wp-caption
    {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 4px;
    margin: 10px;
    }

    .wp-caption img
    {
    margin: 0;
    padding: 0;
    border: 0 none;
    }

    .wp-caption p.wp-caption-text
    {
    font-size: 11px;
    line-height: 17px;
    padding: 0 4px 5px;
    margin: 0;
    }
    /* End */

    .hidden
    {
    display: none;
    }

    /* Calendar */
    #wp-calendar {
    empty-cells: show;
    margin: 10px auto 0;
    width: 155px;
    }

    #wp-calendar #next a {
    padding-right: 10px;
    text-align: right;
    }

    #wp-calendar #prev a {
    padding-left: 10px;
    text-align: left;
    }

    #wp-calendar a {
    display: block;
    }

    #wp-calendar caption {
    text-align: center;
    width: 100%;
    }

    #wp-calendar td {
    padding: 3px 0;
    text-align: center;
    }

    .gallery {
    letter-spacing: normal;
    }

    #todays-events{
    position: relative;
    z-index: 11;
    }

    #upcoming-events{
    position: relative;
    z-index: 10;
    }

    June 27, 2010 at 3:40 pm #79006
    virtual
    Participant

    You are working with a total width of over 1200px, so it is normal that it won’t fit in some people’s browsers. Look at these statistics http://www.w3schools.com/browsers/browsers_display.asp

    Bear in mind also that people with wider screen resolution do not necessarily have their browser windows open to full screen width. If you want to be safe, design your site to a max width of 960px.

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.