CSS specification not displayed

[OfficeAnimal]

I am using HTML 4.01 Strict and CSS 2.1.

My current project is at

http://rickduley.webs.com/loremIpsum.html

The code is available at

http://rickduley.webs.com/100209-HTML-CSS.zip.kgb

(Remove the 'dot kay gee bee' suffix and unzip.)

I hope someone can help with one or all of the following issues:

1. #canvas (pix-standard.css)
background-image is not displayed

2. #navBar (pushButton.css)
a) no border displayed around bar
b) button border is not 'ridge'
c) despite padding adjustment there is more space below button title text than above it.

Thanks

 

[Vragabond]

Luckily, your issues are easy to fix:

1. remove the leading dot from the url. This throws the parser off and it cannot find the image. I would also remove the quotes, because they're not needed and do not help:

      background-image: url([s][!]'.[/!][/s]/img/perthLifeBackground.gif[s][!]'[/!][/s]);

2.
a) In your CSS you're applying the style to an element with an [!]id[/!] of navBar, however in your HTML you have an element with a [!]class[/!] navBar. Therefore your CSS is never applied to this element. This may be irrelevant for the issue at hand, but you are mixing shorthand and normal properties. I suggest you use just border: 1px solid #000 instead of using one shorthand and two separate ones.

b) Ridge requires more than 1px to show. Your border is one pixel and since there's no way to color 1px in more than one color, your border can only appear solid. If you increase the border width, you will see the ridges appear.

c) Text in block level elements appears at the top of the element by default. You're trying to fix that with padding, but there's no way of knowing how much padding you need to apply in addition to the line height etc. Therefore, I suggest you remove all vertical padding from those element and introduce line-height property, which should be the same as the height of the element. Actually, you won't even need the height anymore, you can use just line-height. This will make the element the desired height and put the text in the center of that height.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[OfficeAnimal]

Thanks Vragabond. That was a great help but ...

you wrote:
"This may be irrelevant for the issue at hand, but you are mixing shorthand and normal properties. I suggest you use just border: 1px solid #000 instead of using one shorthand and two separate ones."

I thought that I had isolated and individually specified the properties. Apparently not.

Could you please explain this matter in a little more detail?
Thanks