The problem: You have a paragraph of text where you want the first line to be more to the left then the other lines. I tend to use it to indicate it all belongs together (ie. sections). In CSS this proved to be harder then expected.There's text-indent, but this does the exact opposite of what I wanted. Why didn't they simply make a text-exdent? :pAnyways, the solution comes from
this site (the google link is a google cache page so you can read the answers... hey it works). You use a negative text-indent and a margin to make the whole paragraph jump to the right.The next challenge is then to get this to work in IE. Obviously it had a problem with negative indents over a margin (acted like overflow: hidden, even when I explicitly told it not to). Argh. Eventually I came to the following code:
.blokurl { width: 130px !important; width: 177px; display: block; padding-left: 47px; text-indent: -47px;}It appeared that IE did accept the padding version. This however screwed up width settings in FF and Opera so I used the 'usual !important' hack to adjust the width in IE.And look at the result left in the menu (because that's what this was all about). If a title is longer then the line, the next line is indented properly as intended.I've tried to get the same effect by using tables, different block-level combinations, floats and a few minor other things, but to no avail. In my situation every link exists of an
tag (because IE only executes hover on elements) and you can't stack this element. A float doesn't care about the tag encapsulating it (even though it should accept it as it's parent). This resulted in quite some frustrations.Anyways, happy happy joy joy now because the longer titles appearing on new lines was really nagging me :p