CSS Dropdown Menu Alignment Problem with only IE7 and below 1

[GD03]

I have a dropdown menu made purely with CSS and this code works perfectly on every major browser except IE7 and below. In IE7 the dropdown appears to the right of its parent. I've spent several hours trying to figure it out and am completely stumped. Any help would be greatly appreciated!

Here is the css:

#homepage #top-nav {
height: 29px;
padding-top: 3px;
border-top: 1px solid #c9c9c9;
background-image: url('

http://www.doubleverify.com/wp-content/themes/horngroup/images/homepage/top-nav-shading.png');

background-repeat: repeat-x;
text-align: center;
/*IE6&7*/*border-bottom: 1px solid #c9c9c9;
}
#homepage #top-nav a {
color: #083b87;
}
#homepage #top-nav ul {
list-style: none;
background-color: white;
}
#homepage #top-nav li {
display: inline-block;
padding: 0 16px 8px 16px;
font-size: 14px;
zoom: 1; /*required to display inline-block in IE6&7*/
/*IE6&7*/*display: inline; /*required to display inline-block IE6&7*/
/*IE6*/_height: 30px; /*required to display inline-block IE6&7*/
}
#homepage #top-nav li:hover > ul {
display: block;
}
#homepage #top-nav ul ul {
display: none;
position: absolute;
top: 145px;
padding: 8px 6px 11px;
margin-left: -22px;
border: 1px solid #c9c9c9;
background-image: url('

http://www.doubleverify.com/wp-content/themes/horngroup/images/homepage/top-nav-shading.png');

background-repeat: repeat-x;
background-size: 100%;
z-index: 1000;
text-align: left;
/*IE6&7*/filter: progidXImageTransform.Microsoft.AlphaImageLoader
(src='

http://www.doubleverify.com/wp-content/themes/horngroup/images/homepage/top-nav-shading.png',

sizingMethod='scale');
/*IE8*/ -ms-filter: "progidXImageTransform.Microsoft.AlphaImageLoader
(src='

http://www.doubleverify.com/wp-content/themes/horngroup/images/homepage/top-nav-shading.png',

sizingMethod='scale')";
}
#homepage #top-nav ul ul li {
display: block;
font-size: 11px;
line-height: 2em;
}

 

[ChrisHirst]

I don't see position: relative; anywhere in your CSS, without that your absolutely positioned elements will take their location from the body element.

http://webmaster-talk.eu/?topic=211.0

Everybody uses positioning but few know how it actually works.

IE7 in particular had problems with absolute positioning, do you REALLY need to support it?

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[GD03]

I do need to support absolute positioning in order to layer the dropdown over the rest of the elements on the site. Even when I give the parent ul a relative position I still get the same exact problem.

 

[GD03]

Here's the example I'm working with:

http://www.doubleverify.com/home-3/

Don't mind the design, it's still a work in progress

 

[ChrisHirst]

No, no do you need to support IE7, not absolute positioning.

And it's a fallacy that you NEED absolute positioning to "overlay" elements.

http://www.modtalk.co.uk/_site/code/css/positioning/relative/

position: absolute simply makes it easier by removing the element out of the document flow, but in doing so it can create a whole new set of problems.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[FrankknarF]

Any help would be greatly appreciated!

Here's a tutorial on making drop-down menus that describes and cures the problem you're having: Create a Drop-down/Fly-out Menu with CSS.

Be sure to follow all the steps, though (they are extremely easy, even if I say so myself).

How to: Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

 

[GD03]

Wow, whatever happened to the days when people actually helped each other instead of providing half an answer with a double dose of judgement. Thanks but I'll figure it out myself.

 

[Vragabond]

It's a bit hard to fully test, as I am unable to make quick changes in IE7, but I would attribute the problem to the 'inline-block' style of your parent li elements. IE7 treats the end an element (like with inline elements) as a starting point for the child element, whereas other browsers use the beginning of the element. I imagine changing the display to block and using float to keep all elements in a line would get rid of the IE7 issue. It will however introduce a lot of other issues.

Looking at your page, it seems to be functional in IE7 (just not pixel perfect) and that should be good enough. You might just want to increase the negative margin (although that is a very ugly solution) for IE7 through conditional styles to make it easier to use. If a large number of your users are using IE7 however, you should work to fix the problem using suggestion from above paragraph.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ChrisHirst]

Wow, whatever happened to the days when people actually helped each other instead of providing half an answer with a double dose of judgement.

I think many of us have learnt through experience that "spoon feeding" exact solutions to question rarely helps the question poser, whereas pushing you in the right direction of a solution helps them now and in the future.
It is the "teach a man to fish" principle.

Tek-Tips is NOT, and has never been the kindergarden and junior schools for the multitude of topics that are covered here. This is "big school" where you are taught how to learn for yourself.

Thanks but I'll figure it out myself.

Excellent plan, and hopefully what you have read here will assist you in that quest for knowledge.



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[GD03]

Again I say thanks for more judgement. Please continue the stereotype.

 

[johnwm]

@GDO3
I see that you are a very light user of the forum, with only 7 questions asked and ZERO answers to anyone else's questions, even though you've been using the site for more than 8 years. The general ethos of this site tends to follow Eric Raymond (

http://catb.org/~esr/faqs/smart-questions.html)

and expects people to do their own work rather than expect one-way freebies and free code writing. There are a number of FAQs on this site to give guidance on forum usage - try the one referenced in my sig for example.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[darryncooke]

Again I say thanks for more judgement. Please continue the stereotype."

I think you are doing a good enough job on your own.

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[weightinwildcat]

The link to the page that shows how to create a drop-down/fly out menu was a good tip. What is even better, there was a link that displayed a snippet of JavaScript code; I was able to adapt that to create a drop-down menu that works in Internet Explorer, FireFox, Opera, Google Chrome, and Safari. HOWEVER, there is still one problem. If I have more than 5 options in a drop-down menu, in Internet Explorer the options go off to the side rather than dropping down. Any thoughts on what to do?

Just to let you know, I started with the original code, and still had this problem.

Here is the original JavaScript:

javascriptHover = function() {
var hoverItem = document.getElementById("navDiv").getElementsByTagName("li");
for (var i=0; i<hoverItem.length; i++) {
hoverItem.onmouseover=function() {
this.className+=" jsHover";
}
hoverItem.onmouseout=function() {
this.className=this.className.replace(new RegExp(" jsHover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", javascriptHover);

And here is the CSS code:

#navDiv ul li {
position: relative;
}
#navDiv ul li:hover ul,
#navDiv ul li.jsHover ul {
position: absolute;
}

 

[FrankknarF]

Wow, whatever happened to the days when people actually helped each other instead of providing half an answer with a double dose of judgement.

I don't wanna judge the quality of my own tutorials, but if every time I asked a question I would be given a direct link to a tutorial that covers the topic like mine does your topic, I'd be the happiest man on earth.

How to: Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

 

[ChrisHirst]

Frank, I think the problem is that many people expect their answers to given to them with little or no effort on their part, and of course many discussion boards do cater to the "I don't want to learn, I just want to do" approach.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[feherke]

Hi

Yepp. Some people just have no idea about fun.

Merrin : - Why wouldn't you let me give you the solution ?

Carter : - What would have been the fun in that ?

Merrin : - Fun ?

Carter : - Well yeah. Figuring something out on my own, especially if it's been eluding me a while. It's far more satisfying than having the answer given to me.

Feherke.