Category Archives: CSS

Using CSS to underline text in a textbox

Posted on by
Reply

As used in SharePoint 2007 – putting a red wavy line below text in a text box. Neat.

Just in case I ever need this (and the page goes missing):

<style>
.squiggle
{
background-image:url("squiggle.gif");
background-repeat:repeat-x;
background-position:left bottom;
padding-bottom:2px;
vertical-align:text-top;
font-style:italic;
}
.container
{
border:1px solid #a5a5a5;
overflow-x: hidden;
width: 100%;
color: windowtext;
height: 18px;
background-color: window
}
</style>
<div class="container" contenteditable="true" tabindex="0">
<span class="squiggle" contenteditable="false" tabindex="-1">
<div style="DISPLAY: none" displaytext="here"></div>
<span contenteditable="true" tabindex="-1">unresolved!</span>
</span>
</div>

Arial…

Posted on by
Reply

Strictly, not a coding thing, but it’s about font style. How to Spot Arial and The Scourge of Arial are interesting reads.

For years now I’ve been interested in typography. It seems to me that it’s one of those overlooked things – that web page looks okay, until someone who knows about type works on it, and then it looks great.

I agree with the article, I don’t like Arial – the weight of the top of the ‘a’ seems wrong. Not sure what to use instead – at the moment I use Tahoma and Trebuchet a lot, but I’m not entirely happy with either. And yes, I’m sticking with the free fonts – I’m not a specialist, I ain’t paying for fonts (blimey but some of them cost…)

Lists and CSS

Posted on by
Reply

You can’t control the space between a bullet point on a list-item, and the text that follows it. That’s a real pain – I was trying to put bullets into a narrow column. Controlling the indent was, well, tricky too.

Why is CSS unable to style obvious things like this? I mean, radio buttons? Checkboxes? Grrr…

Comments from my old blog:

Workaround = ditch the standard bullet, create an image, place it left top, use some left padding.

By Rew at 02:18:37 Thursday 4th May 2006

Hey Rew,

Yeah, considered that, but it was too complicated – I was driving this through Microsoft Content Management Server – the users have access to ‘unordered lists’, but asking them to just use images would have been a bit too much.

Plus, it would make site-wide changes impossible.

By Andy at 13:43:27 Friday 5th May 2006

How to use :hover on more than just links…

Posted on by
Reply

Peterned has a good idea for getting the :Hover of an element to work properly – use HTC files.

Good browsers (Mozilla, Opera and the like) allow you do define a style for hovering over, well, nearly any item. Naturally, Internet Explorer only supports a:hover – that is, hover for anchor tags. This sucks, and Peterned has written an HTC file that will, if the client is IE, rewrite the styles dynamically and assign the appropriate functionality to them.

Pretty cool.

Rounded corners

Posted on by
Reply

Here’s an interesting attribute in CSS I didn’t know about
-moz-border-radius
The style below is :
font-size: 12px; background-color: #ffffff; -moz-border-radius: 8px;
border: 2px solid #3366cc; padding: 7px;

A box with a border! Of course, this only works in Mozilla

Another box with a border!

Working on Web UI Components

Posted on by
Reply

So, this whole ‘Ajax’ thing set me thinking – why not try to make all ‘normal’ user interface components – date, numeric, combo boxes, autosuggestion boxes, image rollovers, menus, tooltips, etc. – why not make them all into libraries that you can include in a page, and then configure through the attributes of a node. E.g.
<input name='someDate' type='text' value='' subtype='date'
format='yyyy-mm-ddd'>
Then the .js file you include reads inputs, finds dates, and add the functionality you need.

I’ve already done this for combo boxes – I’ll put it on my site soon – and so I started looking into menus, and found some neat things:

I didn’t know you could do so much with CSS. Clearly, it has come along since I last really got stuck into it!

Vertical Text in Internet Explorer

Posted on by
Reply

 

Vertical Text

CSS seems to lack an real control over text direction – it should, but of course the reality is different.

What I found was a way of making vertical in IE using some of those pointless filters, and the support IE has for top to bottom, right to left languages. It’s a bit sneaky in doing this – but it works in IE, at least. I haven’t found a way of doing it in Mozilla.
<div style="{ writing-mode:tb-rl;
filter: flipv fliph;
white-space: nowrap;}">

A little reminder for myself

Posted on by
Reply

The interesting bit is the overflow. There is also overflow-x and overflow-y, although Mozilla and IE render the scrollbars differently – Mozilla outside the DIV and IE inside the DIV.
<div style="height:200; width:200;
z-index:1; overflow:auto; background-color:#fff;
color:#000">