Line-Height, Radio Buttons and other problems

[Bonnett]

I started to remove the tables from my top trumps game
(http://www.pete-b.co.uk/?page=top_trumps) yesterday, and I'm having
great difficulty getting the spacing between elements correct. As the
w3c kindly points out
(http://www.w3schools.com/css/pr_dim_line-height.asp) line-height
doesn't work with radio buttons in IE, so I've mashed it up by using a
height for all of the <p> elements in the cards, this hover makes the
text sometimes look slightly disjoint from the radio button its next
to.

What I would like to know is, "Is there a more elegant way to achieve
what I have with the arrangement of the buttons and the car
attributes?". At the moment it uses a lot of different percentage
widths which is not the best, but it works in IE6 and FF1.0 and just
about in IE5.5 and IE5 (although the left position of the main content
is dodgy in these two)

Also, can anyone using Opera or other odd browsers (Safari, Konqueror
etc.) test the page to see if looks alright and if it plays please?

 

[Steve Pugh]

I started to remove the tables from my top trumps game
(http://www.pete-b.co.uk/?page=top_trumps) yesterday, and I'm having
great difficulty getting the spacing between elements correct. As the
w3c kindly points out
(http://www.w3schools.com/css/pr_dim_line-height.asp)

w3schools.com is not a W3C site.

line-height
doesn't work with radio buttons in IE, so I've mashed it up by using a
height for all of the <p> elements in the cards, this hover makes the
text sometimes look slightly disjoint from the radio button its next
to.

You also have a problem that there is no connection between the labels and
the radio buttons. Turn CSS off and you'll see four labels then four
buttons, then the other four labels, the the other four buttons. A table
may be more logical markup.

Also, can anyone using Opera or other odd browsers (Safari, Konqueror
etc.) test the page to see if looks alright and if it plays please?

Looks okay in Opera 7.54. In IE6 everything drops down the page leaving a
large gap, unless I have my window maximised.

If I select 0-60mph then my opponent always has the same card as me.

Steve

 

[Bonnett]

w3schools.com is not a W3C site.

Sorry, wrong assumption on my behalf there.

You also have a problem that there is no connection between the labels and
the radio buttons. Turn CSS off and you'll see four labels then four

buttons, then the other four labels, the the other four buttons. A table
may be more logical markup.

I was wondering about this, would the list of attributes with radio
buttons be a semantically correct as a table, it would make it easier
to design.

Looks okay in Opera 7.54. In IE6 everything drops down the page leaving a
large gap, unless I have my window maximised.

I've noticed this too, I shall look at whether I can reduce the size of
each card.

If I select 0-60mph then my opponent always has the same card as me.

Steve

Sorry, the 0-60 was a slight bug in the programming logic, javascript
wasn't acting as expected with copied objects, it should be fixed now.