https://legacy.forums.gravityhelp.com/topic/radio-button-images-broken-in-ie7 Gravity Support Forums Topic: radio button images broken in IE7 en-US Sun, 26 Apr 2026 12:14:00 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/radio-button-images-broken-in-ie7#post-60653 Tue, 29 May 2012 14:46:38 +0000 Rob Harrell 60653@https://legacy.forums.gravityhelp.com/ <p>Right on, thanks for sharing! </p> https://legacy.forums.gravityhelp.com/topic/radio-button-images-broken-in-ie7#post-60650 Tue, 29 May 2012 14:37:33 +0000 btolle 60650@https://legacy.forums.gravityhelp.com/ <p>It was fairly easy to add some IE specific rules, way easier that it was to try and make it work like everywhere else.</p> <p>These helped show me the way on the css/html/wordpress-<br /> <a href="http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer" rel="nofollow">http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer</a><br /> <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/" rel="nofollow">http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/</a><br /> <a href="http://jeffsebring.com/conditional-internet-explorer-classes-thesis/" rel="nofollow">http://jeffsebring.com/conditional-internet-explorer-classes-thesis/</a></p> <p>button styling-<br /> <a href="http://archivist.incutio.com/viewlist/css-discuss/86489" rel="nofollow">http://archivist.incutio.com/viewlist/css-discuss/86489</a><br /> <a href="https://github.com/twitter/bootstrap/issues/3181" rel="nofollow">https://github.com/twitter/bootstrap/issues/3181</a> </p> https://legacy.forums.gravityhelp.com/topic/radio-button-images-broken-in-ie7#post-60618 Tue, 29 May 2012 10:21:57 +0000 Rob Harrell 60618@https://legacy.forums.gravityhelp.com/ <p>At the end of the day, when it comes to IE7 - if it <em>functions</em> - you are good to go. :) </p> https://legacy.forums.gravityhelp.com/topic/radio-button-images-broken-in-ie7#post-60588 Tue, 29 May 2012 03:32:44 +0000 btolle 60588@https://legacy.forums.gravityhelp.com/ <p>I'm sort of coming to that conclusion, too. The amount of effort to solve this seems out of proportion to the number of people still using IE7/8. And if they are using them, they're probably used to their sites not looking so hot. </p> https://legacy.forums.gravityhelp.com/topic/radio-button-images-broken-in-ie7#post-60481 Sun, 27 May 2012 09:37:40 +0000 Rob Harrell 60481@https://legacy.forums.gravityhelp.com/ <p>Honestly, I think your best bet would be to just do a fallback for IE7 that routes to a normal radio field display. If you view the source in IE7 on your form you'll see on the wrapper you can target IE7 (and each browser for that matter). I wouldn't even waste anymore time with it.</p> <p>IE7 won't support the :checked or + selector anyways. When IE8 came out it's sole purpose was to pretty much finish up the CSS2 Selectors that were missing from IE7. That's why IE8 was only marginally better than IE7 and why IE9 still falls short when it comes to CSS3 and HTML5. It's the same pattern over and over... </p> https://legacy.forums.gravityhelp.com/topic/radio-button-images-broken-in-ie7#post-60469 Sun, 27 May 2012 05:41:19 +0000 btolle 60469@https://legacy.forums.gravityhelp.com/ <p>I have built a form that uses images for a series of radio button options.<br /> <a href="http://www.alltheotherswerepractice.com/test-shirt-swatches/" rel="nofollow">http://www.alltheotherswerepractice.com/test-shirt-swatches/</a></p> <p>The form is working great in all browsers, except Internet Explorer 7.</p> <p>Two things about the images break in IE7:<br /> - The radio buttons are hidden, and the &lt;img&gt; are not selectable<br /> - The &lt;img&gt; do not get highlighted when the option is selected</p> <p>I unhide the radio buttons, the form logic works as expected.</p> <p>To hide the buttons I was using a custom class:<br /> <pre><code>.hideradio input[type=&quot;radio&quot;] {display: none;}</code></pre> <p>IE7 gets confused with display:none, so I started using:<br /> <pre><code>.hideradio input[type=&quot;radio&quot;] {position: absolute; left: -9999px;}}</code></pre> <p>To highlight the selected option, I am using:<br /> <pre><code>body #gform_wrapper_43 .gform_body ul.gfield_radio li input[type=&quot;radio&quot;]:checked + label img { background: #eee; border: solid 2pt #c10073; }}</code></pre> <p>It all works as expected in every other browsers I have tried.</p> <p>Does anyone have any ideas on how to make the &lt;img&gt; tags selectable in IE7, and how to make the highlighting work?</p> <p>The site is running the latest public builds of wordpress, gravity forms, and thesis.</p> <p>Things I have tried but can’t make work, thou I will admit that it may be user error on my part:<br /> <a href="http://snook.ca/archives/javascript/using_images_as" rel="nofollow">http://snook.ca/archives/javascript/using_images_as</a><br /> <a href="http://www.tsd.net.au/blog/using-images-labels-fix-ie" rel="nofollow">http://www.tsd.net.au/blog/using-images-labels-fix-ie</a><br /> <a href="http://www.jotform.com/answers/23448-IE-problem-with-radio-buttons" rel="nofollow">http://www.jotform.com/answers/23448-IE-problem-with-radio-buttons</a> </p>