Re: [css-d] UL Menu Causing Separate Issues In IE and Firefox?
The Ferrett wrote: 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! [...] Can't answer the IE problem from this computer, but the problem in Firefox seems to be with the navigation_bar div. Setting the border to 0px eliminated the line, and reducing the margin to 0px eliminated the extra space. I'm not sure what your intentions are for these values, as my removing them seemed to produce no visual effect in Chrome or Safari, but it's possible removing them might fix your problem. Sincerely, Dan Gooch __ 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/
Re: [css-d] UL Menu Causing Separate Issues In IE and Firefox?
The Ferrett wrote:
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
Hello Ferrett. That is one busy page.
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.
Me neither, I can't see any difference (I don't see a line).
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.
You have given IE7 z-index:0. This causes the ferret text to be
stacked higher than the list items [1] see example 10. So delete the
z-index and then IE7 will treat it as *auto*.
.author_bio {
position: relative;
z-index: 0; /* DELETE */
}
Now you must add a z-index to the list item since in IE7,
position:relative establishes a new stacking context. The behavior that
you want is [1] example 6.
ul#menu li {
display: inline;
margin: 0.1em .5em;
position: relative;
background: none;
z-index: 1; /* ADD */
}
You may want to hide this nonsense from non IE7- browsers. Like this.
* html .author_bio { z-index: auto; /* for IE6 */ }
*+html .author_bio { z-index: auto; /* for IE7 */ }
* html ul#menu li { z-index: 1; /* for IE6 */ }
*+html ul#menu li { z-index: 1; /* for IE7 */ }
1. http://css-class.com/test/css/visformatting/layers/z-index.htm
BTW, If you move div#header in the source to below div#main-body then
the layering (by the flow) will work without resorting to z-index. Give
div#main-body a margin-top and absolutely position the div#header.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] 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
