9 Replies Latest reply on Jan 21, 2008 9:28 PM by Newsgroup_User

CSS problem, please help...

juliez Jan 21, 2008 4:18 AM

Hi

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

1. Re: CSS problem, please help...

Newsgroup_User Jan 21, 2008 4:29 AM (in response to juliez)

font-weight:normal;
}

padding-left:15px;}

There's an extra brace in there.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================

"ukjooles" <webforumsuser@macromedia.com> wrote in message
news:fn22j6$4e7$1@forums.macromedia.com...
> Hi
>
> 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... http://server29.dedicateduk.com/~bni/. 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;
> }
>
> padding-left:15px;}
>
>
...snip...
>
>

>
> Any help appreciated.
>
> Julie
>
Like Show 0 Likes(0)

Actions
2. Re: CSS problem, please help...

juliez Jan 21, 2008 5:04 AM (in response to Newsgroup_User)

Sorry Murray, that was an posting problem, and wasn't actually in the code. Any other ideas?

Julei
Like Show 0 Likes(0)

Actions
3. Re: CSS problem, please help...

Newsgroup_User Jan 21, 2008 6:23 AM (in response to juliez)

On Mon, 21 Jan 2008 12:18:46 +0000 (UTC), "ukjooles"
<webforumsuser@macromedia.com> wrote:

> #mainright h1 {
> font:Arial, Helvetica, sans-serif;
> font-size:1.8em;
> color:#FFFFFF;
> padding: 40px 15px 0 15px;
> font-weight:normal;
> }

Change the above to this:

#mainright h1 {
font: 1.8em Arial, Helvetica, sans-serif;
color:#FFFFFF;
padding: 40px 15px 0 15px;
}

Gary
Like Show 0 Likes(0)

Actions
4. Re: CSS problem, please help...

juliez Jan 21, 2008 7:33 AM (in response to juliez)

Thanks Gary, that fixed it, you have helped move my CSS skills on significantly here!

Cheers
Julie
Like Show 0 Likes(0)

Actions
5. Re: CSS problem, please help...

Newsgroup_User Jan 21, 2008 9:34 AM (in response to juliez)

On Mon, 21 Jan 2008 15:33:07 +0000 (UTC), "ukjooles"
<webforumsuser@macromedia.com> wrote:

>Thanks Gary, that fixed it, you have helped move my CSS skills on significantly here!

You're welcome, Julie. Do you understand why the fix worked?

Gary
Like Show 0 Likes(0)

Actions
6. Re: CSS problem, please help...

jcdesigns Jan 21, 2008 11:43 AM (in response to Newsgroup_User)

Even if she does, can you explain anyway Gary? All I see is short hand for the same thing. Is it because you have listed the size before the face now? Getting rid of the font-weight seems fine, since it would default to that anyway.
Like Show 0 Likes(0)

Actions
7. Re: CSS problem, please help...

Newsgroup_User Jan 21, 2008 11:58 AM (in response to Newsgroup_User)

It's because the minimum required values for the short-hand "font" stylename
are size and family. Use only one of those and the rule is ignored.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================

"jcdesigns" <webforumsuser@macromedia.com> wrote in message
news:fn2sls$2ps$1@forums.macromedia.com...
> Even if she does, can you explain anyway Gary? All I see is short hand for
> the
> same thing. Is it because you have listed the size before the face now?
> Getting
> rid of the font-weight seems fine, since it would default to that anyway.
>
Like Show 0 Likes(0)

Actions
8. CSS problem, please help...

jcdesigns Jan 21, 2008 12:27 PM (in response to Newsgroup_User)

ahhh...thank you sir. I pretty much use only long hand version (that is just the way I am), so I was not aware of that.
Like Show 0 Likes(0)

Actions
9. Re: CSS problem, please help...

Newsgroup_User Jan 21, 2008 9:28 PM (in response to Newsgroup_User)

On Mon, 21 Jan 2008 19:43:56 +0000 (UTC), "jcdesigns"
<webforumsuser@macromedia.com> wrote:

>Even if she does, can you explain anyway Gary? All I see is short hand for the
>same thing. Is it because you have listed the size before the face now? Getting
>rid of the font-weight seems fine, since it would default to that anyway.

What Murray said. Or, to explain in a bit more depth:

#mainright h1 {
font:Arial, Helvetica, sans-serif;
font-size:1.8em;
color:#FFFFFF;
padding: 40px 15px 0 15px;
font-weight:normal;
}

The above rule does not provide a valid value for the shorthand font
property. Thus causing the rule to be ignored. One way to fix it would
be:

#mainright h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:1.8em;
color:#FFFFFF;
padding: 40px 15px 0 15px;
font-weight:normal;
}

I used the following:

#mainright h1 {
font: 1.8em Arial, Helvetica, sans-serif;
color:#FFFFFF;
padding: 40px 15px 0 15px;
}

This fix combines the font-size and font-family into a valid shorthand
font rule. Doing that also overrides a normal browser default (in most
cases) of using boldface type for the heading. Because I did that, I
could eliminate the font-weight rule.

Gary
Like Show 0 Likes(0)

Actions