Line-Height, Radio Buttons and other problems

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?
--
Bonnett

Bonnett

On 1 Dec 2004 06:57:13 -0800, Bonnett <> wrote:

> 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

Steve Pugh wrote:
> On 1 Dec 2004 06:57:13 -0800, Bonnett <> wrote:
>
> > 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.

Sorry, wrong assumption on my behalf there.

> > 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.
>
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.
> > 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.

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.
--
Bonnett