My website is not showing the top margin and margins between divs correctly. I have tested the site via litmus in all browsers and specifically in Safari 4.0, all Firefox browsers and Chrome the top of the company logo is cropped off. However, in my Safari Browser the site operates perfectly. I don't understand where I went wrong?

Also...the font type does not execute as intended. I wanted the home page font style on the navigation bar to always appear in Apple Chancery or cursive style. In my browser it reads as I want it to however, in the litmus tests it looks more like comic sans.

Lastly...how do I get the browsers to read dotted lines?!

Thank you for your help and support.

-aren

5 answers

0
points

It would be very helpful to see the site, or a testcase of your code. The font you specify will only display if it is installed on the computer viewing the site. (unless you use font embedding, and pay to licence the font for downloading)

Dotted lines? what do you mean?

show us your code please.

Answered over 6 years ago by Tony Crockford
0
points

I added a link to the last post -- http://tfc.litmusapp.com/tests/643506/versions/1/results/ie6

Here is a code sample of the css

html, body{ 
 margin:0; 
 padding:0; 
 text-align:center; 
 background: #FFFFFF;
}

#pagewidth{
 margin-top:0px;
 width:1050px;  
 margin-left:auto; 
 margin-right:auto;
 overflow:hidden;
} 

#header{
 width:1024px;
 margin-top:10px;
 margin-left:10px;
 margin-right:0px;
 position:relative;
 height:220px; 
 background-color:white; 

} 

/* EXTERNAL -- OUTSIDE OF NAVIGATION LINKS */
a.external:link {text-decoration:none; color:black; font-size:11pt; font-weight: bold;}
a.external:visited {text-decoration:none; color:#3818AB; font-weight: bold;}
a.external:hover {text-decoration:none; color:#8badb8;}
a.external:active {text-decoration:none; color:#8badb8;}

a.externalb:link {text-decoration:none; color:black; font-size:11pt; font-weight: bold;}
a.externalb:visited {text-decoration:none; color:#3818AB; font-weight: bold;}
a.externalb:hover {text-decoration:none; color:#3818AB;}
a.externalb:active {text-decoration:none; color:#3818AB;}

a.tfcteam:link {text-decoration:none; color:black; font-size:13px;}
a.tfcteam:visited {text-decoration:none; color:#8badb8;}
a.tfcteam:hover {text-decoration:none; color:#8badb8;}
a.tfcteam:active {text-decoration:none; color:#8badb8;}

a.more:link {text-decoration:none; color:#1841AB; font-size:11pt; font-weight: bold;}
a.more:visited {text-decoration:none; color:#3818AB; font-weight: bold;}
a.more:hover {text-decoration:none; color:black;}
a.more:active {text-decoration:none; color:#1841AB;}

a.posttitle:link {text-decoration:none; color:#1841AB; font-size:14pt; font-weight: bold;}
a.posttile:visited {text-decoration:none; color:#3818AB; font-weight: bold;}
a.posttitle:hover {text-decoration:none; color:black;}
a.posttitle:active {text-decoration:none; color:#1841AB;}


span.news{font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
          font-size:11px;
}

p {font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
   color: black;
   font-size: 14px;
   line-height: 22px;
   padding-top:5px;
}

h2.title {color: #282828;
    font-size: 17px;
    padding-top:5px;
    padding-left:45px;
    text-align:left;
    font-family: Helvetica Neue, Arial, Helvetica, sans-serif;

}

h3 {color:black;
    font-size: 16px;
    text-align:left;
    font-weight:bold;
}

h4 {color:#666666;
    font-size: 14px;
    text-align:left;
}

p.team {font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
   color: black;
   font-size: 12px;
   padding-top:15px;
   text-align: left;
   padding-right:100px;
   padding-left:50px;
}

p.body {font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
   color: black;
   font-size: 14px;
   padding-top:0px;
   line-height:23px;
   text-align: left;
   padding-right:100px;
   padding-left:50px;
} 

p.index {font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
   color: black;
   font-size: 12px;
   line-height:23px;
   text-align: left;
   padding-right:100px;
   padding-left:50px;
} 

p.operation {font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
   color: #383A3B;
   font-size: 13px;
   line-height:18px;
   text-align: left;
   padding-right:20px;
   padding-left:30px;

} 

p.title {padding-left:30px;}

p.news {font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
   color: black;
   font-size: 12px;
   padding-top:10px;
   text-align: left;
}

.image{
    border-style:outset;
    border-color: #FFFFFF;
    border-width:2px;

 }

 img.floatLeft { 
    float: left;
    clear:left;
    margin-left: 50px;
    margin-right:30px;
    margin-top:20px;
}

img.position { 
    float: left;
    clear:left;
    margin-left: 50px;
    margin-right:30px;
    margin-top:70px;
    padding-bottom:20px;
}

/* LOGO and Slogan Styles */


#logo-wrap{
    float:left;
    margin-left:0px;
    margin-top:0px;
    padding-top:40px;
    padding-bottom:10px;
    width:1024px;
    height:200px;
    background:white;
    border-top: 1px solid #EAEAEA;


    /*background-image: url(images/tfc_photo1.png);*/
}

#logo {
background-repeat: repeat-y;
margin-left:0px;
padding-left: 0px;
padding-right:50px;
padding-top: 0px;
padding-bottom:0px;
}

/*#logo{
    float:left;
    margin-top:-70px;
    margin-bottom:30px;
    margin-left:-68px;
    padding-right:50px;
    padding-left:90px;
    padding-top:20px;
    width:50px;
    background:white;
    z-index:10px;
}*/

#slogan{
    float:left;
    width:600px;
    margin-top:-248px;
    padding-bottom:0px;
    padding-top:7px;
    margin-left:-120px;
    color:#B5B1B2;
    font-style:bold;
    font-family:Cursive,Helvetica Neue, Helvetica, sans-serif;
    font-size: 16px;
    background-color:white;
    z-index:15;

}

#operation{
    float:left;
    width:350px;
    height:227px;
    margin-top:-210px;
    padding-bottom:20px;
    padding-top:5px;
    margin-left:0px;
    color:#B5B1B2;
    font-family:Helvetica Neue, Helvetica, sans-serif;
    font-size: 16px;
    background: #FAFBFC;
    z-index:15;

}

/* TOP NAVIGATION STYLING */


#nav{
    float:right;
    padding-right:0px;
    padding-left:0px;
    background:white;
    width:950px;
    height:40px;
    list-style:none;
    padding-top:20px;
    padding-bottom:20px;
}

/*#nav{
    float:left;
    padding-right:0px;
    padding-left:140px;
    background:white;
    width:1024px;
    height:40px;
    list-style:none;
    padding-top:20px;
    padding-bottom:20px;

}*/

ul#nav {
list-style-type:none;
margin:0px;
padding:0px;

}

ul#nav li {
float:left;


}

ul#nav li a {
width:160px;
height:40px;
display:block;
padding-top:20px;
background-color:white;
border-left: 1px solid #EAEAEA;
font-family: Helvetica Neue, Helvetica, sans-serif;
text-decoration:none;
text-align: center;
font-size: 13px;
color: black;
}

ul#nav li a:hover {
width:160px;
height:40px;
background: rgba(234,236,243,0.3);
background: rgb(234,236,243); /* The Fallback */
color: black;
}

ul#nav li a.home {
width:200px;
height:40px;
background-color:white;
border-left: 1px solid white;
padding-right: 20px;
padding-left: 20px;
padding-top:10px;
padding-bottom:20px;
font-weight: bold;
text-align: center;
font-family: Cursive, Helvetica Neue, Helvetica, sans-serif;
font-size: 24px;
color: black;
}


ul#nav li a.home:hover {
width:200px;
height:40px;
padding-right: 20px;
background: rgba(234,236,243,0.3);
background: rgb(234,236,243); /* The Fallback */
}

ul#nav li a.homelive {
width:200px;
height:40px;
background-color:white;
border-left: 1px solid white;
padding-right: 20px;
padding-left: 20px;
padding-top:10px;
padding-bottom:20px;
font-weight: bold;
text-align: center;
font-family: Cursive, Helvetica Neue, Helvetica, sans-serif;
font-size: 24px;
color: #0476B0;
}

ul#nav li a.live {
width:160px;
height:40px;
border-left: 1px solid #EAEAEA ;
padding-left:0px;
padding-top:20px;
background: white;
text-align: center;
font-family:Helvetica Neue, Helvetica, sans-serif;
font-size: 13px;
color:#0476B0;
}



/* Unordered List Styling */

ul.d {
list-style-type:square;
color:#0476B0; 
padding-right: 10px;
padding-left:140px;
line-height: 30px;
font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
font-size:14px;
}

ul.r {
list-style-type:square;
color:#0476B0; 
padding-right: 10px;
padding-left:70px;
line-height: 30px;
font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
font-size:14px;
}

ul.b {
list-style-type:none;
color:#0476B0;
padding-left:10px;
padding-right: 0px;
line-height: 20px;
font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
}

ul li span {color:black;
}

ul.c{
list-style-type:none;
padding-right: 10px;
line-height: 30px;
font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
font-size:14px;

}

ul li a.current { 
color: black; 
text-decoration:none;
font-weight:bold;
font-size:14px;
padding-left:10px;
width:160px;
height:30px;
list-style-type:none;
display:block;
background: rgba(234,236,243,0.3);
background: rgb(234,236,243); /* The Fallback */
color:#2A2B2B;
}

ul li a.currentb { 
color: black; 
text-decoration:none;
font-size:12px;
padding-left:10px;
padding-right:1px;
width:160px;
height:20px;
list-style-type:none;
display:block;
background: rgba(169,207,219,0.3);
background: rgb(169,207,219); /* The Fallback */
color:#2A2B2B;
}

ul li a.currentc { 
color: black; 
text-decoration:none;
font-size:12px;
padding-left:10px;
padding-right:0px;
width:150px;
height:20px;
list-style-type:none;
display:block;
background: rgba(169,207,219,0.3);
background: rgb(169,207,219); /* The Fallback */
color:#2A2B2B;
}



/* CONTENT -- SECTION 1  */

#section1{
 width:1024px; 
 height:980px;
 background-color:white;
 margin-left:auto;
 margin-right:auto;
 margin-top:170px;
 margin-bottom:80px;
 padding-bottom: 50px;
 padding-top:20px;
 border-top: 1px solid #EAEAEA;
}

#leftcolheader{
width:170px;
height:30px;
float:left;
padding-top:5px;
padding-left:0px;
background:white;
color: #282828;
font-size: 17px;
padding-top:5px;
text-align:left;
font-family: Helvetica Neue, Arial, Helvetica, sans-serif;

}

#leftcol{background-color:white;
 width:380px;
 height:940px;
 float:left;
 padding-right:20px;
 padding-left:0px;
 padding-top:20px;
 border-right:1px dotted grey;
 margin-top:35px;
 margin-left:-170px;
 overflow:auto;
 text-align:left;

}
 #featcolheader{
 width:170px;
 height:30px;
 float:left;
 background:white;
 margin-left:0px;
 padding-left:0px;
 padding-top:5px;
 color: #282828;
 font-size: 17px;
 padding-top:5px;
 text-align:left;
 font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
 }

 #featcol{background-color:white;  
 width:320px;
 height:940px;
 float: left;  
 padding-left:20px;
 padding-right:12px;
 padding-top:20px;
 margin-top:35px;
 margin-left:-170px;
 border-right:1px dotted #666666;
 text-align:left;
 }

 #rightcolheader{
 width:170px;
 height:30px;
 float:left;
 background:white;
 padding-left:20px;
 padding-top:5px;
 color: #282828;
 font-size: 17px;
 padding-top:5px;
 text-align:left;
 font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
 }

 #rightcol{background-color:white;
 width:240px;
 height:940px;
 float:left;
 padding-left:10px;
 padding-top:0px;
 text-align: left;
 padding-right:20px;
 margin-top:0px;
}

/* ABOUT-LAYOUT*/

#colteam{background-color:white;
 width:700px;
 height:940px;
 float:left;
 padding-right:20px;
 padding-left:0px;
 padding-top:20px;
 border-left:1px dotted grey;
 margin-top:35px;
 margin-left:-170px;
 overflow:auto;
 text-align:left;
 }

#navcol{background-color:white;
 width:185px;
 height:940px;
 float:left;
 padding-right:25px;
 padding-left:18px;
 padding-top:0px;
 border-right:1px dotted grey;
 margin-top:0px;
 margin-left:-200px;
 text-align:left;

}
 #contactemailheader{
 width:500px;
 height:30px;
 float:left;
 background:white;
 padding-left:30px;
 padding-top:40px;
 color: #282828;
 font-size: 17px;
 padding-top:5px;
 text-align:left;
 font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
 }

 #ourteamcolheader{
 width:300px;
 height:30px;
 float:left;
 background:white;
 padding-left:85px;
 padding-top:5px;
 color: #282828;
 font-size: 17px;
 padding-top:5px;
 text-align:left;
 font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
 }

 #ourteamcol{background-color:white;
 width:700px;
 height:940px;
 float:left;
 padding-left:50px;
 padding-top:0px;
 text-align: left;
 padding-right:20px;
 margin-top:0px;
}

 #newscolheader{
 width:670px;
 height:40px;
 float:left;
 background:white;
 padding-left:50px;
 padding-top:5px;
 color: #282828;
 font-size: 17px;
 padding-top:5px;
 text-align:left;
 font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
 }

 #newscol{background-color:white;
 width:500px;
 height:940px;
 float:left;
 padding-left:50px;
 padding-top:0px;
 text-align: left;
 padding-right:20px;
 margin-top:0px;
}

 #archivecolheader{
 width:670px;
 height:40px;
 float:left;
 background:white;
 padding-left:0px;
 padding-top:5px;
 color: #282828;
 font-size: 17px;
 padding-top:5px;
 text-align:left;
 font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
 }

#contactcol{background-color:white;
 width:700px;
 height:940px;
 float:left;
 padding-left:0px;
 padding-top:40px;
 padding-bottom:30px;
 margin-bottom:20px;
 margin-left:0px;
 margin-top:40px;
 text-align: left;
 padding-right:0px;
 margin-top:0px;
}

#volunteercol{background-color:white;
 width:700px;
 height:940px;
 float:left;
 padding-left:30px;
 padding-top:20px;
 padding-bottom:30px;
 margin-bottom:20px;
 margin-left:0px;
 margin-top:40px;
 text-align: left;
 padding-right:0px;
 margin-top:0px;
}

#locationcol{background-color:white;
 width:830px;
 height:940px;
 float:left;
 padding-left:0px;
 padding-top:40px;
 padding-bottom:30px;
 margin-bottom:20px;
 margin-left:0px;
 margin-top:40px;
 text-align: left;
 padding-right:0px;
 margin-top:0px;
}


#locationmap{
 width:435px;
 height:980px;
 float:left;
 margin-top:-95px;
 padding-top:65px;
 padding-left:25px;
 padding-right:0px;
 margin-left:0px;
 background: rgb(250,250,250);
 text-align:left;
 font-size:12px;
}

#locationtext{
 width:205px;
 height:980px;
 float:left;
 margin-top:32px;
 padding-left:90px;
 border-left: 1px dotted grey;
 padding-top:50px;
 padding-right:90px;
 margin-left:450px;
 margin-top:-1045px;
 background: rgb(250,250,250);
 text-align:left;
 font-size:12px;
}

#member{
 width:786px;
 height:960px;
 float:left;
 margin-top:-55px;
 padding-top:0px;
 padding-left:40px;
 padding-right:10px;
 background: rgb(250,250,250);
 text-align:left;
 font-size:12px;
}


#member2{
 width:796px;
 height:960px;
 float:left;
 margin-top:-55px;
 padding-top:0px;
 margin-left:-50px;
 padding-left:40px;
 padding-right:0px;
 background: rgb(250,250,250);
 text-align:left;
 font-size:12px;
}



#aboutcolheader{
width:140px;
height:30px;
float:left;
padding-top:5px;
margin-left:5px;
padding-left:13px;
background:white;
color: #282828;
font-size: 17px;
padding-top:5px;
text-align:left;
font-family: Helvetica Neue, Arial, Helvetica, sans-serif;

}

#aboutcol{background-color:white;
 width:450px;
 height:940px;
 float:left;
 padding-right:50px;
 padding-left:0px;
 padding-top:20px;
 border-right:1px dotted grey;
 margin-top:35px;
 margin-left:-170px;
 overflow:auto;
 text-align:left;

}

/* PATIENT-LAYOUT*/
 #resourcescolheader{
 width:170px;
 height:30px;
 float:left;
 background:white;
 padding-left:50px;
 padding-top:5px;
 color: #282828;
 font-size: 17px;
 padding-top:5px;
 text-align:left;
 font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
 }

 #resourcescol{
 background: rgb(250,250,250);
 width:475px;
 height:670px;
 float:left;
 padding-left:20px;
 padding-top:0px;
 text-align: left;
 padding-right:20px;
 margin-top:-55px;
}


#servicescolheader{
width:170px;
height:30px;
float:left;
padding-top:5px;
padding-left:5px;
background:white;
color: #282828;
font-size: 20px;
padding-top:5px;
text-align:left;
font-family: Helvetica Neue, Arial, Helvetica, sans-serif;

}

#servicescol{background-color:white;
 width:450px;
 height:980px;
 float:left;
 padding-right:20px;
 padding-left:30px;
 padding-top:20px;
 border-right:1px dotted grey;
 margin-top:35px;
 margin-left:-170px;
 overflow:auto;
 text-align:left;

}

/* CONTENT -- SECTION 2 */

#section2{
 width:1024px;
 background-color:yellow;
 margin-left:auto;
 margin-right:auto;
 margin-top:0px;
 margin-bottom:0px;
 }

#col1{background-color:green;
 width:200px;
 height:350px;
 float:left;
 padding-right:20px;
 padding-left:30px;
 padding-top:15px;
}

 #col2{background-color:white;  
 width:200px;
 height:50px;
 float: left;  
 padding-left:20px;
 padding-right:20px;
 margin-top:0px;
}

 #col3{background-color:white;
 width:200px;
 height:50px;
 float:left;
 padding-left:20px;
 padding-right:20px;
 margin-top:0px;
}

 #col4{background-color:white;
 width:200px;
 height:50px;
 float:left;
 padding-left:20px;
 padding-right:30px;
 margin-top:0px;
}
*/

/* FOOTER CONTENT */

#footer{
 width:1024px;
 height:60px;
 font-size:11px;
 text-decoration:none;
 background-color:blue;
 margin:auto;
}


/* CLEAR FIX CLASS */

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */ 


/* CONTACT FORM */

.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}

/* ----------- stylized ----------- */
#stylized{
border:solid 2px #b7ddf2;
background: rgba(234,236,243,0.3);
background: rgb(234,236,243); /* The Fallback */;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}

#footersection{
 width:1024px;
 height:50px;
 float:left;
 background-color:transparent;
 margin-left:auto;
 margin-right:auto;
 padding-top:30px;
 margin-top:-30px;
 padding-bottom:100px;
 clear:both;
 }


/* BASIC STYLES */
        fieldset{margin:0;padding:0;border:0;}
        label{width:250px; display:block;}
        .txt_input{width:250px; display:block;}
        textarea{height:80px; width:250px;}
        input{display:block;}
        .req{color:#f00;font-size:90%;}
        #form_errors{color:#f00; display:none;}
        #form_thanks{color:#000; display:none;}


*                   
ol                  { list-style: inside decimal; }

#sectionabout           { width: 1000px; margin: 0px auto; border: 1px solid #999;
                      background: #eee url(about/images/nav-bg.png) repeat-y; overflow: auto; }

ul#subnav               { list-style: none; width: 140px; float: left; padding: 10px 0 10px 10px; }
ul#subnav li            { margin: 5px 0; }
ul#subnav li a          { padding: 8px 3px 8px 10px; display: block; text-decoration: none;
                      font: 18px Helvetica; letter-spacing: -1px; color: #222; outline: none;
                      background: #666 url(about/images/nav-bgoff.png) top right repeat-y; }
ul#subnav li a:hover,
ul#subnav li a:active   { border-left: 3px solid #999; }

ul#subnav li.current a { background: #eee; border: none; }

#content            { width: 700px; float: right; padding: 15px 0; }
*/

Thank you very much...I'm a bit confused.

Answered over 6 years ago by Karen Everett
  • That link is to a private part of litmus. Tony Crockford over 6 years ago
0
points

the page I chose for the test is from http://www.tracyfreeclinic.org/about.html

Answered over 6 years ago by Karen Everett
0
points

You have two elements with id="nav", sort that out first (only one ID per page is allowed) and then you might have more luck with older browsers.

Answered over 6 years ago by Tony Crockford
0
points

Okay thanks I will try this first.

Answered over 6 years ago by Karen Everett