OnMouseOver; how to centre icons in updated code

Scroll up on that page, there are plenty of options there.

I’ll take a look at it later and report back when I find one I like best.

Are there any advantages of using a div instead of a button, and vice versa?

And what are the disadvantages of using either?

The advantage of using a div is that it’s allowed to have other elements inside of it. The button must only have text inside of it.

The main reason for using a button is to give the user an obvious button to click on, mostly for form submission reasons.

1 Like

text, an image, or an svg you mean, right?

Only text.

This is not allowed then?

The spec for a button says:

[quote]Content model:
Phrasing content, but there must be no interactive content descendant.[/quote]

what is phrasing content? From https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#phrasing-content

In other words, text only.

1 Like

What do you mean?

an svg isn’t text, so, then that code would be invalid?

The button element, that is, <button>...</button> is only allowed have text inside of it. SVG is not text.

also a div, you say? correct?

A div can contain anything. It’s short for division, which is what is used to divide up the page in to semantically meaningful sections.

So, all my button codes with svg’s in them are invalid?

That’s why they don’t work in Firefox, or IE11.

Why didn’t you tell me any of this?

I didn’t know until I investigated the problem.

This is difficult looking for one way when there are many. And I don’t like any of them.

Remember when I became aware of the problem? I gave one best solution to center both vertically and horizontally.

2 Likes

I don’t remember.