CSS - Yet Another Drop-down Issue W/ Ie

If you look at the main menu(Home-About MCAEC-The Academy-Adult Education-Shining Star-Giving) on this page and hover over one of the parent categories you'll see issues with the positioning of the dropdown. I adjusted the margin and it looks fine in IE but the dropdown floats over the parent tabs in Firefox and Opera. Is there a way to adjust this so it's consistent in all browsers?
Here's the code for the dropdown ul ul li a:
Code:

#dropmenu { z-index:100; position:relative;}
#dropmenu .menu ul ul {z-index:99; margin:0; width:160px; background:url(images/bg_sub.png) top left no-repeat    !important; margin: 10px 0px 0px 0px ;  position: absolute; display:none; padding-bottom:10px !important; clear:both; padding-top:13px;}	
#dropmenu .menu ul ul li { line-height:inherit; height:auto; text-align:left; width:160px; text-align:left; line-height:1.69em;}
#dropmenu .menu ul ul li a{ font-weight: normal; color:#fff; font-size:13px; text-transform:none; }	
#dropmenu .menu ul ul li a:hover {  color:#edc951; font-weight:normal; }

Thanks

I have a drop down menu that is working fine in FF 3.5 but not in IE 7. Will you please have a look at it and help me find out where the conflict is? I am thinking it is a CSS issue but it may also be a javascript issue. The menu is he

http://bit.ly/42iVkG

and the menu script I used is he

http://bit.ly/4pvcXj

Thank you.

Hi everyone,

I am having an issue with IE7 (imagine that) with a css drop down nav menu. On IE8 and Chrome the menus work flawlessly but in on IE7 the menu is behind the pictures on the page. The page is located at www.philadler.com/newlayout2.php.

At first I thought it may be a z-index problem but the nav bar is set to 1000 and 900 depending on the menu and the thumbnails are set to 100.

As of now the site validates on both css and xhtml 1.0 transitional.

I can list any code if needed.

Thanks for any help

Phil

Hello All,

I have a left navigation bar that seems to be working perfectly in Firefox and Safari. However (I know, you've heard this before!), when I open the page in IE, there is no list appearing whatsoever. When I hover in a place outside of where the ul is supposed to be, I can find where the menu is, but it is not functioning well. Could someone please take a look and provide some insight? I have tried a few different things but they are mostly guesses as this is pushing my understanding of CSS a bit.

The menu is supposed to appear under the "Select a Tool" text...

029c92a.netsolhost.com/brushes.html

Best Regards,
Colin

I developed a drop down menu for the current site I'm working on. I used several on-line tutorials and the outcome was variable. Everything seems to work great in IE after the hack to fix the :hover elements, but I have never been able to get the drop downs to work in Firefox 3, Chrome, or Safari. Unfortunately I do not have the ability to test in a previous version of Firefox at the moment so I am unsure if it is just a version issue from when the tutorials were written.

The page in progress may be viewed at clcah.org.previewdns.com The specific CSS can be found in clc_common.css under the MENU section. Any insight would be greatly appreciated as I only anticipated trouble with IE.

Hey guys ,
I am looking to convert my css3 vertical nav bar , from the order of "DROP DOWN" to "DROP UP" .
The code i am using below is from a css3 gen. If anybody could show me what values to change it would be greatly appreciated ,

Code:

ul#css3menu,ul#css3menu ul{
	margin:0;list-style:none;background-color:#000000; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;-moz-box-shadow:1.4px 1px 2px #B1B1B1;-webkit-box-shadow:1.4px 1px 2px #B1B1B1;box-shadow:1.4px 1px 2px #B1B1B1;}
ul#css3menu ul{
	display:none;position:absolute;left:-1px;top:98%;padding:0;background-color:#202020; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.16),rgba(255,255,255,0));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0)));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;}
ul#css3menu li:hover>*{
	display:block;}
ul#css3menu li:hover{
	position:relative;}
ul#css3menu ul ul{
	position:absolute;left:98%;top:-2px;}
ul#css3menu{
	padding:6px 6px 6px 0;display:block;font-size:0;position:absolute;z-index:1000;left:10px;top:10px;}
ul#css3menu li{
	display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
	margin:0 0 0 6px;}
ul#css3menu ul>li{
	margin:6px 0 0;}
ul#css3menu a:active, ul#css3menu a:focus{
	outline-style:none;}
ul#css3menu a{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial,sans-serif;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;border-width:0;border-style:solid;border-color:transparent;}
ul#css3menu ul li{
	float:none;margin:0;}
ul#css3menu ul a{
	text-align:left;}
ul#css3menu li:hover>a{
	background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;font:12px Arial,sans-serif;color:#333;text-decoration:none; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));filter:progid:DXImageTransform.Microsoft.g  radient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#css3menu img{
	border:none;vertical-align:middle;margin-right:16px;width:16px;height:16px;}
ul#css3menu ul img{
	width:16px;height:16px;}
ul#css3menu img.over{
	display:none;}
ul#css3menu li:hover > a img.def{
	display:none;}
ul#css3menu li:hover > a img.over{
	display:inline;}
ul#css3menu ul span{
	background-image:none;padding-right:16px;}
ul#css3menu li.topitem>a{
	background-color:traspar;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;font:bold 13px Arial,sans-serif;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#css3menu li.topitem:hover>a{
	background-color:#00ff00; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.77),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));border-style:solid;border-color:#F8F8F8;font:bold 13px Arial,sans-serif;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,end  Colorstr=#B355AA00)}
ul#css3menu li.subfirst>a{
	border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px 9px 0 0;} 
ul#css3menu li.sublast>a{
	border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0 0 9px 9px;}

And here is the html
Code:

<ul id="css3menu">
	<li class="topitem"><a href="#" title="Item 0"><span>Item 0</span></a>
	<ul>
		<li class="subfirst"><a href="#" title="Item 0 0"><span>Item 0 0</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 0 0">Item 0 0 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 1"><span>Item 0 1</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 1 0">Item 0 1 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 2"><span>Item 0 2</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 2 0">Item 0 2 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 3"><span>Item 0 3</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 3 0">Item 0 3 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 4"><span>Item 0 4</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 4 0">Item 0 4 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 5"><span>Item 0 5</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 5 0">Item 0 5 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 6"><span>Item 0 6</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 6 0">Item 0 6 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 7"><span>Item 0 7</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 7 0">Item 0 7 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 8"><span>Item 0 8</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 8 0">Item 0 8 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 9"><span>Item 0 9</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 9 0">Item 0 9 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 10"><span>Item 0 10</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 10 0">Item 0 10 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 11"><span>Item 0 11</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 11 0">Item 0 11 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 12"><span>Item 0 12</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 12 0">Item 0 12 0</a></li>
		</ul>

		</li>
		<li class="sublast"><a href="#" title="Item 0 13"><span>Item 0 13</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 13 0">Item 0 13 0</a></li>
		</ul>

		</li>
	</ul>

	</li>
</ul>

This is probably a tall order any advice is appreciated , TYVM

Hello all,

I'm trying to fix my drop down so it goes straight down. I originally had it so it was reading the javascript but after adjusting it quite a bit, it spans the whole parent nav bar and is completely in css. I don't mind that it's in css but I want visitors to be able to see it in ie because ie own's a good 75% of the browser population. Here is my site, i still have the javascript file in there but it doesn't do anything anymore. Any clues on how to get it so it goes straight down and is viewable in ie? Site

Hello everyone,

I have a drop-down menu that is currently working well.

The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned.

I want the menu to "drop" down and to the left, so the right edges are aligned.

I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed.

Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use.

Thank you!

Here is the page: http://www.littlebuddymedia.com/site05/012.html



The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif



I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG

Here is my code:

Code:

.chromestyle{
     width: 100%;
     font-weight: bold;
     float: left;
     height: 29px;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}

WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE?



w w w. jaywayproductions . c o m/portfolio/work_history.html


It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated!

Hello

I am having difficulties with a site I am working on. First, if you look at it in IE and roll your mouse to the right of the site the whole thing shifts to the left. No idea why it does this.

Second: In Firefox it looks like a disaster! Help!

http://www.tombraiders.net/katie/shelly/index.html

User: letme
Pass: in

Thank you!

Hi everyone,

For years I've been using tables solely to position elements on web pages but it's come to my attention that this is now "frowned" upon in the web community so I figured if I'm going to start doing things the more common way (with DIVs) I might as well start now. I'm not a professional website developer (C programmer here...eek! haha), but I do part time web work for some important clients of mine.

So I have a very simple layout done with DIVs/CSS to start (code at the bottom). The problem is when you render it you'll see a large gap between the bottom of the layout and bottom of the page. My hypothesis is that this is due to where the "DIVs" would normally have been, except I moved them around. It sounds very similar to the problem encountered he

http://forums.devshed.com/css-help-116/how-to-remove-blank-space-at-bottom-554773.html

but I don't see what he did to solve it.

Note that ultimately what I want is only the "header" and "footer" to have a fixed width/height. The leftcol and content should have fixed widths, but height grow with what ever is in them. And it should be centered in the page the way it is now. I tried various "text-wrap" and "height: 100%" and a few different codes but no luck. I really don't want to have to give up on DIV's but I am finding them a tad frustrating .

I've altered the code from here (http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/). I tried "floating" them but that didn't seem to help either or is messes up my centering, plus I don't want it expanding to different resolutions.

Thanks in advance if you can give a DIV newbie a heads up.
Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>TWO-COLUM FIXED LAYOUT
WITH FIXED BOXES</title>
  <style type="text/css">
<!--
#header {
background: #0f0;
position: relative;
z-index: 1;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: relative;
z-index: 2;
top: 0px;
left: -325px;
width: 150px;
height: 600px;
}
#content {
background: #ff0;
position: relative;
z-index: 3;
top: -600px;
left: 75px;
width: 650px;
height: 600px;
}
#footer {
background: #0f0;
position: relative;
z-index: 4;
top: -600px;
left: 0px;
width: 800px;
height: 100px;
}
-->
  </style>
</head>
<body style="margin: 0pt;">
<div align="center">
<div id="header">Header
Section</div>
<div id="leftcol">Left
Section
<p align="left">
Test
</p>
</div>
<div id="content">Content
Section</div>
<div id="footer">Footer
Section</div>
</div>
</body>
</html>

Hello Guys,

I am trying to get the the css to work but having a hard time with it and need some help..

Here is the content lined up in fire fox.

http://content.screencast.com/users/dank2009/folders/Jing/media/4198ca5c-6c75-4196-a2e7-ba1c423caca7/2011-08-22_1550.png

Ad this is what it looks like in IE (See my issue)
http://content.screencast.com/users/dank2009/folders/Jing/media/c9f0dcd6-19c9-48f6-83f8-9c55d7417fcc/2011-08-22_1551.png

Here is the code

Code:

echo '<div class="listing"><img src="'.$listing_photo.'"><span class="listlink"><a href="index.php?content=subcats&id='. $listing_id.'">'.$listing_title2.'</a></span><br><span class="listbody">'.$listing_body2.'<span class="readmore"><a href="index.php?content=subcats&id='. $listing_id.'">&nbsp;&nbsp;Read more</a></span>>>></div>';

Here is the CSS
Code:

.listing {
	width:560px;
	height:auto !important;
	margin: 0 auto;
	text-align: left
}
.listlink {
    float:left;
    margin-left: 10px;
    margin-top: 20px;
    position: absolute;
    text-decoration:underline;
}

.listbody {
	float: left;
    margin-left: 110px;
    margin-top: -30px;
    width:440px
}

.listingdiv{
	border-bottom: 2px dotted #9EABB5;
	color:#FFF;
}

Please advise how to fix this..

Thanks for your help in advance..
Dan

I'm having trouble pinning down an issue with just one part of a page. I can't seem to figure out if the issue is a css issue or an HTML issue. I have a tab that is under a picture that has a floating height and fixed width. Under the picture when the page first loads a div element that is supposed to be a css tab seems to float over it until I reload the page. When the page is reloaded the tab moves back to its static position.

This only happens in IE7 by the way.

http:// idatedsatan . net / ewzine / index.html

I've posted this before and the last time I was using a really bad workaround to get this drop down to work in IE. Now I'm using the suckerfish method, and it seems to work fine in firefox, opera, ie7, but in ie6 the drop down is offset and I think it's due to the container being offset. I'm not sure how I can make this work in ie6. Also there is supposed to be a background in the dropdown, but that's not showing up in ie6 either.

Please help me if you can, much appreciated.

Hi there,

First I should mention, I have been doing a lot of research to learn CSS, and this is basically the first time implementing it for my company's website. I have A LOT to learn still! I'm using Dreamweaver MX and MX 2004 (2004 seems to keep crashing on me today, and i can't run it)...anyways...

I am working on a dropdown menu using pure CSS....WHICH is a library item that I am dropping into a table cell below the top banner on the index page, and others.

However, I'm having problems with some styling and the best way to work some things.

First, if you click he

Interface

I hope someone can help me!! I'm so frustrated!



You can see HOW I want the nav to look.

I seem to have a problem with the aligning of the text, as well as roll over effects: basically, I would like my nav button to turn blue w/ white text. And I'd like to have my buttons closer together, having it look as close as possible to my interface img above.

Also having issues w/ IE...which I assume would happen.

Here is my CSS and HTML code (remember, no body or title tags because it's an lbi item:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;


}

#nav a {
display: block;
width: 10em;
color: rgb(0,50,94);
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
}

#nav li {
float: left;
width: auto;


}

#nav li ul {
position: absolute;
background: #C5D1DC;
width: 10em;
left: -999em;
margin: 3px;
border: 1px solid rgb(0,50,94);
padding:5px;

}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

.button {
background-color: #C5D1DC;
padding: 3px;
border-top: 1px solid #003A66;
border-right: 0px solid #003A66;
border-bottom: 1px solid #003A66;
border-left: 0px solid #003A66;
}
</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>




<ul id="nav">

<li class="button"><a href="#">Products</a>
<ul>
<li cla><a href="#">Audio</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Home Automation</a></li>
<li><a href="#">Lighting</a></li>
<li><a href="#">PDF Downloads</a></li>
<li><a href="#">Part Index</a></li>

</ul>
</li>

<li class="button"><a href="#">News and Events </a>

<ul>
<li><a href="#">New Products</a></li>
<li><a href="#">User Profile</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Tradeshows</a></li>
<li><a href="#">Newsletter</a></li>

</ul>
</li>

<li class="button"><a href="#">Order</a>
<ul>
<li><a href="#">Distributor List</a></li>
</ul>
</li>

<li class="button"><a href="#">Corporate</a>
<ul>
<li><a href="#">Company Bio</a></li>
</ul>
</li>

<li class="button"><a href="#">Technical Resources</a>
<ul>
<li><a href="#">Connector Cross Reference</a></li>
<li><a href="#">Wire Gage</a></li>
<li><a href="#">Glossary</a></li>
</ul>
</li>


</ul>



(IF you need me to, I can send you my site files over email) I really really appreciate all the help you guy's can give me! I'm on a tight deadline, and I really want to use CSS. If I can't get this to work, I have to take out the drop down menu all together and go w/ a boring static menu system that will add in numerous extra pages....

THANKS!

Valerie