Tables stretch beyond borders of floated divs in IE for PC
I created a rounded corner border for a web application using styled div’s.
Continue readingCategory: CSS
Stretchy rounded corner borders without tables
It is not a straightforward process to create a rounded corner border in css that stretches both horizontally and vertically, and won’t look bad when the page gets too small, AND also looks good in
Continue readingCSS selector names can’t begin with numbers
After trying unsuccessfully to make some class styles show up in a document recently, I realized I had labeled the class “3column” which does not work. “Col1_of3” works fine, though.
Continue readingPreventing Page Shift to left in Safari and Firefox
My home page has a lot of columns – the less important ones are usually beyond the right edge of the page in a small screen. In Safari and Firefox that creates an unpleasant page
Continue readingCSS: table-layout:fixed keeps Netscape 7 in line
Netscape 7 was squashing some table cells down, ignoring widths I had specified in the css.
The code for the table:
CSS Border-top does not show in empty cells
In IE, borders created by styling a table cell with “border-top” attribute do not show up when used on a td tag, unless there is some content inside the cell, at least a non-breaking space. This is not the case in other browsers – the border will show up even when the cell is blank.
In the example below, there is a single table, with three columns and three rows, but only the first 2 rows contain anything. The last row is completely empty. The tag “td” has been styled with
Continue reading
border-top-width: 2px;
border-top-style: solid;
border-top-color: #003399;
A Trivia Game built with Questionmark Perception Part I
I. JCAHO Trivia – Background, objectives, and game play
Jump to Part II – Construction of Choose-A-Team and Login Pages.=>
Jump to Part III – Building the Game.=>
Jump to Part III – Building the Game.=>
(click to enlarge image)
In June, as a small part of a larger hospital staff training project, I built an educational online game for the nursing department. There were several requirements that helped determine the shape of the final result.
Synchronous game play vs. Asynchronous: When considering what kind of game might be best for our purposes, we first considered one based on Jeopardy, since that format is so popular.
However, Jeopardy is not an asynchronous system. In other words, each Jeopardy round is a timed competition against several other players, all of whom must be playing simultaneously or “synchronously” as the elearning people call it.
Continue readingSwap style sheets in iFrame contents based on parent window size
For child documents that have the same hostname as the parent iframe document, you can use javascript to change stylesheets or other elements of the DOM on the child based on information sent from the parent.
Continue readingBackground-image style fails to display on Mac browsers
If the background-image property you have set in a stylesheet displays on PC, but not on Mac, make sure you haven’t accidentally specified the height or width of the div without a unit designation (i.e.
Continue readingSetting height in nested divs
Note to self: USE THE RIGHT DOCTYPE!
One of the first things we web developers usually do upon starting to using CSS is to try to recreate our old HTML multi- column layouts. which were invariably built with tables.
This turns out to be quite a challenge, particularly getting columns to be equal in height. In other words it’s difficult to get CSS-styled elements to act like a table.
I’ve found that many of the so-called 2 and 3-column CSS-only layouts get around the difficulty of making equal-height columns by using a background image in a container div that makes it appear as if the columns have backgrounds which are the same size. Clever, but it adds a little complexity and some inflexibility to the layout.
When I was first starting to convert my pages to CSS-based layouts, one of the methods I tried was to surround the columns with a container element which I hoped would transfer the height of the tallest div to the other one through the use of "height:auto" and "height:100%". It was a dismal failure, but I learned a few things in the process. Here’s what I tried: