General Question

Evan's avatar

CSS dropdown menu crisis with IE 7...

Asked by Evan (800 points ) August 7th, 2007

I have a set up dropdown menus that contains images, and everything worked perfectly in Firefox, as usual.. and at first it wouldn't work with IE6 either, until i applied a fix.. and i've even tried a fix that is supposed to work with IE 7, but doesn't seem to be. below is the code i added in:

/* clear fix */
/* --------------------- */

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-table; min-height:1%;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

and the site, where you can see the code, etc is:
http://www.mosaicfound.org/NEW/home/home.php

I don't know that this code is perfect, but it hadn't worked for IE 7 yet, and there are still spaces around the menu bars, as you'll see if you have IE 7 on your computer and visit the webpage below.

Observing members: 0 Composing members: 0

3 Answers

sferik's avatar

Your first problem is that you've defined the .clearfix CSS class in the HEAD of your document but you have not applied it to any of the elements in the BODY. The page where you apparently found this solution states: "For the HTML, just add a class of .clearfix to any element containing a float needing to be cleared, plus any Guillotine-Bug-fixing block elements within the container."

Evan's avatar

heh.. sry to not be more clear.. I'd already tried adding .clearfix to the elements in the BODY, and it wasn't working. I was posting that code up there mostly to show what the most recent thing i'd been trying was... also to find out whether or not it was perhaps a viable solution, but that maybe i'd been applying it to the wrong elements in the body.

at this point though, i'm leaning toward thinking that it's an issue having something to do with the fact that it's images that are stacked on each other.. i've tried using the exact same code, but with text links in place of the images, and there are no spacing issues whatsoever.. where as w/ the images, there are gaps btwn them on IE7 only..

also i reread my question above.. and apologize for being pretty unclear - i was a bit tired last night when i posted it.. i appreciate any help that you can offer..

kullervo's avatar

Looks ok in IE7 now – is it all sorted?

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther