CSS script problem in Safari pls HELP

Discussion in 'Web Design and Development' started by RAHQ, Feb 26, 2010.

  1. RAHQ macrumors newbie

    Joined:
    Feb 26, 2010
    #1
    Hi Guys:)

    As this is my firs post please dont be to harsh:eek:

    Sure some of you have had a problem like this so sorry for asking the question again. I am very new to css scripts and this type of web desighn. I have recently started working of a template wesite and it is now complete, the problem is that it displays perfectly in IE but not in Safari. It is as if Safari is not reading the CSS properly, text is wrong color size etc and buttons is all messed up. Please tel me what you think as I am totally confused by this:confused:

    www.frontierhouse.co.za

    Thank You.
    PHP:
    --------------------------------------------------- */

    /* ------------------------------------------------
       HTML ELEMENTS
    --------------------------------------------------- */

    /* Top Elements */
    * { margin0padding0outline}

    body {
        
    background#fff;
        
    font11px/1.75em VerdanaTahomaarialsans-serif;
        
    color#666666;
        
    text-alignleft;
        
    margin0;
    }

    /* links */
    aa:visited {    
        
    color#326ea1; 
        
    backgroundinherit;
        
    text-decorationnone;        
    }
    a:hover {
        
    color#724F2C;
        
    backgroundinherit;
        
    padding-bottom0;
        
    border-bottom2px solid #dbd5c5;
    }

    /* headers */
    h1h2h3 {
        
    font-family'Trebuchet MS'TahomaSans-serif;
        
    font-weightBold;     
        
    color#333;        
    }
    h1 {
        
    font-size160%;    
        
    font-weightnormal;
    }
    h2 {
        
    font-size130%;
        
    text-transformuppercase;    
    }
    h3 {
        
    font-size130%;    
    }

    h1h2h3{
        
    padding10px;
        
    margin0;
        
    font-family"Gill Sans MT""Gill Sans MT Condensed""Gill Sans MT Ext Condensed Bold""Gill Sans Ultra Bold";
    }
    ulol {
        
    margin5px 20px;
        
    padding0 20px;
    }

    /* images */
    img {
        
    border1px solid #999;
        
    padding8px;
        
    color#FFF;
        
    background-color#FFF;
    }
    img.float-right {
          
    margin5px 0px 10px 10px;  
    }
    img.float-left {
          
    margin5px 10px 10px 0px;
    }

    code {
          
    margin5px 0;
          
    padding10px;
          
    text-alignleft;
          
    displayblock;
          
    overflowauto;  
          
    font500 1em/1.5em 'Lucida Console''courier new'monospace ;
          
    /* white-space: pre; */
          
    background#F5F5F5;
        
    border-left3px solid #D4D4D4;
    }
    acronym {
      
    cursorhelp;
      
    border-bottom1px dashed #777;
    }
    blockquote {
        
    fontbold 1.4em/1.5em 'Trebuchet MS'TahomaSans-serif;    
        
    margin10px;
         
    padding0 0 0 25px;  
       
    background#F5F5F5;
        
    border-left3px solid #D4D4D4;    
        
    color#444;
    }

    /* start - table */
    table {
        
    border-collapsecollapse;
        
    margin10px;    
    }
    th strong {
        
    color#fff;
    }
    th {
        
    background#e7e6e6 url(button.jpg) repeat-x;
        
    height29px;
        
    padding-left12px;
        
    padding-right12px;    
        
    text-alignleft;
        
    border-left1px solid #f4f4f4;
        
    border-bottomsolid 2px #fff;
        
    color#333;
    }
    tr {
        
    height30px;
    }
    td {
        
    padding-left11px;
        
    padding-right11px;
        
    border-left1px solid #fff;
        
    border-bottom1px solid #fff;
    }
    td.first,th.first {
        
    border-left0px;
    }
    tr.row-{
        
    background#F8F8F8;
    }
    tr.row-{
        
    background#EFEFEF;        
    }
    /* end - table */

    /* form elements */
    form {
        
    margin:10pxpadding0 5px;
        
    background#F5F5F5;    
    }
    label {
        
    display:block;
        
    font-weight:bold;
        
    margin:5px 0;
    }
    input {
        
    padding:2px;
        
    border:1px solid #eee;
        
    fontnormal 1em Verdanasans-serif;
        
    color:#777;
    }
    textarea {
        
    width:400px;
        
    padding:2px;
        
    fontnormal 1em Verdanasans-serif;
        
    border:1px solid #eee;
        
    height:100px;
        
    display:block;
        
    color:#777;
    }
    input.button {
        
    height24px;
        
    margin0;
        
    color#724F2C;
        
    background#e7e6e6 url(button.jpg) repeat-x;
        
    border.5px solid #dadada;
        
    font-family"Gill Sans MT""Gill Sans MT Condensed""Gill Sans MT Ext Condensed Bold""Gill Sans Ultra Bold";
        
    font-size12px;
        
    font-weightnormal;
        
    padding-top1px;
        
    padding-right3px;
        
    padding-bottom1px;
        
    padding-left3px;
    }

    /* search form */
    .searchform {
        
    background-colortransparent;
        
    bordernone;    
        
    margin0 5px 0 10pxpadding5px 0 15px 0;    
        
    width190px;    
    }
    .
    searchform p margin0padding0; }
    .
    searchform input.textbox 
        
    width100px;
        
    color#777; 
        
    height18px;
        
    padding2px;    
        
    border1px solid #E5E5E5;
        
    vertical-aligntop;
    }
    .
    searchform input.button {
        
    width60px;
        
    height18px;
        
    vertical-aligntop;
        
    padding-top2px;
        
    padding-right5px;
        
    padding-bottom2px;
        
    padding-left5px;
    }

    /********************************************
       LAYOUT
    ********************************************/ 
    #wrap {
        
    positionrelative;
        
    width910px;    
        
    margin0 auto;
        
    text-alignleft;
        
    background#fff url(content.jpg) repeat-y center top;
    }
    #content-wrap {
        
    floatleft;
        
    width850px;
        
    margin-left30px;
        
    displayinline;
        
    padding0;
        
    border-top5px solid #fff;
        
    background#fff url(content-wrap.jpg) repeat-x;
        
    color#724F2C;
        
    font-size12px;
        
    font-family"Gill Sans MT""Gill Sans MT Condensed""Gill Sans MT Ext Condensed Bold""Gill Sans Ultra Bold";
    }
    #header {
        
    positionrelative;
        
    background#fff url(header-bg.jpg) repeat-y center top;
        
    height35px;
        
    width:910px;    
        
    padding0;    
        
    color#fff;    
    }

    /* header links */
    #header #header-links {
        
    positionabsolute;
        
    top44px;
        
    right36px;
        
    color#838181;
        
    font-size10px;
        
    font-weightbold;
    }
    #header #header-links p {    
        
    padding0;    margin0;    
    }
    #header #header-links a {    
        
    color#838181;
        
    text-decorationnone;    
    }
    #header #header-links a:hover {
        
    color#444;        
    }

    /* header-photo */
    #header-photo {
        
    positionrelative;
        
    clearboth;
        
    margin5px auto;
        
    height250px;
        
    width850px;
        
    background#fff url(header-photo.jpg) no-repeat center center;
    }
    #header-photo h1#logo-text a {
        
    positionabsolute;
        
    margin0;
        
    padding0;
        
    fontbold 48px 'Trebuchet MS'ArialSans-serif;
        
    letter-spacing: -1px;
        
    color#fff;
        
    text-transformnone;
        
    text-decorationnone;
        
    bordernone;
        
    /* change the values of top and left to adjust the position of the logo*/
        
    top: -19px;
        
    left262px;
        
    width289px;
        
    height87px;
    }

    #header-photo h2#slogan {
        
    positionabsolute;
        
    margin0;
        
    padding0;
        
    fontbold 14px 'Trebuchet MS'ArialSans-serif;
        
    text-transformnone;
        
    color#B6D1F8;
        /* change the values of top and left to adjust the position of the slogan*/
        
    top: -124px;
        
    left232px;
        
    background-color#FFFFFF;
        
    border-top-color#FFF;
        
    border-right-color#FFF;
        
    border-bottom-color#FFF;
        
    border-left-color#FFF;
    }

    /* Navigation */
    #nav {
        
    clearboth;    
        
    padding0;            
    }
    #nav ul {
        
    floatleft;
        list-
    stylenone;
        
    background#E4E4E4 url(nav.jpg) repeat-x;
        
    width850px;
        
    padding0;
        
    height45px;
        
    displayinline;
        
    text-transformuppercase;
        
    margin-top0;
        
    margin-right0;
        
    margin-bottom0;
        
    margin-left30px;
        
    overflowhidden;
    }
    #nav ul li {
        
    displayinline;
        
    margin0padding0;
    }
    #nav ul li a {
        
    displayblock;
        
    floatleft;
        
    widthauto;
        
    margin0;
        
    padding0 15px;
        
    border-right1px solid #dadada;
        
    border-left1px solid #fafafa;
        
    border-bottomnone;
        
    color#555;
        
    text-transformcapitalize;
        
    text-decorationnone;
        
    letter-spacing1px;
        
    font-family"Century Gothic""Trebuchet MS"HelveticaArialGenevasans-serif;
        
    font-size14px;
        
    line-height45px;
        
    font-weightbold;
    }
    #nav ul li a:hover, 
    #nav ul li a:active {
        
    color#326ea1;
        
    font-family"Century Gothic""Trebuchet MS"HelveticaArialGenevasans-serif;
        
    font-size9px;
    }
    #nav ul li#current a {
        
    background#DBDBDB url(nav-current.jpg) repeat-x;
        
    font-size11px;
        
    font-family"Gill Sans MT""Gill Sans MT Condensed""Gill Sans MT Ext Condensed Bold""Gill Sans Ultra Bold";
        
    font-weightnormal;
        
    color#724F2C;
        
    displaytable-cell;
    }

    /* Main Column */
    .three-col #main {
        
    margin-top10px;
        
    margin-right70px;
        
    margin-bottom0;
        
    margin-left200px;
    }
    .
    two-col #main {
        
    margin10px 5px 0 200px;
    }

    #main h1 {
        
    margin10px 10px 0 10px;
        
    fontnormal 1.8em Georgia"Times New Roman"Timesserif;
        
    color#444;
        
    padding15px 0 2px 0px;
        
    border-bottom1px solid #dadada;
        
    font-family"Gill Sans MT""Gill Sans MT Condensed""Gill Sans MT Ext Condensed Bold""Gill Sans Ultra Bold";
    }

    /* Sidebar */    
    #sidebar {
        
    floatleft;
        
    width195px;    
        
    margin-top10px;    
    }    
    /* right column */
    #rightcolumn {
        
    floatright;
        
    width190px;
        
    margin-top10px;
        
    font-family"Gill Sans MT""Gill Sans MT Condensed""Gill Sans MT Ext Condensed Bold""Gill Sans Ultra Bold";
    }
    #rightcolumn h1, #sidebar h1 {
        
    margin10px 5px 0 5px;
        
    padding5px 5px;
        
    fontbold 1.4em 'Trebuchet MS'TahomaSans-serif;
        
    color#724F2C;
        
    font-family"Gill Sans MT""Gill Sans MT Condensed""Gill Sans MT Ext Condensed Bold""Gill Sans Ultra Bold";
        
    font-weightnormal;
    }

    /* sidemenu */
    ul.sidemenu {
        
    text-alignleft;
        
    margin7px 8px 8px 10px;
        
    padding0;
        
    border-top1px solid #E5E5E5;
        
    text-decorationnone;
        
    font-family"Gill Sans MT""Gill Sans MT Condensed""Gill Sans MT Ext Condensed Bold""Gill Sans Ultra Bold";
    }
    ul.sidemenu li {
        list-
    stylenone;
        
    padding4px 0 4px 5px;
        
    margin0 2px;        
        
    border-bottom1px solid #E5E5E5;
    }
    html body ul.sidemenu li {
        
    height1%;
    }
    ul.sidemenu li a {
        
    text-decorationnone;    
        
    color#326ea1; 
        
    bordernone;        
    }
    ul.sidemenu li a:hover {    
        
    color#383d44;
        
    bordernone;
    }

    /* footer-wrap */
    #footer-wrap {
        
    clearboth;
        
    width910px;
        
    font-size95%;
        
    padding20px 0;
        
    text-alignleft;    
        
    backgroundurl(footer-bottom.jpgno-repeat center bottom;    
    }
    #footer-wrap a {
        
    text-decorationnone;
        
    color#666666;
        
    font-weightbold;
    }
    #footer-wrap a:hover {
        
    color#000;    
    }
    #footer-wrap p {
        
    padding10px 0;
        
    color#724F2C;
    }
    #footer-wrap h2 {
        
    color#666666;
        
    margin0;
        
    padding0 10px
    }

    /* footer */
    #footer {
        
    clearboth;
        
    color#666;    
        
    margin0 auto 10px auto
        
    width850px;
        
    padding5px 0;
        
    text-aligncenter;
        
    background#F8F7F7;
        
    border-top1px solid #F2F2F2;    
    }

    /* alignment classes */
    .float-left  floatleft; }
    .
    float-right floatright; }
    .
    align-left  text-alignleft; }
    .
    align-right text-alignright; }

    /* display and additional classes */
    .clear clearboth; }

    /* post */
    .post-by {
        
    font-size.95em;
        
    padding-top0;
        
    font-family"Gill Sans MT""Gill Sans MT Condensed""Gill Sans MT Ext Condensed Bold""Gill Sans Ultra Bold";
    }
    .
    post-footer {
        
    background#F5F5F5;
        
    padding5pxmargin20px 10px 0 10px;    
        
    font-size95%;    
        
    color#666666;    
    }
    .
    post-footer .date{
        
    margin0 10px 0 5px;    
    }
    .
    post-footer a.comments {
        
    margin0 10px 0 5px;    
    }
    .
    post-footer a.readmore {
        
    margin0 10px 0 5px;    
    }
    .
    TextHEading {
        
    font-family"Gill Sans MT""Gill Sans MT Condensed""Gill Sans MT Ext Condensed Bold""Gill Sans Ultra Bold";
    }
    #wrap #content-wrap #main p .TextHEading {
        
    font-size16px;
        
    color#724F2C;
    }
    #wrap #content-wrap p {
        
    color#724F2C;
        
    font-size16px;
    }
    #wrap #header-photo #slogan img {
        
    border-top-color#FFF;
        
    border-right-color#FFF;
        
    border-bottom-color#FFF;
        
    border-left-color#FFF;
    }
    .
    Contact {
        
    font-size24px;
    }
    #wrap #content-wrap p2 {
        
    font-size10px;
    }
    #wrap #content-wrap p3 {
        
    font-size10px;
    }
    #wrap #content-wrap p {
        
    font-size12px;
    }
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Looks the same to me. I checked on Windows with Firefox, Safari, and IE8 and everything looks the same.
     
  3. RAHQ thread starter macrumors newbie

    Joined:
    Feb 26, 2010
    #3
    It seems ok if I use safari for windows but still looks bad if a mac views the page with safari. Any ideas?
     
  4. TheCoupe macrumors member

    Joined:
    Mar 4, 2009
    Location:
    Northern Ireland
    #4
    Fonts

    Hi, I could be wrong on this, but are you simply stating the use of Gill Sans or are you loading it into your website?

    Gill Sans is not a standard Web Font, and has a few different variations, such as Gill Sans, and Gill Sans MT. These will differ between windows and mac, though you can get the MT version on mac.

    I like Gill Sans myself, so in order to use this properly, you will need to make sure you call for the correct versions of the font on both systems. Gill Sans MT is not the default on mac, and you may be limited when it comes to Extended Condensed etc, therefore it will default back to Times etc as your page can't find the font specified.

    If you are simply calling the font, which obviously isn't working... search for a Gill Sans web font and load it into your design and use Verdana etc as its fallback, ie, some older versions of IE don't seem to support loading of custom fonts, so always nice to suggest a fallback rather than leaving it up to the system to pick.

    I hope this makes sense lol... haven't totally woken up yet haha
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    Just compared the site with Mac Safari and Firefox and I don't see any differences. Maybe it's your Safari that has problems. I'll attach what I see with Firefox on left and Safari on right.
     

    Attached Files:

Share This Page