71 users online (1 members and 70 guests)  

Thread: Css hell


  Results 1 to 2 of 2

Related

  1. Hell to all members    Forum: Introduce Yourself
    Replies: 3
  2. HTML Hell    Forum: General Discussion
    Replies: 2
  1. #1
    Cymru's Avatar
    New User

    Status
    Offline
    Join Date
    May 2004
    Posts
    1

    Css hell

    Hi all first post granted in despiration but here we go ....i have been working oon a site for a while now and have been able to get it mostly cross browser......untill today...i was informed that the site didnt look right in IE 5.5
    the code is commented for others in the team !!

    div#oldbrowser, caption {
    display: none;
    }
    a img {
    border-width: 0;
    }
    a, a:visited {
    color: #fff;
    text-decoration: none;
    }
    a:hover {
    color: #f70;
    }
    #leftcolumn {
    margin-right: -96px;/* IE 4 fix */
    }
    #leftColumn {
    float: left;
    font-size: 90%;
    width: 108px;
    /*/*/ /*/margin: 0 0 0 2px; /* Silly Netscape hack to get the borders to line up */
    }
    #contentColumn {
    width: auto;
    margin-left: 96px;
    }


    /***************************************************************************
    -- Masthead
    ***************************************************************************/
    #masthead {
    padding: 0;
    margin: 0;
    text-align: right;
    height: 50px;
    background: url(../img/bg_masthead.gif) repeat-x #99c;
    }
    h1.swap span, h2.swap span {

    }

    h1#logo {
    float: left;
    width: 310px;
    height: 50px;
    margin: 0;
    padding: 0;
    background: url(../img/ui_logo.gif) 15px 10px no-repeat;
    }

    h2#hproperty {
    float: left;
    width: 629px;
    height: 37px;
    padding: 0;
    padding: 0;
    border-top:2px solid #99c;
    border-bottom: 5px solid #99c;
    background: url(../img/ui_property.gif) no-repeat;

    }
    h2#hcharity {
    float: left;
    width: 629px;
    height: 37px;
    padding: 0;
    padding: 10;
    border-top: 0px solid #99c;
    border-bottom: 5px solid #99c;
    background: url(../img/ui_charity.gif) no-repeat;
    }

    h2#hfitness {
    float: left;
    width: 629px;
    height: 37px;
    padding: 0;
    padding: 0;
    border-top: 0px solid #99c;
    border-bottom: 5px solid #99c;
    background: url(../img/ui_fitness.gif) no-repeat;
    }
    h2#hgalleries {
    float: left;
    width: 629px;
    height: 37px;
    padding: 0;
    padding: 0;
    border-top: 0px solid #99c;
    border-bottom: 5px solid #99c;
    background: url(../img/ui_gallery2.gif) no-repeat;

    }
    h2#hpress {
    float: left;
    width: 629px;
    height: 37px;
    padding: 0;
    padding: 0;
    border-top: 0px solid #99c;
    border-bottom: 5px solid #99c;
    background: url(../img/ui_presspr.gif) no-repeat;

    }
    h2#club {
    float: left;
    width: 629px;
    height: 37px;
    padding: 0;
    padding: 0;
    border-top: 0px solid #99c;
    border-bottom: 5px solid #99c;
    background: url(../img/ui_club.gif) no-repeat;

    }
    }
    h2#journal{
    float: left;
    width: 629px;
    height: 37px;
    padding: 0;
    padding: 0;
    border-top:1px solid #99c;
    border-bottom: 5px solid #99c;
    background: url(../img/ui_journal.gif) no-repeat;


    }
    h2#bigbro{
    float: left;
    width: 629px;
    height: 37px;
    padding: 0;
    padding: 0;
    border-top:1px solid #99c;
    border-bottom: 5px solid #99c;
    background: url(../img/ui_bigbro.gif) no-repeat;

    }
    #tools {
    font-size: 90%;
    padding: 35px 15px 0 0;
    }
    #tools, #tools a, #tools a:visited {
    color: #fff;
    text-decoration: none;
    }
    #tools a:hover, #tools a:visited:hover {
    color: #fff;
    text-decoration: underline;
    }


    /***************************************************************************
    -- Ticker
    ***************************************************************************/
    #ticker {
    float: left;
    padding: 0 0 0 10px;
    margin: 10px 0 0 0;
    width: 730px;
    height: 18px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    color: #fff;
    background: url(../img/bg_ticker.gif) repeat-y #31306b;
    }
    #ticker a {
    font-size: 90%;
    color: #fff;
    text-decoration: none;
    }
    #ticker a:hover, #ticker a b {
    color: #fff;
    text-decoration: underline;
    }
    #ticker a span {
    text-decoration: none;
    }
    #ticker a b {
    color: #f90;
    }
    #breads {
    float: left;
    padding: 0 0 0 10px;
    margin: 10px 0 0 0;
    width: 730px;
    height: 18px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    color: #fff;
    background: url(../img/bg_ticker.gif) repeat-y #31306b;
    }

    /***************************************************************************
    -- Navigation
    ***************************************************************************/
    #navigation {
    margin: 0;
    padding: 0;
    width: 96px;
    }
    #navigation li {
    margin: 0;
    padding: 0;
    display: inline;
    list-style-type: none;
    }
    #navigation a {
    float: left;
    padding: 25px 0 0 0;
    overflow: hidden;
    height: 0px !important;
    height /**/:25px;
    }
    #navigation a:hover, #navigation a:active, #navigation a.selected {
    background-position: 0 -25px;
    }
    a#property {
    width: 96px;
    background: url("../img/nav_property.gif") top left no-repeat;

    }
    a#fitness {

    width: 96px;
    background: url("../img/nav_fitness.gif") top left no-repeat;
    }
    a#charity{
    width: 96px;
    background: url("../img/nav_charity.gif") top left no-repeat;
    }
    a#galleries {
    width: 96px;
    background: url("../img/nav_galleries.gif") top left no-repeat;
    }
    a#press {
    width: 96px;
    background: url("../img/nav_press.gif") top left no-repeat;
    }
    a#club {
    width: 96px;
    background: url("../img/nav_club.gif") top left no-repeat;
    }
    a#journal {
    width: 96px;
    background: url("../img/nav_journal.gif") top left no-repeat;
    }


    /***************************************************************************
    -- Home
    ***************************************************************************/
    .home {
    float: left;
    margin: 0;
    padding: 0;
    width: 600px;
    }
    .top {
    margin: 0;
    padding: 0;
    }
    .black {
    font-family: Arial, Verdana, sans-serif;
    font-size: 125%;
    font-weight: bold;
    color: #fff;
    font-variant: small-caps;
    background: #000;
    }
    .blue {
    color: #fff;
    font-size: 90%;
    background: #31306b;
    }
    a.entry, a.entry:visited {
    display: block;
    background: #31306b;
    margin: 0;
    padding: 0;
    }
    a.entry:hover {
    background: #fff;
    }

    /***************************************************************************
    -- Content
    ***************************************************************************/
    #contentColumn, #innerContentColumn {
    margin: 0;
    padding: 0;
    }
    .maincontentleft {
    float: left;
    margin: 0 0px 0px 0;
    padding: 0 0px 0px 0px;
    border: 1px solid #9999CC;
    width: 600px;
    color: #fff;
    background-color: #9999CC;
    }

    .maincontentright {
    float: left;
    width: 105px;
    color: #9999CC;
    padding: 0;
    margin: 0;
    background: #9999CC;
    }
    div.pageheader {
    padding: 0;
    margin: 0;
    }
    p.rightheader {
    font-family: Arial, Verdana, sans-serif;
    font-size: 125%;
    font-weight: bold;
    color: #9999CC;
    font-variant: small-caps;
    text-align: center;
    background: #000;
    }
    .maincontentright p {
    font-size: 90%;
    margin: 0;
    padding: 5px 10px 10px 10px;
    }
    .maincontentright p.rightheader {
    font-size: 125%;
    padding: 2px 10px 3px 10px;
    }


    /***************************************************************************
    -- Footer
    ***************************************************************************/
    #footer {
    display: block;
    padding: 0;
    margin: 0px 0 20px 0;
    color: #fff;
    border-top: 10px solid #000;
    background: #31306b;
    }
    #footer p {
    padding: 5px 0 5px 0;
    margin: 0;
    }


    .breadcrumbs {
    left: 400px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #FFFFFF;
    text-decoration: none;



    }

    .title {
    color: #FFff00;
    text-decoration: none;
    }
    .content {
    background-color:#9999CC;
    }


    so can anyone work out why http://josh2.codewords.org/index.htm
    throws all of its toys out of the pram when viewed in 5.5 anfd not in the latest versions of mozilla netscape Ie Firefox and opera ???????

    total lack of knowledge on my part here i think

    thanks
    Andy

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Hi cymru, welome to the forums.

    Nice to see another (presumably) welshman in here

    Whilst I have not got IE5.5, its probably down to the infamous box-model problem in that version.

    IE6 sorts this out nicely.
    However, there is a 'hack' for this, try here: http://tantek.com/CSS/Examples/boxmodelhack.html
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?



Tags for this Thread