[derbs]

Alright guys, there seems to be a lot of CSS threads on the go at the moment!

Basically if you look at this page:

http://80.234.160.78/tests/css/layertest.htm

I want to be able to position the text a certain number of pixels down (eg 50px) from the top of the grey layer. Please tell me this is possible! Is there some sort of margin or vertical/horizontal text alignment setting?

Padding won't do though i'm afraid, it will knock other things out.

Thanks for any help!

[philzilla]

tried margin-top: 50; in there?

[Scarpa]

Go download CCSEdit and start playing with it. It's a great program and will teach you a lot about the capabilities of CSS.

Why can't you put top padding only? You could nest a div inside of the grey box with a top margin also I guess.

[derbs]

Originally posted by philzilla:
tried margin-top: 50; in there?

doesn't work man it just seems to strip 50 px off the top of the layer!?

I'm downloading CSSedit now to check it out

[york28]

Add
padding-top: 50px;
to the definition for layerstyle. I just did, and it works.

[Simon Mundy]

Originally posted by derbs:
doesn't work man it just seems to strip 50 px off the top of the layer!?

I'm downloading CSSedit now to check it out

Set the margins of 'div.layerstyle p' to 50px 0 0 0 and see if that works

[Ver de Terre]

You may want to add a doctype declaration, as some browsers will behave erratically without one, especially when it comes to CSS positioning.

[Simon Mundy]

Originally posted by Ver de Terre:
You may want to add a doctype declaration, as some browsers will behave erratically without one, especially when it comes to CSS positioning.

Indeed, excellent point. If there is no doctype (or even an invalid doctype) then most (all?) browsers will render in 'quirks' mode - usually this means that CSS-strict policies are ignored or not enforced correctly.

An XHTML doctype is a good starting point, as all modern browsers respond to this with strict CSS enforcement.

This affects what you were trying to do with adding 'padding' to the layer whilst keeping the 'height' attribute - CSS Strict browsers will ADD the vertical padding to the layer (in accordance with the CSS 2.0 spec) whilst older browsers like IE5.5 for PC will include the padding within the height you have specified!

The simplest way to avoid this is to structure your CSS so as not to explicitly declare widths/heights when you are also declaring padding/margins/borders that will affect those values. This is not always possible, so there are many XHTML and CSS 'hacks' to workaround these without touching the structure of your HTML document. I won't bother going into the details here - a google search of 'css box model hack' will give you more topics than you will ever care to read!