Getting text to sit on a border.

[brownthing]

I'm working from a design which requires me to have some heading text which is sitting on (i.e. touching) the top border of the div below it.
I'm currently acheiving this using absolute positioning of the heading text, but this fals apart if you change the text size (and also breaks some of my layout - but that's another matter).

Is there a way to achieve this without using relative positioning?
I've tried a few types of vertical alignment but without any luck.

[benihana]

try using the margins e.g. margin-bottom:-3px;

also, relative positioning should be fine - it works differently to absolute. what problems where you ahving with it?

[brownthing]

Well the problem with the relative positioning (and with the negative margin) is that if you increase the text size in the browser then the heading no longer touches the border.
Also that negative margin caused one of my columns to dissapear in IE, possibly because it's floated.

[Sathallrin]

You should try setting the positioning using em's instead of px. This way the size will be adjusted by the browsers font size. You will need to play around with the number to find what works best.

Perhaps adjusting the line-height of your text might help you out a bit as well.

[benihana]

do you have a line height set?

post some relevent code...

[brownthing]

This is the css I had:

h1 {
font-weight: normal;
font-size: 2.65em;
color: #F8B000;
position: relative;
top: 5px;
}

I've tried:

h1 {
font-weight: normal;
font-size: 2.65em;
color: #F8B000;
line-height:1em;
margin-bottom: -0.2em;
}

Which worked quite well, except on one of the pages where I have a floated div with one of these headings, which disappears when a negative margin is applied.