messy code

[loki]

can i get some help with this please?

my html is here:
http://www.craigmclaughlan.com/ws/paul3.html

my css is here
http://www.craigmclaughlan.com/ws/ws_general.css

1. i don't understand why my a:links aren't displaying correctly (should be same size as p)

2. i suspect my p,n,td,li css coding is wrong.

3. i suspect my css coding is a mess, what needs cleaning up?

4. my test page
http://www.craigmclaughlan.com/ws/paul3.html
validates. yet when i ask to validate my css page i get a message that says my html document doesn't validate.

Target: http://www.craigmclaughlan.com/ws/paul3.html

Please, validate your XML document first!

Line 35

Column 34

Element type "null" must be followed by either attribute specifications, ">" or "/>".

thanks

[Connie]

I don't know a lot about css but it looks to me linke you have 2 different sizes listed.

p,n,td,li {
font: .6em Arial, Helvetica, sans-serif;
text-align: left;
}

a:link {
font: bold 0.65em Arial, Helvetica, sans-serif;
color: #CC0000;
}

on is 6em the other is 65em.

[Connie]

If you just check your syle sheet it validates.

http://jigsaw.w3.org/css-validator

[sfrasier66]

Hello!

In your CSS file, the links are different sizes than your regular P text, but they are set larger, so that shouldn't be the reason.

To locate the problem in your CSS file, i would edit it without andy using shorthand. This will tell you exactly where your problem is.

Just because a CSS file validates does not mean it will do what you are intending, of course -- it just means you coded it according to the rules.

hope this helps!
sfrasier66

[loki]

Originally posted by Connie
I don't know a lot about css but it looks to me linke you have 2 different sizes listed.



with respect i don't see it that way, the first bit of code is for p,n,td,li and the second is for standard links (a).

[Connie]

not a problem, but 1. i don't understand why my a:links aren't displaying correctly (should be same size as p)
It seems to me you are saying you want the links to be the same size a the p.

In rereading I phrased the difference poorly, but you have the p set for 6em and the link set for 65em. They are going to be a different size.

Maybe I'm just not understanding what you mean by No. 1.

[WebSavvy]

loki, many times when there's a CSS declaration for all standard hyperlinks [a] it will override what's been set in other declarations with regard to what you've assigned them.

To get around that, on declarations where you want your set font and colors to override the standard, you can set this in the declaration: !important (example below)

a:link {
font: bold 0.65em arial, helvetica, sans-serif;
color: #cc0000 !important;
}

Please check your font sizes and note that .6em and 0.65em are not the same size.

Also, if using this with XML all fonts and colors should be lowercase.

In the fonts, XML (when validating the CSS) will give off errors if a standard font is not set in the defaults. sans-serif is not a default whereas serif is.

Just change to lowercase, set the sizes to be the same (e.g., 6em or 0.65em) and use !important when you want to override other declarations, use serif as the default set in the last font specification, and you should be fine.

Let me know if it helped any?

[loki]

not sure if this is coincidence or what you are referring to deb:

i have 2 types of a refs,
my standard [a] and another
[a.important:link]

currently my [a] is:

a:link {
font: bold 1.0em Arial, Helvetica, sans-serif;
color: #CC0000;
}

and my [a.important:link] is:
a.important:link {
font: bold 0.65em Arial, Helvetica, sans-serif;
color: #FFFFFF;

}

the a.important:link is displaying correctly but the a:link is too small, when from the above they should be the other way around, shouldn't they?

i suspect it has to do with this:

p,n,td,li {
font: .6em Arial, Helvetica, sans-serif;
text-align: left;
}

which might be overiding it.

[WebSavvy]

That could be, loki. I'd have to do a test file on my server to find out. Right now, I just don't have the free time to test it, but will later.

Maybe you can play with the file a little and figure it out that way? Sometimes the best thing you can do it play around with it, and it also helps you learn different things about it.

There's a CSS properties site that I posted here in the CSS forum (in it's own thread) maybe have a look there and see if there's something there that might help you out?

If you're not able to get it working correctly in a day or two, I'll do a test file and see if I can pinpoint the problem. :)

[polarmate]

You're onto something there, loki. The problem arises because of the unit em and how it scales based on the parent element. Bigbaer (http://www.bigbaer.com/css_tutorials/css_font_size.htm) explains it better than I ever could.

Also take a look at How to size text using ems (http://www.clagnut.com/blog/348/)

[srikanthsh]

You could ignore specifying font size and family in the link stylesheet. Those properties will be inherited from the parent element. Simply, use font-weight:bold for the bolded font.

[loki]

that 2nd link from polarmate explains stuff about parents that i need to read carefully. my guess is if i can follow that i should be ok.

matches what you're saying deb, (the children's behaviour) is all to do with the parent (reminds me of something else!).

ps you guys won't be aware of this; i got a PM from sfrasier66 who rebuilt the css file using pixels. he (or maybe a she, we just met) didn't want to post the URLS here as (s)he's trying to be a good new member.

while i am not so bad using pixels, i decided for accessibility issues to try ems. i've cannot afford to spend days on ems but i'll give it a crack.

anyways, thanks sfrasier66 and welcome.

[sfrasier66]

hi loki!

it was my pleasure to finally be of some assistance to someone here on this great forum. you are more than welcome!

i am indeed a male. :cool:

have a great evening loki and everyone else,

frasier