Hey, folks; I have a three-column, fixed-width "holy grail" layout, and I've recently added a jQuery plugin that transforms a set of radio buttons into six floated A elements with a star background, which submit a vote to rank this page when you click on them. The problem is that these "star" elements are floated left by default, and I'd like to center them in the column.
I did this by wrapping the elements in a <div> (with an assigned width) and then by assigning a left margin calculated to push the div out into the center of the column. This works in every browser but, you guessed it, IE. Problem is, in IE 7 that margin appears to be not quite doubled, but definitely added to: http://www.starcitygames.com/SCG_6/test_article_page_with_vote.html (This sample page has no dynamic transformation, only the HTML as it's rendered once the plugin is done, so you shouldn't have to turn JavaScript on.) Any idea why this is, or how to fix it? The page validates as valid XHTML, and the CSS validates with the exception that I do use moz-border-radius and webkit-border to provide rounded edges on some browsers... But those elements (th) aren't present on this page. ------------------- For the record, here's the relevant HTML once the page is finished rendering: <div id="article_voting"> <form action="http://www.starcitygames.com/polls/poll_article_process.php"; method="get"> <input name="article_ID" id="article_vote_ID" value="17218" type="hidden" /> <h2 id="nochange">Feedback Options</h2> <div id="rating_control"> <div class="star-rating-control"> <div class="rating-cancel"><a title="Cancel Rating"></a></div><div class="star-rating rater-0 hover-star star-rating-applied star-rating-live star-rating-on"><a title="Very poor">1</a></div> <div class="star-rating rater-0 hover-star star-rating-applied star-rating-live star-rating-on"><a title="Poor">2</a></div> <div class="star-rating rater-0 hover-star star-rating-applied star-rating-live star-rating-on"><a title="OK">3</a></div><div class="star-rating rater-0 hover-star star-rating-applied star-rating-live star-rating-on"><a title="Good">4</a></div> <div class="star-rating rater-0 hover-star star-rating-applied star-rating-live star-rating-on"><a title="Very Good">5</a></div> </div> <input style="display: none;" class="hover-star star-rating-applied" name="article_ranking" value="1" title="Very poor" type="radio" /> <input style="display: none;" class="hover-star star-rating-applied" name="article_ranking" value="2" title="Poor" type="radio" /> <input style="display: none;" class="hover-star star-rating-applied" name="article_ranking" value="3" title="OK" type="radio" /> <input style="display: none;" class="hover-star star-rating-applied" name="article_ranking" value="4" title="Good" type="radio" /> <input style="display: none;" class="hover-star star-rating-applied" name="article_ranking" value="5" title="Very Good" type="radio" /> </div> <span id="hover-test">Rate this article</span>,<br /> then <a href="http://forums.starcitygames.com/viewtopic.php?t=316966";>talk about it in our forums!</a><br /> <input style="display: none;" value="Submit" id="article_submit" type="submit" /> </form> </div> Here's my customized CSS to contain the floated elements: #article_voting, #article_voting form { margin: 5px; padding: 5px 5px; text-align: center; background-color: white; border: 1px solid black; } #rating_control { margin: 0px 0px 0px 225px; padding: 0px; border: 1px dotted blue; overflow: hidden; width: 102px; /* IE7 requires a width to center properly */ } And here are the elements, as styled via the jQuery Rating Plugin. /* jQuery.Rating Plugin CSS - http://www.fyneworks.com/jquery/star-rating/ */ div.rating-cancel,div.star-rating{float:left;width:17px;height:15px;text-ind ent:-999em;cursor:pointer;display:block;background:transparent;overflow:hidd en} div.rating-cancel,div.rating-cancel a{background:url(delete.gif) no-repeat 0 -16px} div.star-rating,div.star-rating a{background:url(star.gif) no-repeat 0 0px} div.rating-cancel a,div.star-rating a{display:block;width:16px;height:100%;background-position:0 0px;border:0} div.star-rating-on a{background-position:0 -16px!important} div.star-rating-hover a{background-position:0 -32px} /* Read Only CSS */ div.star-rating-readonly a{cursor:default !important} /* Partial Star CSS */ div.star-rating{background:transparent!important;overflow:hidden!important} /* END jQuery.Rating Plugin CSS */ Thanks in advance, The Ferrett Co-writer, www.mighthavebeen.net, a webcomic about rock, the end of the world, and tiny plastic guitars Editor-in-Chief and Webmaster, StarCityGames.com "This guy's like Gandhi, but better. He likes puppets." ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
