[css-d] UL Menu Causing Separate Issues In IE and Firefox?
I'm working on a table-free layout with jQuery-based drop-down megamenus (which have a hover-based trigger that displays a panel). The menus are ULs, though to make it fit underneath the logo they're contained in a DIV set to a "display: inline" (since otherwise, it doesn't validate). Though the page now validates, it's running into two problems in separate browsers. http://www.starcitygames.com/SCG_6/test.html In FIREFOX, the menu displays fine, but displays another line just below it - a narrow strip the height and background color of the menu that drops everything else down. I'm not sure why this is happening. In IE, if you hover your mouse over the "Buying Cards" link and see the (horrifically styled) drop-down panel, you'll note that the author in the text underneath the panel ("The Ferrett") bleeds through into the actual panel, even though the z-index on the panel is set to 10,000. This could be a JavaScript issue, but I think it's CSS-related. In CHROME, OPERA, and SAFARI: No problems. Any ideas? The relevant markup and CSS is below, though obviously the whole page can be visited. Thanks in advance! http://www.starcitygames.com"; class="disable_hover"> http://www.starcitygames.com/images/button/SideSCGLogo.gif"; alt="StarCityGames.com!" /> <!--//<![CDATA[ var m3_u = (location.protocol=='https:'?'<a rel="nofollow" href="https://ads.starcitygames.com/phpad/www/delive">https://ads.starcitygames.com/phpad/www/delive</a> ry/ajs.php':'<a rel="nofollow" href="http://ads.starcitygames.com/phpad/www/delivery/ajs.php">http://ads.starcitygames.com/phpad/www/delivery/ajs.php</a>'); var m3_r = Math.floor(Math.random()*999); if (!document.MAX_used) document.MAX_used = ','; document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u); document.write ("?zoneid=4"); document.write ('&amp;cb=' + m3_r); if (document.MAX_used != ',') document.write ("&amp;exclude=" + document.MAX_used); document.write ("&amp;loc=" + escape(window.location)); if (document.referrer) document.write ("&amp;referer=" + escape(document.referrer)); if (document.context) document.write ("&context=" + escape(document.context)); if (document.mmm_fo) document.write ("&amp;mmm_fo=1"); document.write ("'></scr"+"ipt>"); //]]>--> http://www.starcitygames.com";>Home Buying Cards Menswear Articles, Cards, Decks, More... Gifts Gift Certificates, Ponies, More... Clearance! 10% off all Apocalypse Singles this weekend. Don't miss out! More stuff for him... Selling Cards Menswear
[css-d] IE Fix For Floated Netflix-Style Links?
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 (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: http://www.starcitygames.com/polls/poll_article_process.php"; method="get"> Feedback Options 1 2 34 5 Rate this article, then http://forums.starcitygames.com/viewtopic.php?t=316966";>talk about it in our forums! 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/
[css-d] Splitting the Center Column Into Two Columns?
Hello, all; I have a three-column 800-pixel wide layout, with a floated div to the left and the right, as you can see here: http://www.starcitygames.com/SCG_6/test.html Both the CSS and XHTML validate. We will be publishing news items in the center column - each news item spans the width of the center column in a single row. Let's call these divs #main, #left_sidebar, and #right_sidebar. Each of the news items are divs assigned to the .news_item class. The problem: my boss wants the capability to occasionally "split" a given row in half, so we have two news items sitting next to each other on a single row, just as you'd split a table cell in two. This is proving to be surprisingly difficult, especially since I'm expecting most of our news items will span the entire width of #main. I attempted to do this by creating two test divs with very roughed-out pixel counts: .left_half_block { width: 200px; float: left; margin: 0px 5px 0px 0px; } .right_half_block { margin-left: 220px; } That kind of worked - but as you can see at http://www.starcitygames.com/SCG_6/test.html, because the .left_half_block element is floated, if the .right_half_block has less content than .left_half_block, it droops down to overlap the next .news_item div. Now, as I understand it, normally I would fix that by setting the .news_item below it to "clear: left", so that it can't have any elements on its left-hand side. But if I do that, then it (correctly) positions everything below not just the .left_half_block element, but all the elements within #left_sidebar. Which means that every element in the #main is pushed far down, giving me a vast amount of embarrassing white space. So am I overlooking something obvious here in how to fix this? Is there a way to restrict the namespace of clear, or some easy fix that I in my noviceness am overlooking - or just a better layout for this style of split news items in general? (I may also be misunderstanding the logic here, and if so I'm eager to see what I did wrong.) Thanks in advance, The Ferrett 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/