2

I need to input sports result data on a website quite regularly. The table appears offset in Ubuntu (using Firefox and Chrome) ie the input boxes do not match with the vertical input descriptions. Consequently, the table is longer than it should be and the input boxes don't match up with the input descriptions. This does not happen on my Arch box - the table renders perfectly. I don't know where to start looking for a solution to this problem.

Arch is currently using Firefox 10 but this problem has been present for quite a number of months and version upgrades of Firefox. What happens is this : there are two input cells side by side (where I add results of football (association) matches. These cells align with a team name eg

Team One [input 1] [input 2]
Team Two [input 1] [input 2]

Firefox in Arch renders the page as intended. The input cells are aligned with the team names. This also works in Firefox in Windows.

In Ubuntu, the cells are displayed on top of each other :

Team One [input 1]
[input 2]

This, unfortunately, causes the input boxes to become misaligned ie they are no longer next to the team they are associated with.

Team One [input 1]
Team Two [input 2]
[input 1]
[input 2]

Matching teams with the correct input boxes becomes a nightmare. Aaaaargh.

I can't give you a link because it's a password protected site. Here's what it should look like: http://i39.tinypic.com/2ev8bi1.png

Here's what it looks like in Ubuntu 11.10 using Firefox 10

http://i41.tinypic.com/ebdgr7.png

I have installed the Microsoft font set and also used my Firefox config from Arch in Ubuntu, but the problem persists.

2
  • I am using a site - not designing one. I can't change the css. Firefox in Ubuntu renders the page table differently to Firefox in Arch/Windows etc.
    – esteeven
    Feb 23, 2012 at 22:02
  • Edited the answer with further options to change the appearance of a webpage if you do not have access to the source.
    – lgarzo
    Feb 24, 2012 at 14:34

1 Answer 1

0

Without seeing the exact CSS, it seems that the tables use different fonts. (Compare capital „B”s or „1”s for example.)

A few things you can try:

  • Try to specify the exact same font with pixel sizes in your CSS, and see if it makes a difference.
  • Use Firebug to inspect the dimensions / paddings of the input boxes. Use a CSS reset stylesheet to even out the browser differences.
  • Modify the layout to be able to accomodate a few pixel differences in font sizes.
  • Use tables for tabular data. If you had a table row for a team, the cells should not be misplaced vertically.

If you don't have access to the source code of the website, you still have options to modify the appearance.

  • The Stylish extension will modify the appearance (CSS) of the web sites (and according to the add-on page, even Firefox itself). By writing user style sheets, it is up to you to modify the look to your liking.
  • Greasemonkey on the other hand is a universal weapon to change anything on the web page (including the HTML structure) by using JavaScript. If you can code an algorithm for the problem, no one is going to stop you from changing the page the way you like it.

Another way to address the problem is to change the appearance or the theme you are using in your OS. GUI programs use the widgets of the operating system* to display buttons, checkboxes and input fields, etc.

So in most cases changing the theme will change the fonts / paddings / sizes of input boxes.

*) Not exactly that simple but the point is the widget appearance is borrowed by your browser. That's why it looks native.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .