ITauthor » CSS http://www.itauthor.com Stuff about technical writing and software Sat, 07 Jan 2012 12:34:30 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Talking about technical writing, software and technology in general. The ITauthor Podcast is an advert-free, irregularly published show by technical writers for technical writers or anyone interested in software documentation or IT generally. Alistair Christie - ITauthor.com no Alistair Christie - ITauthor.com comments@itauthor.com comments@itauthor.com (Alistair Christie - ITauthor.com) 2006-2009 Talking about technical writing, software and technology in general. itauthor, alistair christie, technology, writing, documentation ITauthor » CSS http://www.itauthor.com/images/ITauthor-PhotoLogo-144px.jpg http://www.itauthor.com/category/css/ Numbered lists with numbers flush left http://www.itauthor.com/2006/11/28/numbered-lists-with-numbers-flush-left/ http://www.itauthor.com/2006/11/28/numbered-lists-with-numbers-flush-left/#comments Tue, 28 Nov 2006 15:13:00 +0000 ac http://www.itauthor.com/wordpress/2006/11/28/numbered-lists-with-numbers-flush-left/ As a rule, I don't like the indentation of numbers and bullets in a list, which seems to come as standard behaviour in most applications, including Web browsers.

If you want:

1. First item.

2. Second item.

instead of:

   1. First item.

   2. Second item.

you can use the following CSS.

ol, ol li {
   margin: 0;
   padding: 0;
   list-style-position: inside;
}

Note: Make sure you don't use quote marks around the numbers, or Firefox will ignore the style. I started out with margin: "0em"; and it took me a while to figure out what I was doing wrong!

]]> http://www.itauthor.com/2006/11/28/numbered-lists-with-numbers-flush-left/feed/ 0 Using CSS to style lists http://www.itauthor.com/2006/02/14/using-css-to-style-lists/ http://www.itauthor.com/2006/02/14/using-css-to-style-lists/#comments Tue, 14 Feb 2006 10:06:28 +0000 alistair at home http://www.itauthor.com/wordpress/?p=183 /***********************************************************************************/
/* Styling a list using CSS */
/* ------------------------------------------------------------- */
/* The design for this list was taken from the article "CSS Design: Taming Lists" */
/* by Mark Newhouse, published in A List Apart, September 27, 2002 */
/* http://www.alistapart.com/articles/taminglists/ */
/***********************************************************************************/

#NewhouseList {
display: none;
width: 20em;
padding: 0;
margin: 0;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background-color: #90bade;
color: #333;
}
#NewhouseList ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#NewhouseList li {
border-bottom: 1px solid #90bade;
margin: 0;
}
#NewhouseList li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #NewhouseList li a {
width: auto;
}
#NewhouseList li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

I came across this handy technique of using pure CSS to design nice looking lists. It's from an article on A List Apart by Mark Newhouse, written back in 2002. There's a link to this article in the list below.

I was going to use this for a show/hide list of related topics (hence the link below). In the end I decided not to because it didn't fit with the rest of the page design.

Click the following link to show/hide the list.

Related topics

The source that produced this:

<STYLE type="text/css">
/***********************************************************************************/
/* Styling a list using CSS                                                        */
/* -------------------------------------------------------------                   */
/* The design for this list was taken from the article "CSS Design: Taming Lists"  */
/* by Mark Newhouse, published in A List Apart, September 27, 2002                 */
/* http://www.alistapart.com/articles/taminglists/                                 */
/***********************************************************************************/

#NewhouseList {
	display: none;
	width: 20em;
	padding: 0;
	margin: 0;
	font-family: 'Trebuchet MS', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica,
	  Arial, sans-serif;
	background-color: #90bade;
	color: #333;
}
#NewhouseList ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}
#NewhouseList li {
	border-bottom: 1px solid #90bade;
	margin: 0;
}
#NewhouseList li a {
	display: block;
	padding: 5px 5px 5px 0.5em;
	border-left: 10px solid #1958b7;
	border-right: 10px solid #508fc4;
	background-color: #2175bc;
	color: #fff;
	text-decoration: none;
	width: 100%;
}
html>body #NewhouseList li a {
	width: auto;
}
#NewhouseList li a:hover {
	border-left: 10px solid #1c64d1;
	border-right: 10px solid #5ba3e0;
	background-color: #2586d7;
	color: #fff;
}
</STYLE>

<script>
  <!--

function fExpandCollapseRelatedTopics()
{
    //Get the element with the id "NewhouseList" (note: this is a div below the "Related topics" link:
    var oRTsection = document.getElementById("NewhouseList");

    //OnClick, toggle the div between displayed and not displayed:
    oRTsection.style.display = (oRTsection.style.display=='block') ? 'none': 'block';

    return false;
}
    -->
</script>    

<p>
<br>
<a class="expandRelatedToggle" id="expandRelated" title="Click to show/hide" href="javascript:void(0)"
name="relatedTopics" onclick="fExpandCollapseRelatedTopics(); return false">Related topics</a>
</p>

<div id="NewhouseList">
<ul>
    <li><a href="http://www.alistapart.com/articles/taminglists/" title="Click to move to this topic">CSS Design: Taming Lists</a></li>
    <li><a href="http://www.alistapart.com/" title="Click to move to this topic">A List Apart - home page</a></li>
    <li><a href="http://www.w3.org/TR/REC-html40/present/styles.html" title="Click to move to this topic">W3C Style Sheets reference</a></li>
    <li><a href="http://feeds.feedburner.com/itauthor" title="Click to move to this topic">ITauthor podcasts</a></li>
    </ul>
</div>
]]> http://www.itauthor.com/2006/02/14/using-css-to-style-lists/feed/ 0 A CSS annoyance and its solution http://www.itauthor.com/2006/01/17/a-css-annoyance-and-its-solution/ http://www.itauthor.com/2006/01/17/a-css-annoyance-and-its-solution/#comments Tue, 17 Jan 2006 22:01:28 +0000 alistair at home http://www.itauthor.com/wordpress/?p=178 It's good when, after struggling over something for hours, you come across someone who has also been struggling for hours over the same problem and knows what the cause is (especially when this helps you work out the solution).

The problem - with Firefox's refusal to allow you to specify the dimensions of an image you want to use as a background image - is described here:

http://forums.zuggsoft.com/phpbb/weblog_entry.php?e=22044#86779

You know, I get really annoyed at standards pay more attention to themselves, rather than to what people *want* to do with them.

CSS is my current example. We all know that Firefox (and Opera, etc) are more "compliant" with the standards than Internet Explorer. But you know, in many cases, Internet Explorer does what you'd WANT the standard to do.

My current gripe is the fact that the HEIGHT style in CSS is ignored for inline entities (SPANs). Internet Explorer allows you to use HEIGHT in a SPAN, but it's not "standard" and Firefox ignores this property.

...

The problem with this is when you try to assign the background images. If you do the obvious and define the Button_Middle class like this:

Code:
.Button_Middle {
   background-image: url("button_left.gif");
}

then you will find that Firefox shrinks the size of the box down to the height of the text, so you don't see the entire background image. If you attempt to use the HEIGHT property in the style sheet to increase the height of the button, it gets ignored because these are INLINE elements.

My HTML looks like this:

<div class="pagestyle">
    <a href="#"
    class="smallTextButton"
    onclick="fChangeTextSize('small');
    return false;"
    title="small text">   </a>
    <a href="#"
    class="mediumTextButton"
    onclick="fChangeTextSize('medium');
    return false;"
    title="medium text">   </a>
    <a href="#"
    class="bigTextButton"
    onclick="fChangeTextSize('large');
    return false;"
    title="large text">   </a>
</div>

With the following CSS:

/***************** div button container *******************/

div.pagestyle {
    text-align: right;
}

/***************** text size buttons *******************/

a.smallTextButton          {background: bottom left no-repeat;}
a.smallTextButton:visited  {background-image: url(small-text-cold.PNG); text-decoration:none;}
a.smallTextButton:hover    {background-image: url(small-text-hot.PNG); cursor: pointer; text-decoration:none;}
a.smallTextButton:active   {background-image: url(small-text-hot.PNG); text-decoration:none;}

a.mediumTextButton         {background: bottom center no-repeat; width: 15px}
a.mediumTextButton:visited {background-image: url(medium-text-cold.PNG); text-decoration:none;}
a.mediumTextButton:hover   {background-image: url(medium-text-hot.PNG); cursor: pointer; text-decoration:none;}
a.mediumTextButton:active  {background-image: url(medium-text-hot.PNG); text-decoration:none;}

a.bigTextButton            {background: bottom right no-repeat; height: 20px; width: 15px}
a.bigTextButton:visited    {background-image: url(big-text-cold.PNG); text-decoration:none;}
a.bigTextButton:hover      {background-image: url(big-text-hot.PNG); cursor: pointer; text-decoration:none;}
a.bigTextButton:active     {background-image: url(big-text-hot.PNG); text-decoration:none;}

the result looks fine in IE6:

text-size-switcher-IE-good.gif

(Ignore the image on the right, it's a style-switcher button for toggling the page from a fixed width column to full width.)

However, in Firefox 1.5 it looks like this:

text-size-switcher-Firefox-bad.gif

To avoid the largest "A" getting cropped I have to specify a big enough font-size for the div element:

/***************** div button container *******************/

div.pagestyle {
    text-align: right;
    font-size: 13px;
}

/***************** text size buttons *******************/

a.smallTextButton          {background: bottom left no-repeat;}
a.smallTextButton:visited  {background-image: url(small-text-cold.PNG); text-decoration:none;}
a.smallTextButton:hover    {background-image: url(small-text-hot.PNG); cursor: pointer; text-decoration:none;}
a.smallTextButton:active   {background-image: url(small-text-hot.PNG); text-decoration:none;}

a.mediumTextButton         {background: bottom center no-repeat;}
a.mediumTextButton:visited {background-image: url(medium-text-cold.PNG); text-decoration:none;}
a.mediumTextButton:hover   {background-image: url(medium-text-hot.PNG); cursor: pointer; text-decoration:none;}
a.mediumTextButton:active  {background-image: url(medium-text-hot.PNG); text-decoration:none;}

a.bigTextButton            {background: bottom right no-repeat; padding-left: 4px;}
a.bigTextButton:visited    {background-image: url(big-text-cold.PNG); text-decoration:none;}
a.bigTextButton:hover      {background-image: url(big-text-hot.PNG); cursor: pointer; text-decoration:none;}
a.bigTextButton:active     {background-image: url(big-text-hot.PNG); text-decoration:none;}

The result in Firefox is:

text-size-switcher-Firefox-good.gif

]]> http://www.itauthor.com/2006/01/17/a-css-annoyance-and-its-solution/feed/ 0 CSS table wizard http://www.itauthor.com/2005/02/22/css-table-wizard/ http://www.itauthor.com/2005/02/22/css-table-wizard/#comments Tue, 22 Feb 2005 09:42:45 +0000 alistair at home http://www.itauthor.com/wordpress/?p=120 Want to get the CSS source for a styled-up table quickly and without having to open up Dreamweaver or look up a CSS reference? Use:

www.somacon.com/color/html_css_table_border_styles.php

It's a handy "HTML and CSS Table Border Style Wizard" that lets you select from a series of radio buttons and then click "Source" to see the CSS source you need to use to get the displayed results.

]]> http://www.itauthor.com/2005/02/22/css-table-wizard/feed/ 0 Changing a CSS style dynamically http://www.itauthor.com/2004/02/10/changing-a-css-style-dynamically/ http://www.itauthor.com/2004/02/10/changing-a-css-style-dynamically/#comments Tue, 10 Feb 2004 15:55:26 +0000 alistair at home http://www.itauthor.com/wordpress/?p=57 Because of the annoyingly different way that IE and Mozilla handle margins and padding, I needed to modify a style for an h2 heading in IE only – adding a little padding at the top to move the heading down slightly in IE. In Mozilla it looked OK, so I wanted to detect the browser and if it was IE, change the stylesheet.

The page was a one-off, so I didn't want to go down the route of having 2 external stylesheet files, I wanted to keep everything in the page itself.

The solution I used owes something to the information on www.quirksmode.org/dom/changess.html, which explains how to reference a rule within a stylesheet from a JavaScript statement.

So, I have a stylesheet beginning:

<style type="text/css">
  /****Leave this h2 rule as the first rule in this stylesheet
       as it's referenced as such (i.e. rules[0] in the JavaScript below)***/
  h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 18px; font-weight: bold;
    margin-top: 0px
  }
  ...

and then, after the stylesheet, the following JavaScript:

<script language="JavaScript">
  <!--
  browserName=navigator.appName;
  if (browserName=="Microsoft Internet Explorer") {
    document.styleSheets[0].rules[0].style.marginTop = '18px';  
  }
  //-->
</script>

This has no effect in browsers other than IE. In IE the first rule in the first stylesheet on the page (styleSheets[0].rules[0]) gets modified, changing the marginTop style to 18 pixels.

]]> http://www.itauthor.com/2004/02/10/changing-a-css-style-dynamically/feed/ 0 Giving in to JavaScript http://www.itauthor.com/2003/12/02/giving-in-to-javascript/ http://www.itauthor.com/2003/12/02/giving-in-to-javascript/#comments Tue, 02 Dec 2003 14:44:34 +0000 alistair at home http://www.itauthor.com/wordpress/?p=29 After wasting too much time scouring the internet for a way of positioning things accurately in Firebird/Mozilla and IE using only CSS, I've given in and gone for using two separate CSS files, with the following lines of JavaScript to direct the browser to the appropriate file:

var browser;

if (navigator.appName.indexOf('Netscape') != -1) {
    document.write('<'+'link rel="stylesheet"
      href="css/FirebirdCompatible.css" />');
}
else {
    document.write('<'+'link rel="stylesheet"
      href="css/IEcompatible.css" />');
}

OK, so I've given in. But at least now I can get on and finish off the page, which has been languishing, three-quarters-done, for about a week now. ITauthor.com will then, finally, have a proper home page.


NOTE

In case you're wondering how I styled the code above (in other words, for my own benefit when I want to do the same thing in a few weeks time and can't remember what I did). I just typed in an inline style in the normal MovableType input box.

For more details about inline CSS, take a look at:
http://www.alabamatechnologies.com/resources/css-09.asp

]]> http://www.itauthor.com/2003/12/02/giving-in-to-javascript/feed/ 0