[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!
div id=header
div style=float: left;
a href=http://www.starcitygames.com;
class=disable_hover
img
src=http://www.starcitygames.com/images/button/SideSCGLogo.gif;
alt=StarCityGames.com! /
/a
/div
script type='text/javascript'!--//![CDATA[
var m3_u =
(location.protocol=='https:'?'https://ads.starcitygames.com/phpad/www/delive
ry/ajs.php':'http://ads.starcitygames.com/phpad/www/delivery/ajs.php');
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;amp;cb=' + m3_r);
if (document.MAX_used != ',') document.write (amp;amp;exclude=
+ document.MAX_used);
document.write (amp;amp;loc= + escape(window.location));
if (document.referrer) document.write (amp;amp;referer= +
escape(document.referrer));
if (document.context) document.write (amp;context= +
escape(document.context));
if (document.mmm_fo) document.write (amp;amp;mmm_fo=1);
document.write ('/scr+ipt);
//]]--/scriptnoscripta
href='http://ads.starcitygames.com/phpad/www/delivery/ck.php?n=acef68fcamp;
cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'img
src='http://ads.starcitygames.com/phpad/www/delivery/avw.php?zoneid=4amp;cb
=INSERT_RANDOM_NUMBER_HEREamp;n=acef68fc' border='0' alt=''
//a/noscript
div id=navigation_bar
ul id=menu
li
h2a
href=http://www.starcitygames.com;Home/a/h2
/li
li class=mega
h2
a href=#Buying Cards/a
/h2
div
h3
Menswear
/h3
p
a href=#Articles/a,
a href=#Cards/a,
a href=#Decks/a,
a href=#More.../a
/p
h3
Gifts
/h3
p
a href=#Gift Certificates/a,
a href=#Ponies/a,
a href=#More.../a
/p
h3
Clearance!
/h3
p
10% off all Apocalypse Singles this
weekend.
a href=#Don't miss out!/a
/p
a href=# class=more
More stuff for him.../a
/div
/li
li class=mega
h2
a href=#Selling Cards/a
/h2
div
h3
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 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=nochangeFeedback Options/h2
div id=rating_control
div class=star-rating-control
div class=rating-cancela
title=Cancel Rating/a/divdiv class=star-rating rater-0 hover-star
star-rating-applied star-rating-live star-rating-ona title=Very
poor1/a/div
div class=star-rating rater-0
hover-star star-rating-applied star-rating-live star-rating-ona
title=Poor2/a/div
div class=star-rating rater-0
hover-star star-rating-applied star-rating-live star-rating-ona
title=OK3/a/divdiv class=star-rating rater-0 hover-star
star-rating-applied star-rating-live star-rating-ona
title=Good4/a/div
div class=star-rating rater-0
hover-star star-rating-applied star-rating-live star-rating-ona
title=Very Good5/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-testRate this article/span,br /
then a
href=http://forums.starcitygames.com/viewtopic.php?t=316966;talk about it
in our forums!/abr /
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
[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/
