Toggle sidebar Toggle sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

A very simple CSS menu and IE5

S

s_ivan10

macrumors newbie
Original poster
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 😕

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:
screenshot.gif
.

Thank you in advance! 🙂
 
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.

Code: 
<!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>
 
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! 🙂
 
s_ivan10 said:
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! 🙂
Click to expand...

Yes, the modifications that I made work on the Mac.

Here is the answer to your problem, within your markup:
Code: 
.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 😀
 
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 😕

Anyway, could you please take a last look. 😱 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! 🙂
 
s_ivan10 said:
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 😕

Anyway, could you please take a last look. 😱 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! 🙂
Click to expand...

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!
 

Attachments

  • ievssafari.jpg
    ievssafari.jpg
    15.1 KB · Views: 131
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... 😡

Anyway, good luck to you too with everything! 🙂
 
s_ivan10 said:
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... 😡

Anyway, good luck to you too with everything! 🙂
Click to expand...

😀 Anytime!
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back