6 replies [Last post]
tracyberna
Offline
Regular
Los Angeles, CA
Last seen: 10 years 1 week ago
Los Angeles, CA
Joined: 2005-11-03
Posts: 18
Points: 0

I've been customizing in a WordPress layout for a client who wants dropdown menus. I've been altering a pre-existing layout shown here http://freethemelayouts.com/showcase/personal-wordpress-themes/freshcitrus-theme/, which incorporates some code in the header (referencing "DXImageTransform.Microsoft.AlphaImageLoader") with which I'm not familiar. I've been trying to customize it as best I can, but there's a good chance I've made stupid mistakes.

In any case, I've managed to put together a rollover/dropdown menu that works fine in Firefox/Safari, but IE isn't working. (In this case I'm using v.6. I'm trying to test it in v.7 right now but my request at www.crossbrowsertesting.com is taking a while.) The links still respond as links, but when you mouseover there's no rollover effect, and any existing dropdowns don't appear.

Here are the pertinent files/code:

The site: http://metroencoding1.net/
The CSS file: http://metroencoding1.net/wp-content/themes/freshcitrus/freshcitrus/style.css
The header file contains this:

	<!--[if lt IE 7]>
	<style>
	#sidebar ul li ul li:hover, #sidebar ul li ul li .current_page_item, #sidebar ul li ul li .current_page_item:hover{
		background-image: none;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?php bloginfo('template_url'); ?>/images/navlist-hover_ie.png', sizingMethod='scale');
		cursor: pointer;
	} */
 
	#header h1 a{
		background-image: none;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?php bloginfo('template_url'); ?>/images/logo.gif', sizingMethod='crop');
		cursor: pointer;
	}
 
 #sidebar {
 	padding-top: 15px;
    margin-left:-200px;
}
 
#navigation{
	height: 28px;
	padding-left: 0;
	overflow: hidden;
}
 
 #sidebar li ul{
    width: 60%;
}
 
	</style>
	<![endif]-->
 
 
<?php wp_head(); ?>	
</head>
<body>
 
<div id="main_bg">		
	<div id="nav-content">
 			<ul id="navigation">
            	            <li>
				<div id="sidebar">
					<ul>
				<?php wp_list_pages( ); ?>
 
					</ul>
				</div>
                           </li>
                    </ul>
			<div id="search">
			</div>
		</div>
 
	<div id="container">
 
		<div id="header">
			<h1><a href="<?php echo get_option('home'); ?>/"><span class="inv"><?php bloginfo('name'); ?></span></a></h1>
			<span id="description"><?php bloginfo('description'); ?></span>
		</div>
  </div>

Please help? New set of eyes? Thank you!

----
~*~ When in Hollywood, visit www.tracyberna.com ~*~

tracyberna
Offline
Regular
Los Angeles, CA
Last seen: 10 years 1 week ago
Los Angeles, CA
Joined: 2005-11-03
Posts: 18
Points: 0

Update on "CSS rollovers and dropdowns not working in IE"

I've continued tinkering with the above, and have gotten to the following point(Drunk:

    *I took out the "AlphaImageLoader" code altogether, because I got the impression it was just there to make transparent .pngs work in IE6, and it wasn't doing its job anyway.

    *Still the same problem in IE6, but everything works in IE7

    *Safari 3.1 for Windows is broken now, too (maybe it was before and I just missed it). It shows the rollover effect, but not the dropdowns.

The deets:
The site's still at www.metroencoding1.net
The CSS has changed, and can be found at the same place: http://metroencoding1.net/wp-content/themes/freshcitrus/freshcitrus/style.css

The header.php code now looks like this (from the conditional IE comment down):

<!--[if IE]>
	<style>
 
#navigation{
	height: 28px;
	padding-left: 0;
}
 
 #sidebar {
 	padding-top: 15px;
    margin-left:-85%;
	width: 100%;
}
 
 #sidebar li ul{
    width: 60%;
}
 
#left_services {
	width: 400px;
	padding: 0 20px 30px 20px;
	float: left;
    overflow:hidden;
}
 
#right {overflow:hidden}
 
 
	</style>
	<![endif]-->
 
 
<?php wp_head(); ?>	
</head>
<body>
 
<div id="main_bg">	
	<div id="nav-content">
 			<ul id="navigation">
            	<div id="sidebar">
					<ul>
				<?php wp_list_pages( ); ?>
                	</ul>
				</div>
            </ul>
	 </div>
 
	<div id="container">
 
		<div id="header">
			<h1><a href="<?php echo get_option('home'); ?>/"><span class="inv"><?php bloginfo('name'); ?></span></a></h1>
			<span id="description"><?php bloginfo('description'); ?></span>
		</div>
  </div>
  </div>

Thanks again, in advance.

----
~*~ When in Hollywood, visit www.tracyberna.com ~*~

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

I suggest you start at

I suggest you start at http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmetroencoding1.net%2F
looks like you are missing some closing tags which could be your problem.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

tracyberna
Offline
Regular
Los Angeles, CA
Last seen: 10 years 1 week ago
Los Angeles, CA
Joined: 2005-11-03
Posts: 18
Points: 0

Thank you Deuce. Just to

Thank you Deuce. Just to defend my geek cred for a moment, Wink I did validate the css before I posted here. I saw that there were some unfinished/overly finished tags and corrected them, but it didn't solve the problem at the time and messed with my layout ever so slightly, so I just put it back the way I had it - didn't feel like dealing with it if it didn't make the rollovers work. Now that I've changed some of the CSS, I'll fix the tags again, see if it makes a difference and report back.

Again, thanks!
Tracy

----
~*~ When in Hollywood, visit www.tracyberna.com ~*~

rejamesuk
Offline
Regular
uk
Last seen: 10 years 27 weeks ago
uk
Joined: 2009-01-10
Posts: 38
Points: 0

your putting the :hover on

your putting the :hover on the li which ie6 does not support. ie6 only supports :hover on a(links).

you will need to tell the link to display:block

tracyberna
Offline
Regular
Los Angeles, CA
Last seen: 10 years 1 week ago
Los Angeles, CA
Joined: 2005-11-03
Posts: 18
Points: 0

Okay, the way I understood

Okay, the way I understood it, was that I need to add an "a" and a "display:block" to any bit of CSS that was formerly using the "li:hover". To the conditional IE tag I already had in the header, I added the changes as I understood them... which didn't work. So I'm thinking maybe I don't understand them, or I have the syntax wrong, or something.

Here's what I added (added parts are bolded). Be sure and tell me of any embarrassingly obvious errors:

 /* initially hide submenus */
#sidebar ul li ul li <span style="font-weight:bold">a</span> ul li {
	visibility: hidden;
}
 
/* reveal them on hover */
#sidebar ul li ul li<span style="font-weight:bold">[space]a</span>:hover ul li {
	visibility: visible;
	width: 200px;
    display: block;
}
 
#sidebar ul li ul li<span style="font-weight:bold">[space]a</span>:hover, 
#sidebar ul li ul li.current_page_item,
#sidebar ul li ul li.current_page_item<span style="font-weight:bold">[space]a</span>:hover {
	background: url("images/navlist-hover.png") repeat-x;	
    display: block;
}
 
#sidebar ul li ul ul li<span style="font-weight:bold">[space]a</span>:hover {
	background: url("images/subnavlist-hover.png") repeat-x;	
	padding-bottom: 0;
    display: block;
}
 
#sidebar ul li ul ul li<span style="font-weight:bold">[space]a</span>:hover {
	color: #000;
    display: block;
}

I think it did make the hover states of the main menu work, but it only changed color behind the text itself, not the entire li, and the dropdowns still did not drop down.

I found something on the web that works for now, anyway: A guy named Dean Edwards made a thing called IE7, a bit of Javascript about which he says: "IE7 is a JavaScript library to make MSIE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6." You can even hotlink to it directly from Google's servers. (It's at http://dean.edwards.name/weblog/2008/01/ie7-2/) I did this and it fixed the problem for IE... but not for Safari, which will display the rollover states but not the dropdowns. So it still behooves me to, oh I don't know, figure out what the hell I'm doing, instead of flailing in the dark like I have been.

So... help? Still?

----
~*~ When in Hollywood, visit www.tracyberna.com ~*~

rejamesuk
Offline
Regular
uk
Last seen: 10 years 27 weeks ago
uk
Joined: 2009-01-10
Posts: 38
Points: 0

okay you need to set a width

okay you need to set a width and height when disply:block is used (for this purpose anyway)

_drilldown_ a:hover {
display:block;
width:200px;
height:20px;
}

the height means you can effectively jump between the links, keeping the hover effect.

ps. _drilldown_ = whatever selectors you need.