CSS Image Rollover

[Dan~]

Hello, I have a 'submit' button on one of my forms, and I've used a style, to stylize the button, as expected works fine in everything but IE.

IE seems to require an <a href=""></a> link in order for it to used my css rollover image.

So basically, I have a button, that when I hover over it, the original image changes into something else, and this refuses to work in IE, does anyone know a work around?

<input type="submit" class="go1" name="submit" value="Send" id="submit" />

It needs to go in there somewhere, I tried tricking IE, by putting in <a class="go1"></a> but it didn't like it :(

[Borbus]

You can add the pseudo class :hover to any selector in CSS. I'm pretty sure it should work in IE too. Show your CSS.

[APH-Alex]

go1:hover, go1:active, go1:focus{

background:(image) no-repeat;

height:xx;

width:xx;

}

Try that CSS

[nvme]

the :hover selector class only works on <a> tags in ie6 i think

[APH-Alex]

Gotta have active and focus after it.

[Mathachew Veteran]

:hover only works in IE6 on anchors. There is a hack that will make hover work on anything else in IE6. Search for csshover.htc and include it for IE6 and below using IE conditionals with the behavoir attribute.

[thePrince]

You could also forget about styling the <input type="submit"> element and use the <button>. Check this article for examples.

[+mrbester MVC]

^ pity it doesn't render properly cross-browser for all content (see the comments for the liked article). Therefore you may as well stick with a <input type="submit"/> and include the IE6 behaviour...

or you could use <input type="image"/> (which is also a submit) and use the supported-by-all mouseover/out/down etc. events to alter the "look" (hint: the src attribute).

[Borbus]

Wow, IE never fails to surprise me about just how bad it is... Do what I do and just selectively turn CSS off for IE. Your site should render fine without CSS (if it is coded well), and if they want CSS, they need a CSS capable browser.

[evo_spook]

Wow, IE never fails to surprise me about just how bad it is... Do what I do and just selectively turn CSS off for IE. Your site should render fine without CSS (if it is coded well), and if they want CSS, they need a CSS capable browser.

yes, I wonder how soon it can be before we can stop designing websites with IE6 in mind, and stop using hacks to get results that will work across all browsers, its not like people have to pay to upgrade, Safari, Opera, IE7 and FF are all free of charge.

Pity not everyones just uses safari, I hear it can accept multiple background images :-)

[primexx]

Wow, IE never fails to surprise me about just how bad it is... Do what I do and just selectively turn CSS off for IE. Your site should render fine without CSS (if it is coded well), and if they want CSS, they need a CSS capable browser.

forget about CSS, MSIE doesn't even render XHTML.

[Borbus]

forget about CSS, MSIE doesn't even render XHTML.

Well of course it doesn't... CSS is more important than XHTML, though. CSS should be used for HTML4 and XHTML. What I do find amusing is that IE8 is going to implement Microformats before it can even do CSS and XHTML!

On the other hand in the good browser category we can already embed arbitrary XML namespaces into XHTML pages ie. SVG in XHTML to enable scalable vector graphics on a web page. We can embed MathML in to pages to display Maths instead of using user unfriendly (and unsemantic) raster graphics to display them.

Here is quite an interesting page: http://intertwingly.net/blog/ Note the SVG icons. With Firefox if you hold control and move your scroll wheel you can adjust the font size. Note how the icons scale perfectly with the rest of the content the way you would expect. For visually impaired users this is great. IE is also holding back the accessible web.

[The_Decryptor Veteran]

SVG and MathML can be embedded in XHTML (there's a special XHTML Doctype with those modules included)

And Sam Ruby's page is "XHTML5" ;)

[primexx]

Well of course it doesn't... CSS is more important than XHTML, though. CSS should be used for HTML4 and XHTML. What I do find amusing is that IE8 is going to implement Microformats before it can even do CSS and XHTML!

On the other hand in the good browser category we can already embed arbitrary XML namespaces into XHTML pages ie. SVG in XHTML to enable scalable vector graphics on a web page. We can embed MathML in to pages to display Maths instead of using user unfriendly (and unsemantic) raster graphics to display them.

Here is quite an interesting page: http://intertwingly.net/blog/ Note the SVG icons. With Firefox if you hold control and move your scroll wheel you can adjust the font size. Note how the icons scale perfectly with the rest of the content the way you would expect. For visually impaired users this is great. IE is also holding back the accessible web.

mmm, i'd say the content is more important than the style, but then again you make a good point that CSS could be used with HTML as well...

[Borbus]

It should be used with HTML4. HTML4 has the same content/presentation separation recommendation as XHTML. XHTML is basically HTML4 in XML form, the CSS guidelines have not changed. HTML4 is still a valid thing to use on the web considering IE doesn't support XHTML but since it doesn't support CSS either, what's the point?

SVG and MathML can be embedded in XHTML (there's a special XHTML Doctype with those modules included)

And Sam Ruby's page is "XHTML5"

Yeah it is XHTML5 but it's not a standard yet which is why it uses the generic html doctype probably to make sure Firefox etc. stays in standards compliant mode. But it is served with the application/xhtml+xml MIME type which XHTML should be served as. IE does not support this MIME type (and thus does not support XHTML) but it is required for embedding other namespaces. You do not have to use a special XHTML dtd to embed any other XML namespace, by the way.

[primexx]

It should be used with HTML4. HTML4 has the same content/presentation separation recommendation as XHTML. XHTML is basically HTML4 in XML form, the CSS guidelines have not changed. HTML4 is still a valid thing to use on the web considering IE doesn't support XHTML but since it doesn't support CSS either, what's the point?

Yeah it is XHTML5 but it's not a standard yet which is why it uses the generic html doctype probably to make sure Firefox etc. stays in standards compliant mode. But it is served with the application/xhtml+xml MIME type which XHTML should be served as. IE does not support this MIME type (and thus does not support XHTML) but it is required for embedding other namespaces. You do not have to use a special XHTML dtd to embed any other XML namespace, by the way.

IE8 makes a lot of improvements in the CSS department though. What's stupid is that it could probably even render XHTML markup properly, but because it still doesn't support the mime type, is just as useless as IE7.

[Borbus]

I'll believe that when I see it. IE7 was supposed to have a lot of improvements but it's still a complete joke. Microsoft will only implement stuff in IE that benefits them. They don't care about the community. They only made IE7 because Firefox was getting features that normal people like like RSS.

If everyone started turning CSS off for IE (and any browser that doesn't support it) then we would be fine. But unfortunately most people are controlled my Microsoft in ways they wouldn't even think of. If Microsoft chooses not to support a certain part of CSS then why should I be forced to not use it when every CSS capable browser supports it?

[The_Decryptor Veteran]

...

Yeah it is XHTML5 but it's not a standard yet which is why it uses the generic html doctype probably to make sure Firefox etc. stays in standards compliant mode. But it is served with the application/xhtml+xml MIME type which XHTML should be served as. IE does not support this MIME type (and thus does not support XHTML) but it is required for embedding other namespaces. You do not have to use a special XHTML dtd to embed any other XML namespace, by the way.

"<!DOCTYPE html>" isn't a generic Doctype, it's the HTML5 doctype.

And it's not XHTML 1.0, 1.1 or 2, if you try to validate the page (using the W3C validator) you'll get hundreds of "errors".

doctypes aren't really needed though, and can lead to other issues (if you're embedding SVG in XHTML, even with the XML namespace the doctype says you need to prefix SVG elements, i.e. <svg:svg>)

That and people don't seem to like XHTML (no browsers do validity checks (hence why inline SVG without the doctype's fine), the XML parsers used just make sure the page is well formed, well formed tag soup is still tag soup).

[+mrbester MVC]

"<!DOCTYPE html>" isn't a generic Doctype, it's the HTML5 doctype.

But it isn't supported yet as there isn't strictly any such thing as HTML 5. Yet. Which is why the Fx HTML Validator extension coughs and wheezes over it. It does do validity as well as well-formed checks but only for the DTDs it knows (and were presumably referenced by the doctype declaration).

Distler's blog is a good example of XHTML+MathML+SVG.

[The_Decryptor Veteran]

Yeah, 3rd party extensions can validate the documents (although personally I think it should be in the browser)

It should also validate against any scheme it knows about, and any one the document specifies (i.e. you create your own doctype)

[megamanXplosion]

:hover only works in IE6 on anchors. There is a hack that will make hover work on anything else in IE6. Search for csshover.htc and include it for IE6 and below using IE conditionals with the behavoir attribute.

(Y)