This is the celebrated journal of Mr. Simon Collison A.K.A Colly

Peter’s Resizable Underlines!

14th November 2005

Previously I’d noted that Jonathan Snook had cracked the CSS Challenge.

Well, whilst he certainly made headway and surpassed everyone else’s approaches, has he now been outdone? Check out what Peter has come up with! The guy’s not only cracked it, but he’s offered up several working examples and a very detailed explanation. Go visit Peter’s Resizable Underlines for the full skinny.


# Klaus Roots responded on 14th November 2005 with...

Undeniably a cool and creative effect, but I really think Jonathon Snook’s submission beats it hands down. Why? Well quite simply I can still interact with the text content. Copy content, select links in the text etc all works as intended however Peter’s solution removes this expected functionality. Don’t break the expected interaction!

# Jonathan Snook responded on 14th November 2005 with...

Not to take anything away from Peter’s method but one other drawback not mentioned is that when resizing text, it’s only effective using em-based widths on the paragraph.

To make Peter’s solution even better and allow links in the paragraph to be clickable, you could move the image outside of the paragraph, set a z-index of 1, then set the paragraph to position relative and a z-index greater than 1.

Good job Peter!

# Simon Collison responded on 14th November 2005 with...

Keep the feedback coming. I literally noticed Peter’s methods and posted it straight away. I haven’t had time to investigate further yet.

You are both right - we still need to be able to interact with the text. Any thoughts, Peter?

# Peter responded on 14th November 2005 with...

I was thinking really that why would you want underlines in this way anyway, and I thought display text rather than everyday text was more likely.

So yes, Snook’s way is better wrt interactive text but there is sort of a way round this, because you can have several background images and position them with gaps so you can access the text, but it’s a bodge job. Point taken.

Jonathan, I will check out your suggestion later today. Cheers!

# Peter responded on 14th November 2005 with...

Sorry, I meant foreground image in my last comment.

And there is an example of fixed width here and here that I put there as food for thought, but admittedly it is rough and needs work.

# Peter responded on 14th November 2005 with...



# Peter responded on 15th November 2005 with...

Fixed width excess lines problem solved!

Wow, the simple solutions are working great today! I just added a paragraph with background below the one with the lines and hey presto! it hides those excess lines. It might be fiddly to make it work at max and min font size settings but I think you will see the potential and be able to adjust it to suit your needs! Please tell if you can break it!

# Dustin responded on 17th November 2005 with...

The whole <img /> is still kind of weird…
clever, but still weird.

Responses are now disabled Your ability to respond is disabled automatically some 30 days after articles are published, or manually much sooner if spamming guttersnipes target a particular article.

Prev 531 Next

Superfluous Aside

Archived in HTML & CSS, Design & Web

There are 8 responses

External References

Copyright © Mr. Simon Collison 2003-2017. Protected and licensed under a Creative Commons License. Grab the RSS feed

Engineered in Nottingham, scaffolded by ExpressionEngine, steam-pumped by United & kept alive with tea and hugs.