|
| |
|
|
c1sissy
Posts: 5079
Joined: 7/20/2002
From: NJ
Status: offline
 |
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.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
|
|
|
|
pmagas
Posts: 367
Joined: 3/26/2002
From: St. Louis MO USA
Status: offline
|
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!
Thumbnail Image
 Attachment (1)
_____________________________
Penny
humble webmaster of
We Sell St. Louis
http://www.WeSellStLouis.com
http://www.MarkSellsStLouis.net
http://www.St-Louis-Mo.info
http://www.NealSellsStLouis.com
| |
|
|
|
Suzy.
Posts: 9
Joined: 12/2/2004
Status: offline
|
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 ..
< Message edited by Suzy. -- 11/6/2006 21:22:49 >
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
< Message edited by Tailslide -- 11/16/2006 2:50:03 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
HubUK
Posts: 7
Joined: 11/15/2006
Status: offline
|
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
Posts: 7
Joined: 11/15/2006
Status: offline
|
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.
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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...
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
HubUK
Posts: 7
Joined: 11/15/2006
Status: offline
|
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
Posts: 7
Joined: 11/15/2006
Status: offline
|
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
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
< Message edited by Tailslide -- 11/16/2006 11:29:32 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
HubUK
Posts: 7
Joined: 11/15/2006
Status: offline
|
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
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Electric Voodoo
Posts: 3
Joined: 1/12/2007
Status: offline
|
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
Posts: 367
Joined: 3/26/2002
From: St. Louis MO USA
Status: offline
|
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!
_____________________________
Penny
humble webmaster of
We Sell St. Louis
http://www.WeSellStLouis.com
http://www.MarkSellsStLouis.net
http://www.St-Louis-Mo.info
http://www.NealSellsStLouis.com
| |
|
|
|
Electric Voodoo
Posts: 3
Joined: 1/12/2007
Status: offline
|
RE: Drop down menu & IE7 - 1/12/2007 17:18:42
Didn't work. Could you email me those files?
Thanks!
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Electric Voodoo
Posts: 3
Joined: 1/12/2007
Status: offline
|
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!
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
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. 
you can't get the mouse over there to click. 
But, once it's done this time, it will be EVER so much easier to make changes. 
