Safari Too-Big Border Radius Creates an Interesting Effect

div,article {
width: 540px;
display: block;
border: 1px solid #ccc;
background-color: #fff;
padding: 100px 20px;
margin-bottom: 20px;
-moz-border-radius-bottomright: 800px 100px;
-moz-border-radius-topleft: 800px 100px;
-webkit-border-bottom-right-radius: 800px 100px;
-webkit-border-top-left-radius: 800px 100px;
border-bottom-right-radius: 800px 100px;
border-top-left-radius: 800px 100px;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}

When Firefox has a border radius that’s wider then the container, it changes the curve.

Mobile Web – Preventing the Keyboard from Popping Up

On a mobile device (such as iOs) when a user touches an input the soft keyboard pops up. In some cases, like with a datepicker, you don’t want the soft keyboard to pop up. (The datepicker is a pop-up which has it’s own buttons and selects, so you don’t need the keyboard.) After trying a few things I found the best way to prevent the keyboard from appearing is to add the “readonly” property to the input.

Also check out these related discussions for more info:
Preventing the keyboard from popping up
Input with Readonly

Fixed Table Headers with wide non-breaking content

I just got a bug at work where someone in QA put
“adsfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasfasdfasdfasdfasdfasdf”
into content in a table. This is not “real” content, but it did break the layout. The problem is that it is non-breaking and won’t wrap, and tables can only be as thin as their thickest content in each column. If that had been “adfds adfad adfadsfasdf” etc. with spaces, it would have wrapped and been fine. If it had been a normal table, it would have gotten a horizontal scrollbar and been ok, if not beautiful. What is challenging is that the fixed-header and sorting schemes don’t play well with the horizontal scrollbars. I’m still experimenting with all of this.

http://salzerdesign.com/test/tableOverflow.html

Update: so far all the tables that I’ve tested break with really long non-breaking content. I have not seen a CSS or JavaScript solution that handles it with a fixed header.

Also, the Android mobile OS seems to break with the CSS fixed header, but iOS seems the same as the desktop version.

Conclusion: a fixed header table won’t work with a horizontal scroll bar.  Assuming there are both horizontal and vertical scroll bars, they should show at the same time so the user knows there is content in both directions.  To have both at once, they need to be on the same element.  If they are on different elements, one could be scrolled out of sight.  In order to have the header fixed, the CSS prevents it from scrolling vertically with the body.  Unfortunately, it also doesn’t scroll horizontally with the body.

The JavaScript methods of creating a fixed header have similar problems.

Sorry for the bad news!

Ricardo Lemvo and Makina Loca

A week ago we saw Ricardo Lemvo and his band Makina Loca at the Yerba Buena Gardens Festival in SF.  I had a great time and danced for most of the concert!  The whole thing was really together, the band was tight.  They played mostly dance songs with a wide variety of rhythms. Ricardo Lemvo plays  congolese rumba, son montuno, soukous, mutuashi, cumbia, and more.  For the encore a band member from Montana played a cowboy song.  Ricardo Lemvo writes his songs. The band is extremely talented. I appreciate that that there is a strong horn section as well as a soukous guitar player. The band acted as a group with no individual showboating, yet all of them sounded great.

We first saw Ricardo Lemvo roughly 10 years ago when he played with Sam Mangwana. At that time, I was there to see Sam Mangwana and hadn’t heard of Ricardo Lemvo.  Both musicians have a lot in common including being two of my favorite musicians.

STAR test Fails in every way

The STAR test and No Child Left Behind are ruining education because they

  • reduce the amount and quality of teaching
  • are expensive
  • stress everyone out
  • are inaccurate and are becoming more so as student resentment grows

If I’m preaching to the choir, you can skip the rest. If you want to read the reasons in more depth, keep reading.

The STAR test is a standardized test in California that along with No Child Left Behind is ruining education. The idea behind the test was to show which schools were doing a good job and to be able to find and improve schools that were not. Instead of improving schools which were doing a bad job of educating students, it has lowered the level of education for all students in elementary through high school.

How has it lowered the level of education? The test results are used in such punitive ways that teachers feel compelled to teach to the test. They sometimes spend months teaching the materials on the test, and multiple-choice test-taking itself. This is to the detriment of other subject matter, such as creative projects. Since the tests are multiple choice, it encourages teaching that “one right answer” mentality, while taking time away from creative assignments. Teachers teach best when they teach the materials they feel passionately about, but the STAR test makes everyone teach to the test. On top of it all, students have to spend time taking the tests, which go an for days, instead of learning.

Complying with No Child Left Behind was supposed to bring money to schools. Instead, it’s much more expensive to comply with then the amount of money it brings from the federal government.  All this testing and administration costs the schools money which could be better spent other ways.

The STAR test is meant to be a test of the schools and teachers. It is not an accurate test, because right off the bat disadvantaged students don’t don’t test as well as advantaged ones.  Each student’s performance is influenced by all the teachers he or she had previously, so an individual teacher’s contribution is hard to measure.  The punitive ways of using the scores encourage teachers to teach the students who start out with the most advantages and probably have smaller class sizes.  The weighting system for students who are mentally disabled or learning English don’t really make sense.

Teachers, administrators, and students have a lot of anxiety because of this test. STAR test are also part of a student’s permanent record and can be used as a basis for course selection or for the Gifted Program.  There isn’t much of a Gifted Program anymore because there is no money for it. There is a great joke about No Child Left Behind football analogy. (This is all over the internet, here’s one version.) Sadly, it’s true. Gifted kids are given no help, and are often bored and start to hate school.

The whole assumption of the test is that it is an accurate and objective test in which all the students try their best. After years of taking these tests, many students resent them. They know that for the most part, their performance won’t affect their academic grades. They don’t have any real motivation to try hard. Last year my eighth grader decided he was going to just fill in random bubbles quickly so he could finish early and read his book.  He didn’t like his school or teacher all that much and didn’t care if it reflected badly on them.  (He probably would have been much happier in a gifted program if there had been one.)  I didn’t have many good arguments for why he should try hard and ended up bribing him to do his best.  Apparently, many other students also have the same idea of filling in random bubbles to finish the test early.

This year his high school tried to combat apathy by telling the students that their STAR scores would be counted as part of their academic grades. This is problematic because the test could have materials on it that their teachers hadn’t taught them, so it isn’t fair to grade students down for it. Another problem is that the scores don’t come out until the middle of the summer, after the grading period is over.  The school said they would adjust the grades after the fact. Then, they said that individual teachers could decide if they wanted to count the STAR tests or not.

This is a huge mess, because using the STAR scores as part of the students grade is a misuse of the test. On the other hand, it’s not fair to judge the school and teachers when the students don’t take the test seriously.  A parent can legally request that their child not be tested. Once again, it hurts the school.

The best solution is for the district and state to refuse to do STAR tests and No Child Left Behind (aka No Child Gets Ahead or No Child Left Untested).

 

Don’t Mess With Tables – Pure CSS Fixed-Header Left-Aligned Tables

See the Demo Page for examples and view the source for markup and CSS.

Update: I just added a table with complex headers. I haven’t tested it in many browsers yet.

I am working on a project with a requirement for fixed-headers tables (the headers don’t scroll but the body does) which expand to fit the width of the page. We were using a JavaScript plugin which had to be called every time a page was loaded or resized. Last week one of the tables needed to have a second table within it, and I looked into CSS alternatives without JavaScript.

If you’ve ever tried to keep a table header fixed while letting the body scroll, you will find out that many solutions take the “stretch” out of the width of the table.  Tables are special and different from other HTML elements.  Browsers look at the table’s contents and then calculate from the inside out.  After much frustration, I decided not to mess with tables.

My solution is to mess with divs inside of tables. I took the divs inside the th and gave them “position: absolute; top: 0;“.  That pulls the div straight up to the top of the outer container and out of the flow of the table.  The rest of the table is a normal table and continues happily along.  The header divs retain the top left coordinate from the table, and you can even resize the page and see them shift with the columns. Unfortunately, the header divs completely loose the width they got from the th container.

My solution is a table with a scrolling body but fixed header, no JavaScript, and variable width and height.  Should you use this method? It all depends on the style of your table headers.

CONS:

  • All the problems are in the header styles.
  • No right or center aligned headers (unless you do something to set column width and hack the headers).
  • No using the column width in the style.
  • If text in a header is longer then the content in that  column it might look clipped. This is fixed by setting a min-width on the tds or content in that column.
  • The height of the table headers has to be a fixed height.
  • Horizontal scroll bars or really long non-breaking content breaks it (as well as most other methods of making a fixed-header table). (See full post.)

PROS:

  • Other then the table headers, the rest of the table is totally normal and without any hacks.
  • The table has flexible width and height.
  • No JavaScript needed, you can add JavaScript for other stuff if you like.
  • The browser will take care of everything for you on page load and resize.

SUPPORT:

  • It works in IE7+, FF, Safari, and Chrome, and Opera.
  • Some td or content in the tds need a minimum width if the header is wider then the column content.
  • IE6 has some bugs.

The th-inner divs can be styled within themselves, they can be given a fixed width, padding, margin, height, etc.  They just can’t depend on the width of the th, they use the outer container to calculate their width (which isn’t particularly helpful).  There seem to be some bugs in calculation the widths of spans within the divs as well.

I have styled a table using the jQuery plugin Table Sorter written by Christian Bach. (Please see his site for documentation. )  I used my method to keep the headers fixed but styled them to show the sorting.

Resources for Beginning Software Engineers

I’m going to 8th grade career night at my daughter’s school. I’m too lazy to print anything out, so I’m posting some info here.

Languages (these are all free, this is only a partial list)

  • X/HTML (HTML and/or XHTML) (validator)
  • CSS (validator)
  • JavaScript
  • Ruby on Rails (RoR)
  • PHP
  • Java

Resources

  • Internet
  • Library – try to get the most recent version of books, most of these are online
  • Networking groups – Meetup.org, SFWow.org (San Francisco Women on the Web – but there are men in it too.), etc.

Iframe Height

Lately I wanted to make an iframe that would be the full height and width of the outside window. Width was not a problem but height was.

iframe {
     width: 100%;
     height: 100%;
}

This works for width but not for height because the iframe takes the percentage of the content it encloses, not the percentage of the window enclosing it. This can be a problem if the framed page contains a table (because tables also calculate their contents first) or dynamic content which loads after the rest of the page loads. From what I can tell, the only things to do are to give a set pixel value for height (which works) or to use JavaScript to go in and change the iframe height after the page loads (which I didn’t want to do in this case).

If anyone is wondering, I also tried

body { height: 100%; }
iframe {
     position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
}

which also didn’t work. Putting the styles inline in the iframe element didn’t make any difference. There were also suggestions online about putting a div around the iframe, but that didn’t work for me either. I wish I had a great solution, but at least this post may save myself or someone else time in trying things that don’t work.