CSS problem, please help...
juliez Jan 21, 2008 4:18 AMHi
I have an irritating problem where my H1 font is displaying as Times new roman rather than Arial. Can anyone who is better at CSS than I am figure out why. You can view the page here... annoying css problem. The h1 code is as follows:
#mainright h1 {
font:Arial, Helvetica, sans-serif;
font-size:1.8em;
color:#FFFFFF;
padding: 40px 15px 0 15px;
font-weight:normal;
}
the full style sheet is:
/* CSS Document */
*{margin:0; padding:0}
p {padding-bottom:12px}
body{
margin:0px;
background-color:#E7E7E7;
}
#MainContainer{
margin:0px auto;
background-color:#660C1B;
width:746px;
}
#Container{
margin:0px auto;
background-image:url(images/white_bgcol.gif);
width:728px;
}
#SubContainer{
margin:0px auto;
width:692px;
padding-bottom:14px;
}
#Header{
width:692px;
margin-bottom:16px;
}
#Logo{
float:left;
}
#TopNavigation{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#413B3B;
text-decoration:none;
text-align:left;
margin-bottom:16px;
}
#TopNavigation ul, li{
display:inline;
list-style:none;
margin:0px;
padding:0px 12px 0px 0px;
}
#TopNavigation a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#413B3B;
text-decoration:none;
text-align:left;
}
#TopNavigation a:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#547e58;
text-decoration:none;
text-align:left;
border-bottom:3px solid #115E58;
}
.PicSpace{
margin-right:2px;
float:left;
}
#BodyContainer{
width:692px;
}
#RightBanners{
width:334px;
margin-left:9px;
float:right;
}
#RightBanners .Img{
margin-bottom:3px;
}
#TextBox{
background-image:url(images/textbox_bg.jpg);
background-repeat:no-repeat;
width:349px;
float:left;
font-family: Verdana, Arial, sans-serif;
font-size:11px;
color:#333333;
text-decoration:none;
text-align:left;
}
.TextMargin{
padding:40px 16px 0px 16px;
}
#TextBox a{
font-family: Verdana, Arial, sans-serif;
font-size:11px;
color:#333333;
text-decoration:none;
text-align:left;
}
#TextBox a:hover{
font-family: Verdana, Arial, sans-serif;
font-size:11px;
color:#333333;
text-decoration:underline;
text-align:left;
}
#TextBox .Heading{
font-family: Arial, Helvetica, sans-serif;
font-size:22px;
font-weight:bold;
color:#ffffff;
text-align:left;
}
#TextBox .SubHeading{
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#ffffff;
text-align:left;
}
#TextBox ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#TextBox li
{
display: block;
padding: 3px 3px 3px 0;
margin-left:15px;
text-decoration: none;
font-weight: normal;
list-style-type: disc;
}
#Footer{
margin:10px auto 0px auto;
width:728px;
font-family: Arial, Helvetica, sans-serif;
font-size:9px;
color:#ffffff;
text-align:left;
}
#Footer .Copyrights{
float:left;
margin:-4px 3px 18px 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:21px;
font-weight:bold;
color:#ffffff;
text-align:left;
}
#Footer a{
font-family: Arial, Helvetica, sans-serif;
font-size:9px;
color:#ffffff;
text-align:left;
text-decoration:none;
}
#Footer a:hover{
font-family: Arial, Helvetica, sans-serif;
font-size:9px;
color:#ffffff;
text-align:left;
text-decoration:underline;
}
#RightBox1{
background-color:#413B3B;
width:334px;
height:180px;
margin-bottom:10px;
}
#RightBox1 a{
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#72C9EA;
text-decoration:none;
}
#RightBox1 a:hover{
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#72C9EA;
text-decoration:underline;
}
.RightBoxText{
padding:10px;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#ffffff;
text-align:left;
text-decoration:none;
}
.HeadingPink{
font-family: Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
color:#F000C0;
text-align:left;
text-decoration:none;
}
.HeadingWhite{
font-family: Arial, Helvetica, sans-serif;
font-size:21px;
font-weight:bold;
color:#ffffff;
text-align:left;
text-decoration:none;
}
.HeadingBlack{
font-family: Arial, Helvetica, sans-serif;
font-size:24px;
font-weight:bold;
color:#000000;
text-align:left;
text-decoration:none;
}
.HeadingBlue{
font-family: Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
color:#72C9EA;
text-align:left;
text-decoration:none;
}
#RightBox2{
background-color:#115E58;
width:334px;
height:160px;
margin-bottom:10px;
}
#RightBox2 a:link{
color: #FFCC66;
text-decoration:none;
}
#RightBox2 a:hover{
color: #fff;
text-decoration:none;
}
#RightBox2 a:visited{
color: #FF0000;
text-decoration:none;
}
#RightBox2 .Bult{
background-image:url(images/rbox2_bult.gif);
background-repeat:no-repeat;
padding-left:25px;
padding-bottom:1px;
}
#RightBox3{
background-color:#413B3B;
padding:10px;
}
#RightBox3Text{
background-color:#FFFFFF;
padding:10px;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#000000;
text-align:left;
text-decoration:none;
}
.Box3Image{
float:right;
margin:40px 0px 40px 10px;
}
#LpRightBox{
background-color:#413B3B;
padding:10px;
width:429px;
margin-left:6px;
float:right;
}
#LpRightBoxText{
background-color:#FFFFFF;
padding:10px;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
text-align:left;
text-decoration:none;
}
#LpRBoxHeading{
background-image:url(images/lptitle_arrow.gif);
background-repeat:no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size:25px;
color:#ffffff;
text-align:left;
text-decoration:none;
height:30px;
padding:0px 0px 5px 50px;
}
#LpLeftBox{
background-image:url(images/lp_lbox_bg.jpg);
background-repeat:no-repeat;
width:237px;
float:left;
}
#LpLeftText{
padding:10px;
font-family: Verdana, Arial, sans-serif;
font-size:11px;
color:#333333;
text-decoration:none;
text-align:left;
}
.LpLHeading{
font-family: Arial, Helvetica, sans-serif;
font-size:25px;
color:#ffffff;
text-decoration:none;
text-align:left;
}
.LpLSHeading{
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#68111E;
text-decoration:none;
text-align:left;
}
.ButtonsDiv{
width:174px;
float:left;
margin: 0 2px 0 0;
}
.BlackButtons{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
text-align:left;
display:block;
width:154px;
height:25px;
padding:12px 10px 0px 10px;
background-color:#413B3B;
}
.BlackButtons:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
text-align:left;
display:block;
width:154px;
height:25px;
padding:12px 10px 0px 10px;
background-color:#6F6F6F;
}
#LpRightBoxText ul
{
margin: 0 0 10px 0;
padding: 0;
list-style-type: none;
}
#LpRightBoxText li
{
display: block;
padding: 3px 3px 3px 0;
margin-left:15px;
text-decoration: none;
font-weight: normal;
list-style-type: disc;
}
a:link img{
border:none;
}
#mainleft {
float:left;
width:342px;
height:209px
}
#mainright {
float:left;
width:350px;
height:209px;
background:url(images/lp_pic02.jpg) no-repeat;
}
#mainright h1 {
font:Arial, Helvetica, sans-serif;
font-size:1.8em;
color:#FFFFFF;
padding: 40px 15px 0 15px;
font-weight:normal;
}
.author {
font:Verdana, Arial, Helvetica, sans-serif;
font-size:.8em;
color:white;
margin:0;
padding-left:15px;}
Any help appreciated.
Julie
I have an irritating problem where my H1 font is displaying as Times new roman rather than Arial. Can anyone who is better at CSS than I am figure out why. You can view the page here... annoying css problem. The h1 code is as follows:
#mainright h1 {
font:Arial, Helvetica, sans-serif;
font-size:1.8em;
color:#FFFFFF;
padding: 40px 15px 0 15px;
font-weight:normal;
}
the full style sheet is:
/* CSS Document */
*{margin:0; padding:0}
p {padding-bottom:12px}
body{
margin:0px;
background-color:#E7E7E7;
}
#MainContainer{
margin:0px auto;
background-color:#660C1B;
width:746px;
}
#Container{
margin:0px auto;
background-image:url(images/white_bgcol.gif);
width:728px;
}
#SubContainer{
margin:0px auto;
width:692px;
padding-bottom:14px;
}
#Header{
width:692px;
margin-bottom:16px;
}
#Logo{
float:left;
}
#TopNavigation{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#413B3B;
text-decoration:none;
text-align:left;
margin-bottom:16px;
}
#TopNavigation ul, li{
display:inline;
list-style:none;
margin:0px;
padding:0px 12px 0px 0px;
}
#TopNavigation a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#413B3B;
text-decoration:none;
text-align:left;
}
#TopNavigation a:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#547e58;
text-decoration:none;
text-align:left;
border-bottom:3px solid #115E58;
}
.PicSpace{
margin-right:2px;
float:left;
}
#BodyContainer{
width:692px;
}
#RightBanners{
width:334px;
margin-left:9px;
float:right;
}
#RightBanners .Img{
margin-bottom:3px;
}
#TextBox{
background-image:url(images/textbox_bg.jpg);
background-repeat:no-repeat;
width:349px;
float:left;
font-family: Verdana, Arial, sans-serif;
font-size:11px;
color:#333333;
text-decoration:none;
text-align:left;
}
.TextMargin{
padding:40px 16px 0px 16px;
}
#TextBox a{
font-family: Verdana, Arial, sans-serif;
font-size:11px;
color:#333333;
text-decoration:none;
text-align:left;
}
#TextBox a:hover{
font-family: Verdana, Arial, sans-serif;
font-size:11px;
color:#333333;
text-decoration:underline;
text-align:left;
}
#TextBox .Heading{
font-family: Arial, Helvetica, sans-serif;
font-size:22px;
font-weight:bold;
color:#ffffff;
text-align:left;
}
#TextBox .SubHeading{
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#ffffff;
text-align:left;
}
#TextBox ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#TextBox li
{
display: block;
padding: 3px 3px 3px 0;
margin-left:15px;
text-decoration: none;
font-weight: normal;
list-style-type: disc;
}
#Footer{
margin:10px auto 0px auto;
width:728px;
font-family: Arial, Helvetica, sans-serif;
font-size:9px;
color:#ffffff;
text-align:left;
}
#Footer .Copyrights{
float:left;
margin:-4px 3px 18px 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:21px;
font-weight:bold;
color:#ffffff;
text-align:left;
}
#Footer a{
font-family: Arial, Helvetica, sans-serif;
font-size:9px;
color:#ffffff;
text-align:left;
text-decoration:none;
}
#Footer a:hover{
font-family: Arial, Helvetica, sans-serif;
font-size:9px;
color:#ffffff;
text-align:left;
text-decoration:underline;
}
#RightBox1{
background-color:#413B3B;
width:334px;
height:180px;
margin-bottom:10px;
}
#RightBox1 a{
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#72C9EA;
text-decoration:none;
}
#RightBox1 a:hover{
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#72C9EA;
text-decoration:underline;
}
.RightBoxText{
padding:10px;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#ffffff;
text-align:left;
text-decoration:none;
}
.HeadingPink{
font-family: Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
color:#F000C0;
text-align:left;
text-decoration:none;
}
.HeadingWhite{
font-family: Arial, Helvetica, sans-serif;
font-size:21px;
font-weight:bold;
color:#ffffff;
text-align:left;
text-decoration:none;
}
.HeadingBlack{
font-family: Arial, Helvetica, sans-serif;
font-size:24px;
font-weight:bold;
color:#000000;
text-align:left;
text-decoration:none;
}
.HeadingBlue{
font-family: Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
color:#72C9EA;
text-align:left;
text-decoration:none;
}
#RightBox2{
background-color:#115E58;
width:334px;
height:160px;
margin-bottom:10px;
}
#RightBox2 a:link{
color: #FFCC66;
text-decoration:none;
}
#RightBox2 a:hover{
color: #fff;
text-decoration:none;
}
#RightBox2 a:visited{
color: #FF0000;
text-decoration:none;
}
#RightBox2 .Bult{
background-image:url(images/rbox2_bult.gif);
background-repeat:no-repeat;
padding-left:25px;
padding-bottom:1px;
}
#RightBox3{
background-color:#413B3B;
padding:10px;
}
#RightBox3Text{
background-color:#FFFFFF;
padding:10px;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#000000;
text-align:left;
text-decoration:none;
}
.Box3Image{
float:right;
margin:40px 0px 40px 10px;
}
#LpRightBox{
background-color:#413B3B;
padding:10px;
width:429px;
margin-left:6px;
float:right;
}
#LpRightBoxText{
background-color:#FFFFFF;
padding:10px;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
text-align:left;
text-decoration:none;
}
#LpRBoxHeading{
background-image:url(images/lptitle_arrow.gif);
background-repeat:no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size:25px;
color:#ffffff;
text-align:left;
text-decoration:none;
height:30px;
padding:0px 0px 5px 50px;
}
#LpLeftBox{
background-image:url(images/lp_lbox_bg.jpg);
background-repeat:no-repeat;
width:237px;
float:left;
}
#LpLeftText{
padding:10px;
font-family: Verdana, Arial, sans-serif;
font-size:11px;
color:#333333;
text-decoration:none;
text-align:left;
}
.LpLHeading{
font-family: Arial, Helvetica, sans-serif;
font-size:25px;
color:#ffffff;
text-decoration:none;
text-align:left;
}
.LpLSHeading{
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#68111E;
text-decoration:none;
text-align:left;
}
.ButtonsDiv{
width:174px;
float:left;
margin: 0 2px 0 0;
}
.BlackButtons{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
text-align:left;
display:block;
width:154px;
height:25px;
padding:12px 10px 0px 10px;
background-color:#413B3B;
}
.BlackButtons:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
text-align:left;
display:block;
width:154px;
height:25px;
padding:12px 10px 0px 10px;
background-color:#6F6F6F;
}
#LpRightBoxText ul
{
margin: 0 0 10px 0;
padding: 0;
list-style-type: none;
}
#LpRightBoxText li
{
display: block;
padding: 3px 3px 3px 0;
margin-left:15px;
text-decoration: none;
font-weight: normal;
list-style-type: disc;
}
a:link img{
border:none;
}
#mainleft {
float:left;
width:342px;
height:209px
}
#mainright {
float:left;
width:350px;
height:209px;
background:url(images/lp_pic02.jpg) no-repeat;
}
#mainright h1 {
font:Arial, Helvetica, sans-serif;
font-size:1.8em;
color:#FFFFFF;
padding: 40px 15px 0 15px;
font-weight:normal;
}
.author {
font:Verdana, Arial, Helvetica, sans-serif;
font-size:.8em;
color:white;
margin:0;
padding-left:15px;}
Any help appreciated.
Julie