Drop down menu & IE7 (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

pmagas -> Drop down menu & IE7 (10/26/2006 18:37:00)

I'm in the final stages of my site re-design using css. I had some nice drop-down menus that worked fine in IE6, Firefox & Netscape. I used css that I found at alistapart.com using the Holly Hack.

Looking at my site in IE7, the drop-down menu doesn't work. [:(] I found quite a bit of information today that indicated that IE7 would work fine without the hack. So I created a duplicate style sheet. The main one (used for all other browsers and IE7) does not have the Holly Hack. The conditional comment refers to a style sheet with the Holly Hack (for IE6 and lower.) IE6 and the other browsers still work fine. Still no go for the IE7.

The page I'm working on is this test page. The problem area is the drop-down in the upper left - Buyers, Sellers, Investors. In IE7 the list comes down on the same level and to the right - unless you're incredibly 'quick on the draw' [sm=unsure.gif] you can't get the mouse over there to click.

Update: I found more information. I'd forgotten that there were two hacks involved - the other was the Suckerfish DropDowns. I removed that from the css for IE7 and all others and it works with one exception: After the first link in the list, each word of the link is on a separate line. Any ideas how to fix that? It's only in IE7 as far as I know. (I've tested on Firefox 1.5 & 2, IE7 and Netscape 8. I haven't tested on Opera or Mac)

Thank you for any information and/or help you might offer.

Cheers!



c1sissy -> RE: Drop down menu & IE7 (10/27/2006 8:21:48)

According to articles that have come out, the star hack isn't going to work, as far as I know, in IE7. You would be much better off using IE conditional statments

Here is a great starting point for some information for you in regards.

You might find something that would work for you.



pmagas -> RE: Drop down menu & IE7 (10/27/2006 14:23:26)

Thank you, Deb!! Actually, I did remove all the hacks for IE7 and it *almost* works. (I put in the conditional comments for IE6 and lower.)

It works fine on all the browsers (well, those that I tested), but on IE7, the appearance is 'goofy'

On the pulldown from Buyers, the links look like those on the attachment. (The first line is fine; after that they wrap real short.)

Custom Search
Search
Homes
Buying
a Home
Use an
ePro

It's not wrapping them correctly (from the 2nd line on), but I can't figure out why. It wraps them fine in the other browsers. Here's the CSS for this: 

.secNav {
float:left;
width:95%;
padding-left:5%;
top:0;
color:#FFF;
padding-bottom:10px;
background-color:#000;
}

.secNav ul {
list-style:none;
color:#FFF;
margin:0;
padding:0;
}

.secNav ul li {
line-height:18px;
position:relative;
float:left;
font-size:18px;
color:#FFF;
list-style-type:none;
}

.secNav li ul {
display:none;
position:absolute;
min-width:150px;
top:1.5em;
left:0;
background-color:#DCC7A6;
border:1px solid #000;
font-size:12px;
}

.secNav li ul li {
font-size:12px;
}

.secNav li ul a:hover {
color:#D14B08;
border-bottom:0;
}

.secNav li > ul {
top:auto;
left:auto;
}

.secNav li:hover ul,.secNav li.over ul {
display:block;
clear:left;
padding:3px;
}

.secNav li:hover ul li,.secNav li.over ul li {
display:block;
clear:left;
}

.secNav a {
padding-left:2px;
padding-right:2px;
color:#fff;
text-decoration:none;
font-weight:700;
}

.secNav li ul a,.secNav a:hover {
color:#000;
}


Thank you for any insights you might offer!
Cheers!

[image]local://upfiles/5013/BD86200DC22A45459159C86966429CFB.jpg[/image]



c1sissy -> RE: Drop down menu & IE7 (10/27/2006 14:35:30)

Here is a good thing to remember, ID's are good for sectional spots on your site, divs etc.. try puting this:.secNav as this #secNav

Then since I am not at this moment familiar with IE7 & don't have two machines to run things on to test, I'm not willing to load it up yet.

If, btw anyone is able to supply a method to do so, please start a thread in here for doing so!

And your welcome. I"m off to fix that other thing that we pm'd about [;)]



Suzy. -> RE: Drop down menu & IE7 (11/6/2006 3:22:22)

it's wrapping the text like that because the li's are floated without widths so they're shrink wrapping.

.......
edit: took out completely wrong information - see next post (2 down) for something to try

I had changed something in the original code, then promptly forgot about it so I was working off the wrong base and going off on a tangent!

my apologies ..



jaybee -> RE: Drop down menu & IE7 (11/6/2006 6:49:01)

Watch it Claire, you'll end up as resident expert. [:D]



Suzy. -> RE: Drop down menu & IE7 (11/6/2006 21:13:58)

Nah not quite, but thanks :)

I came back later to check on my reply after a browser crash which took HTML-Kit with it :( and then I found I couldn't replicate what I'd explained DOH! - I don't know what I changed, or if the page code changed, but I haven't a copy of what I used originally - but I have another, easier answer I hope

don't change a thing, simply add this line.. 
.secNav li ul li a {display: block; min-width: 150px;}


All that's doing is forcing the anchors themselves to control the min-width, and I've left them floating now too as it seems to not mind either way!

however do report back if that's not working, I'm sure when I tried that earlier that didn't work - but hey it's been a long day! [sm=BangHead.gif]




pmagas -> RE: Drop down menu & IE7 (11/7/2006 16:24:15)

Suzy - you're amazing!!! It works like a charm!! Thank you SO very much!! Now that I have the CSS going, I have to get the rest of the site dropped into it. [:o] But, once it's done this time, it will be EVER so much easier to make changes. [:)]

I can't thank you enough!!!

Cheers!!!



HubUK -> RE: Drop down menu & IE7 (11/15/2006 19:41:40)

I have only just joined these forums – not sure how I found them – as a result of a friend telling me about a problem I have with a web site I have created. It is the dropdown menu problem with IE7.

I have only used CSS to create dropdown menus on the site and am very far from being an expert. I am not sure whether the solution is simple or complicated but at the moment I am in panic mode as I don’t have a clue what to do about the problem.

My own site uses horizontal menus as these seem to work fine in IE7 but the dropdown menus on this site www.italywithrelish.it are not working at all.

Can anyone point me in the right direction before I start fiddling and cock the whole thing up?

[:(]



Tailslide -> RE: Drop down menu & IE7 (11/16/2006 2:44:51)

I'm about to go take the kids to school so this isn't a tested solution but you could try this:

IE doesn't understand :hover links it incorrectly uses :active instead so it's possible that by adding an active rule to the hover rule you might get your dropdowns to drop:

So add the active rule after the hover one like this: 

div#menu ul li:hover ul, div#menu ul li:active ul {display: block;}


In the same way, if you have any other hover rules you might need to add an active version afterwards.

You never know, that might work!! Let us know what happens (or doesn't!).

Edit: Oh and if you're using CSS for anything except font colouring you absolutely must use a DOCTYPE - browser behaviour is very unpredictable without it.

In your case, I'd go for this one: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Add that in before everything else right at the top of the page

With that in place all good browsers plus IE6 & 7 will be using "Standards" mode and will be much closer together in the way they show the page.



HubUK -> RE: Drop down menu & IE7 (11/16/2006 9:46:04)

I thought I would start off by inserting the DOCTYPE with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I had not realised how important this is.

Having done that I tested the page and my dropdown menus were back without me having to do anything else.

One problem though!

My dropdowns now work but they are all offset. Before I start fiddling (and possibly make things worse) I thought I would ask if there is a simple explanation for this. This is the amended site:

www.italywithrelish.it




HubUK -> RE: Drop down menu & IE7 (11/16/2006 9:57:03)

I have just noticed that as a consequence of that cahnge all my text is now wrongly aligned in IE.

Enough to drive you to drink! All I want is a quiet life where I can get on with my day to day work adding material to my main site.



jaybee -> RE: Drop down menu & IE7 (11/16/2006 10:20:52)

Don't we all, it is unfortunately one of those things you have to put up with as a web designer. [:D]

First off, fix your page title that says ITALAIN instead of ITALIAN.

Then try fixing the errors in the code

Then any errors in the css

Before you do either of those you might want to change the doctype from XHTML to HTML 4 transitional which is less strict 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


There's a full list of Doctypes here



Tailslide -> RE: Drop down menu & IE7 (11/16/2006 10:49:54)

Jaybee - he's got a lot of closing tags in there so he might be better off with XHTML trans rather than HTML trans - otherwise he might have to start removing closing tags...



HubUK -> RE: Drop down menu & IE7 (11/16/2006 10:54:16)


quote:

First off, fix your page title that says ITALAIN instead of ITALIAN.


That isn't a mistake. It is a common spelling mistake and the client wants it like that as it gets found on Google.

quote:

Then try fixing the errors in the code

Then any errors in the css


I am happy to do this if I knew what the errors were. No one source seems to have all the information that is needed to do the job. I used the menu from this site to do another site and when I tried it (after cutting and pasting the code) it wouldn't work. I started again from scratch and it worked but I didn't have a clue why and therefore learnt nothing.



HubUK -> RE: Drop down menu & IE7 (11/16/2006 10:58:22)

quote:

ORIGINAL: Tailslide

Jaybee - he's got a lot of closing tags in there so he might be better off with XHTML trans rather than HTML trans - otherwise he might have to start removing closing tags...

Which closing tags are you referring to. I thought all HTML apart from <br> needed clsoing tags.



Tailslide -> RE: Drop down menu & IE7 (11/16/2006 11:07:30)

quote:

ORIGINAL: HubUK

Which closing tags are you referring to. I thought all HTML apart from <br> needed clsoing tags.


In XHTML all tags must have closing tags (including <br />).

In HTML it's actually incorrect for them to have closing tags in general (it's been a while since I've used HTML so I'm not sure if there are any exceptions).

There's not a lot of difference between the two transitional DOCTYPES except that because you've got closing tags already you might as well stick to the XHTML one.



jaybee -> RE: Drop down menu & IE7 (11/16/2006 11:18:10)

quote:

Jaybee - he's got a lot of closing tags in there so he might be better off with XHTML trans rather than HTML trans - otherwise he might have to start removing closing tags...
OK, I didn't look in the code just ran it through the validator.

quote:

Which closing tags are you referring to. I thought all HTML apart from <br> needed clsoing tags.


In XHTML br needs to be <br /> ie, yes it needs a closing tag.

As far as what's correct for the errors, have a read of the tutorials and examples on www.w3schools.com. ANy that you still can't fix come back and ask.



HubUK -> RE: Drop down menu & IE7 (11/16/2006 15:41:07)

I now have IE 7 running on my system (along with Firefox). If I start fiddling with my dropdown menu how am I going to know that it still works in IE 6?



Tailslide -> RE: Drop down menu & IE7 (11/16/2006 17:03:02)

Either get an IE6 standalone (Google is your friend there), get a group browsercam membership or ask people here who have IE6 to check for you.



Electric Voodoo -> RE: Drop down menu & IE7 (1/12/2007 16:29:45)

I'm having a problem with a menu in IE7 using the same code taken from alistapart.com.
You can view it at http://www.bigredr.com. Only the text on the menu becomes a link, and not the entire menu. This makes it impossible to click on the links in the flyout menus.

Any help would be appreciated!



pmagas -> RE: Drop down menu & IE7 (1/12/2007 17:08:33)

Hi! First I should tell you I'm not a CSS expert by any stretch of the imagination. But here's my understanding and what worked for me:

You'll need to have two stylesheets - one for IE version 6 & older (less than or equal to ver 6) and one for everything else (IE7, Firefox, etc.)

Rename your current stylesheet as old-ie.css and add this in the head of each page:
<!--[if lte IE 6]>
<link href="old-ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Then prepare your stylesheet for all others by doing the following:
Take out all the hacks from your css file. That would include line 42, lines 48-51 and the li.over

If you have any trouble, let me know and I can email you my files so you can see my exact code.

Cheers!



Electric Voodoo -> RE: Drop down menu & IE7 (1/12/2007 17:18:42)

Didn't work. Could you email me those files?

Thanks!



Tailslide -> RE: Drop down menu & IE7 (1/13/2007 3:50:37)

Might be a "haslayout" issue (IE problem - don't ask, I really don't understand it myself) which is dealt with for IE6 and under by having height:1% in the star hack in the stylesheet.

To check if this is it, add zoom:1 into the ul li a css rule in your stylesheet.

This isn't valid CSS so you shouldn't leave it in the stylesheet just use it for debugging - but if that sorts it out then you can add in height:1% into a IE7 and upwards conditional stylesheet.



Electric Voodoo -> RE: Drop down menu & IE7 (1/16/2007 9:39:01)

quote:

This isn't valid CSS so you shouldn't leave it in the stylesheet just use it for debugging - but if that sorts it out then you can add in height:1% into a IE7 and upwards conditional stylesheet.


Worked! Except that I also had to put
background: #fff; /* IE6 Bug */
back into the IE7 and upwards conditional stylesheet.

Thanks!



Tailslide -> RE: Drop down menu & IE7 (1/16/2007 9:52:10)

Yay! Glad it works now.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.109375