View Full Version : A very simple CSS menu and IE5
s_ivan10
Sep 9, 2004, 06:46 AM
I have a strange problem with a very simple CSS menu I built in IE5/Mac. I would appreciate it if someone who is a IE/Mac/CSS specialist could take a look and help me out. The code is really very simple and I have no idea what confuses IE so much :confused:
The menu works just fine on all Windows, Linux browsers and Safari but IE5 produces weird effect. Here is the link- http://80.72.74.155:8000/sample1.html
And here's how it looks in IE 5.2.3 and Safari 1.2: http://80.72.74.155:8000/screenshot.gif.
Thank you in advance! :)
Yvan256
Sep 9, 2004, 07:43 AM
Hi,
you might want to read this page:
http://alistapart.com/articles/taminglists/
The idea that navigation is a list (and lists within your list if you have more than one level of navigation) will also help your non-CSS visitors.
Hope this helps,
Yvan256
Give this a try....
I did away with the javaScript because it did not appear that it was doing anything a simple a:hover state could not. I also changed the menu structure to an unsorted list, I personally feel that this method is cleaner then using multiple div's.
In your markup, the toolbarHolder div is not closed.
Let me know if you have any questions.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sample</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #fff;
font: 12px verdana,arial,sans-serif;
color: #4A49A8;
}
/* CSS FOR THE TOOLBAR */
ul#toolbarHolder {
margin: 30px;
padding: 0;
width: 150px;
border: 5px solid #EEE;
}
ul#toolbarHolder li {
list-style: none;
}
ul#toolbarHolder a {
display: block;
padding:3px;
color:#000;
border: 1px solid #FFF;
background:#FFF;
text-decoration: none;
}
ul#toolbarHolder a:hover {
border-color:#749ABE;
background:#E7EAEF;
color:#000000;
}
</style>
</head>
<body>
<ul id="toolbarHolder">
<li><a href="#">Blah</a></li>
<li><a href="#">Blah</a></li>
<li><a href="#">Blah</a></li>
<li><a href="#">Blah</a></li>
</ul>
</body>
</html>
s_ivan10
Sep 9, 2004, 08:30 AM
Yvan256, I know it's better to use lists for the links but I had some very nasty problems with them on IE5/Win and that's why I decided to not use list in the case. Thanks for the suggestion, anyway! :)
zim, thank you very much! :) Does this look OK in IE5/Mac? Unfortunately I don't have a Mac here and can't test it on my own :( And also I would really appreciate it if someone could make the original structure work on IE (just by modifying the CSS). I know it's not very clean (especially with those DIVs around the A elements ;)) but I have my reasons to use exactly this markup.
I suppose the main problem in my case is coming from the fact that I MUST use relative positioning for the A elements. And this probably confuses IE.
PS: I corrected the closing tag for the toolbarHolder div. Thanks for noting it! :)
Yvan256, I know it's better to use lists for the links but I had some very nasty problems with them on IE5/Win and that's why I decided to not use list in the case. Thanks for the suggestion, anyway! :)
zim, thank you very much! :) Does this look OK in IE5/Mac? Unfortunately I don't have a Mac here and can't test it on my own :( And also I would really appreciate it if someone could make the original structure work on IE (just by modifying the CSS). I know it's not very clean (especially with those DIVs around the A elements ;)) but I have my reasons to use exactly this markup.
I suppose the main problem in my case is coming from the fact that I MUST use relative positioning for the A elements. And this probably confuses IE.
PS: I corrected the closing tag for the toolbarHolder div. Thanks for noting it! :)
Yes, the modifications that I made work on the Mac.
Here is the answer to your problem, within your markup:
.subIndicator {
position:absolute;
top:6px;
right:7px;
width:5px;
height:9px;
overflow:hidden;
}
If you take out position: absolute; top: 6px; from your .subindicator class then IE Mac will render it fine. You could also due away with the overflow: hidden; for it does not appear to be doing anything.
I personally think that you have a lot of mark up for a simple menu system, I would highly recommend giving the a:hover some great consideration vs using the javaScript.
I also feel pretty confident with the unsorted lists, even on windows but you should do what is best for you.
Positioning could be added into my example as well, I did not leave it it due to not knowing what was going to become of it.
Hope that helps :D
s_ivan10
Sep 9, 2004, 09:21 AM
zim, thank you very much! :) You really helped me a lot!
It's weird how the absolute position of the sub indicator span causes the problem :confused:
Anyway, could you please take a last look. :o I put the span out of the A element and I now have the strange feeling it will work in IE (although I made the code even more complex). Thank you and sorry for bothering you again! I promise to not do it anymore! :)
zim, thank you very much! :) You really helped me a lot!
It's weird how the absolute position of the sub indicator span causes the problem :confused:
Anyway, could you please take a last look. :o I put the span out of the A element and I now have the strange feeling it will work in IE (although I made the code even more complex). Thank you and sorry for bothering you again! I promise to not do it anymore! :)
Happy to help.
I attached a preview for you, comparing ie to safari. There is a size difference, other then that they work fine.
No apologies, love to help, takes my mind off my own css ie issues ;)
Good luck with the rest of the site!
s_ivan10
Sep 9, 2004, 09:58 AM
A final THANK YOU, zim! :) You saved my life! ;)
I definitely can live with the size difference.
Unfortunately IE is obviously terrible on all platforms... :mad:
Anyway, good luck to you too with everything! :)
A final THANK YOU, zim! :) You saved my life! ;)
I definitely can live with the size difference.
Unfortunately IE is obviously terrible on all platforms... :mad:
Anyway, good luck to you too with everything! :)
:D Anytime!
vBulletin® v3.8.6, Copyright ©2000-2012, Jelsoft Enterprises Ltd.
