Converting an HTML trick to CSS

[WarKirby]

Hi everyone. We're trying to do a little CSS work on our website:

 

We have this code:

<p align="justify"><font color="#33ccff"><u><font size="3"><font color="#ff6600"><font size="4"><strong>How to sign up</strong></font></font></font></u></font></p>

 

The effect of it can be seen here: http://www.roshni.org.uk/Get%20Involved/Raise%20money

it gives us orange text, with a very thin blue underline.

 

We'd like to simplify this a bit by moving the code to CSS so there's less to remember when reusing this style. But how would we remake this effect in CSS ?

[michaellunsford]

Well, there's more than one way to skin a cat.

 

 

<span class="blueunderline">How to sign up</span>

/* CSS */
.blueunderline {
  border-bottom:1px solid #33ccff;
  color:#ff6600;
  font-weight:bold;
}

 

[WarKirby]

Thank you!

We'll give this a try soon and report back.

 

[fortnox007]

Well, there's more than one way to skin a cat.

no cat's were hurt while programming

[WarKirby]

Hello again folks. Sadly marking unsolved

 

We're having a problem with the provided solution, using text in tables. The blue underline continues all the way along the width of the element, even after the text ends. See the attached image for an example.

 

Any idea how to restrict the underline to the text only ?

 

[attachment deleted by admin]

[haku]

Wrap the text in a span, and apply the underline to the span.

[WarKirby]

Thank you Haku, this does indeed work. Looks like it's the solution we'll have to go for.

 

Unfortunately, doing so has created another problem for us. For acessibility reasons, we currently have a script on the site which allows users to change the text size on the page. Unfortunately, this works based on the <p> tag used to identify expandeable text.

 

We can modify the script to accomodate <span> too, although this is a little beyond my knowledge. If anyone knows a bit of vbscript and would like to help, please do have a look here:http://www.visualbasicscript.com/tm.aspx?high=&m=87224&mpage=1#87224

(even post a reply in this thread, I will still check it)

 

In any case, This problem is solved now, thank you for your assistance.

[michaellunsford]

Would putting the <span> tag inside a <p> tag fix it?

[Dragosvr92]

Try to use width and height or margin in your CSS Class

[haku]

If you don't want to use the span tags, you can float the p tags left. However, you will have to add clear:left to all of the elements that follow the p tags. Floating the element sets it's width to be only as wide as the data it contains.