List problem ( drop down menu) on IE only

[demon_athens]

I am newbie building drop down menus with css so I have this problem. If anyone can help I would be great.

 

My dropdown menu looks ok through firefox but wrong on IE. you can see a capture from both browsers in case you understand what IE needs to act the same as firefox.

 

css code

.pro_linedrop {
height:35px;
width:603px;
background:url(../lrimages/black_0.gif);
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
z-index:500;
margin:0; padding:0;
}

.pro_linedrop .select {
margin:0; 
padding:0; 
list-style:none; 
white-space:nowrap;
}

.pro_linedrop li {
float:left;
background:url(../lrimages/black_1.gif);
margin:0; padding:0;
}

.pro_linedrop li.lrt {
float:right;
background:url(lrimages/blue_1.gif);
margin:0; padding:0;
}


.pro_linedrop .select a {
display:block; 
height:35px; 
float:left; 
background: url(../lrimages/black_0.gif); 
padding:0 0 0 10px; 
text-decoration:none; 
line-height:33px; 
white-space:nowrap; 
color:#fff;
}


.pro_linedrop .select li.lrt a {color:#fff;}


.pro_linedrop .select a b {
display:block;
padding:0 20px 0 8px; 
background:url(../lrimages/black_0.gif) right top;
}

.pro_linedrop .select li.line a b {
background:url(../lrimages/black_0a.gif) right top;

}

.pro_linedrop .select a:hover, 
.pro_linedrop .select li:hover a {
background: url(../lrimages/black_1.gif); 
padding:0 0 0 10px;
cursor:pointer; 
color:#fff;
}



.pro_linedrop .select a:hover b, 
.pro_linedrop .select li:hover a b {
display:block; 
padding:0 20px 0 8px; 
background:url(../lrimages/black_1.gif) right top; 
cursor:pointer;


}

.pro_linedrop .select li.line a:hover b, 
.pro_linedrop .select li.line:hover a b {
background:url(../lrimages/black_1a.gif) right top; 

}



.pro_linedrop .sub {
display:none;

}
.pro_linedrop ul ul {display:none;}

/* IE6 only */
.pro_linedrop table {
border-collapse:collapse; 
margin:-1px; 
font-size:1em; 
width:0; 
height:0;

}

.pro_linedrop .sub {
margin:0; 
padding:0;
list-style:none;

}

.pro_linedrop .sub li {background:transparent; margin:0; padding:0;}

.pro_linedrop .select :hover .sub {
/*height:130px;*/
display:block;
position:absolute;
width:170px;
top:35px;
text-align:left;
background:#fff url(../lrimages/fade.gif);
border:1px solid #aaa;

margin:0; padding:0;
	/* margin-left: -108px;  <---------------- this somehow fix a bit the problem on IE, but again its not ok.*/


}

.pro_linedrop .select :hover .rt li {float:left;}

.pro_linedrop .select :hover .sub li a 
{
display:block;
width: 160px;
height:25px;
line-height:22px;
float:left;
background:transparent url(../line/transparent.gif);
padding:0 6px;
margin:0;
white-space:nowrap;
color:#333;
font-size:10px;
text-align: left;

}

.pro_linedrop .select :hover .sub li.subline a {color:#fff;}

.pro_linedrop .select :hover .sub li a:hover,
.pro_linedrop .select :hover .sub li:hover
{color:#000; line-height:20px; position:relative; background:#fff url(../lrimages/fade.gif) left bottom; }

 

I have commented a temporary fix ( almost a fix actually), but its still not ok.

 

Any suggestions?

 

 

[attachment deleted by admin]

[bronzemonkey]

This is one of stu nicholl's menus - http://www.cssplay.co.uk. Email him and he will help you, provided you have kept the copyright notice he requires you to use.

[demon_athens]

thank you very much for not helping me . It cross my mind to contact him although I have made changes to his script. If nobody can help I'll contact him.

[bronzemonkey]

His menu works in all browsers, so if you have a browser-specific problem that is a result of your modification of his code, either take his original code and add your modifications one at a time to see which one caused the problem or drop him an email.

 

Sorry for not helping you any further but a lot of people come into forums like this and post code and images that are ripped straight from stu's website and, therefore, I'd rather know for sure that someone plans to honour his copyright request before trying to help.

 

According to his copyright notice you can modify his code, but you must still keep the copyright notice.

 

/* ================================================================

This copyright notice must be untouched at all times.

 

The original version of this stylesheet and the associated (x)html

is available at http://www.cssplay.co.uk/menus/pro_left_right_line.html

Copyright © 2005-2007 Stu Nicholls. All rights reserved.

This stylesheet and the associated (x)html may be modified in any

way to fit your requirements.

=================================================================== */

[demon_athens]

Ok. thank you for your concern. I'll contact him.

[demon_athens]

Ok, I contacted with Stu, he advised me something that wasn't solved the problem.. Those days are a bit difficult for all of us so, Stu told me to contact him after holidays and with a small fee per hour ( cause he is doing it for living as you probably know).

 

Anyway, My problem seems to be a margin problem. Its perfect on firefox, different on IE 7.0 and different on IE.6.0. On the above photos you can see what is the problem.

 

More important to this case is to understand what is the fix in order to learn from it. I have lost 2 days with this problem!!!

 

I can call different css files depending of the broswer, its not a clean fix but I can't think anything else.

 

So anybody can help would be great. My css knowledge is really poor as you can understand so if you imagine the problem please try to be as simple and straightforward as you can

 

p.s.: bronzemonkey, you are the first one in my life that calls me thief. It was a shock cause I wouldn't gonna remove the notice anyway, you really don't know me and most probably you will never have any chance to meet me to see how wrong you are. I am a graphic designer/developer and I don't do such things, anyway I respect your try to protect somebody' s work, and this is the reason I am so polite

[dbrimlow]

Try creating an ieonly.css file for nothing but those specific problem elements' paddings, margins or "left" positioned commands. You only need to put the commands of elements that you want IE to treat differently (not all commands).

 

Use an IE conditional comment to call the ieonly.css file in your head tag as follows (this tells it to use all version up to and including IE 7):

 

<!--[if lt ie 7]>
<link href="css/ie-only.css" rel="stylesheet" type="text/css" />
<![endif]-->

 

Modern browsers will ignore it.

 

Example ieonly.css file (I added arbitrary left padding and width sizes for demonstration purposes only, you tweak them to work in IE as needed):

.pro_linedrop .select a {
padding:0 0 0 5px; 
}

.pro_linedrop .select a b {
padding:0 20px 0 4px; 
}

.pro_linedrop .select a:hover b
.pro_linedrop .select li:hover {
padding:0 0 0 5px;
}

.pro_linedrop table {
border-collapse:collapse; 
margin:-1px; 
font-size:1em; 
width:0; 
height:0;
}
.pro_linedrop .select :hover .sub {
width:200px;
margin-left: -80px;

}

.pro_linedrop .select :hover .sub li a 
{
width: 200px;
padding:0 2px;
}

 

IE will use the css from the main css file but will replace those commands that are to be altered from the ieonly.css file.

 

What I found is that you need to be very carefull when using minus value margins/paddings ( "-120px" }in IE.

[demon_athens]

Actually I need 3 different css files, because there is different padding/margin on IE 6.0 and on iE. 7.0

 

So one for firefox, and 2 for the other 2 major ones. Thing is That still there is a problem doing that cause the margin-left: =105px that I use its not the same under menu...

[dbrimlow]

Looking it over, I tried a simple solution that worked in IE6.

 

I never use negative values if I can help it. The drop-down for IE6 uses absolute position (relative to the main container). So Why leave out the "left" command and use margin-left negative value instead?

 

Change this:

 

*margin-left: -58px;  /* FIX FOR IE */

 

to this: 

 

*left: 1px;  /* FIX FOR IE */

 

Worked for me in IE 6.

 

Didn't check it in IE 7 - but supposedly the negative margin is just for IE 6.

[demon_athens]

Thank you very much for your help,

 

I done it and in IE 7.0 the menu goes under the start ( far left) of the menu and not under the menu selection. I can't test it right now with IE 6.0 cause I have to see it from an another machine, I will do that sometime later tonight...

 

 

[dbrimlow]

GREAT! Then simply change your  IE6 only cond comment in the head to this:

 

<!--[if IE 6]>

<style type="text/css">.pro_linedrop .select :hover .sub {left: 1px; margin-left:0}</style>

<script type="text/javascript" src="supersleight-min.js"></script>

<![endif]-->

 

And I just realized why Stu uses the margin-left. This was part of his professional series that has "multiple" subs. You are only using on sub-menu so you can change it

[dbrimlow]

I suppose, if you want to,  you can add another class for sub-sub menus that will use the margin-left.

[bronzemonkey]

bronzemonkey, you are the first one in my life that calls me thief.

 

I never called you a thief. Since you said "my menu" I just wanted to check that you were keeping the copyright notice because so many other people have used stu's menus without keeping that notice in their source code. You are indeed very polite and I just want to apologise if my comments came across as an accusation rather than question!

 

I know stu is beginning to charge people for answers to questions about modifying his menus, but hopefully you can get some free help here instead. Please post the relevant html too so that people can do their own testing on your code in order to find an efficient solution.

[demon_athens]

I suppose, if you want to,  you can add another class for sub-sub menus that will use the margin-left.

 

Yes most probably I'll do that to come to an end cause I am really tired with this incompatibility.I allready tryed to fix png transparencies bug for IE 6.0 and now the popup css menu also has those issues...I'll try to find a solution to this and I'll post it here for anyone that is interested for something similar...

 

bronzemonkey, you are the first one in my life that calls me thief.

 

I never called you a thief. Since you said "my menu" I just wanted to check that you were keeping the copyright notice because so many other people have used stu's menus without keeping that notice in their source code. You are indeed very polite and I just want to apologise if my comments came across as an accusation rather than question!

 

I know stu is beginning to charge people for answers to questions about modifying his menus, but hopefully you can get some free help here instead. Please post the relevant html too so that people can do their own testing on your code in order to find an efficient solution.

 

The link is http://demo.lollypop.gr/kythnos . This is my localhost so its not available all day long, only the hours that I am working. Somewhere I read something about having an extra div and some other stuff that I need some time to test... My experience to css is extremely childish so it may take some time.

 

bronzemonkey, no offence.. As already told you did the right thing, and thank you very much for your general interest.

 

I'll try to learn as much as I can from this issue. In the meanwhile I'll read more about css in case I find something!

[dbrimlow]

Meanwhile, there is always the css must-have  classic toolbox at maxdesign:

 

Listo-o-matic

 

List-o-matic, List-o-matic2, Listutorial, floatutorial and the single most important MUST-KNOW Selectutorial.

 

If you only ever have one single source for learning and understanding css ... this is it.

 

And for your specific type of menu, the classic Douglas Bowman "Sliding-doors" technique at A list apart Sliding Doors of css

 

The origins of all of Stu Nicholls' menus took their beginnings from these two resources.

 

Good Luck,

 

Dave

[demon_athens]

OUAAAoooo!! Really amazing site!! I really thank you about this, this is more important than the solution to my problem

[bronzemonkey]

The problem with the menu is really simple and comes from chosing a slightly inappropriate example from stu's website. You've basically tried to convert a drop-line to a drop-down. I think you can solve the problems with just two extra declarations that you can add into the relevant part of the css for the menu:

 

.pro_linedrop li {position:relative;}
.pro_linedrop .select :hover .sub {left:0;}

 

You can remove all the css with .lrt and .rt in it, since you don't use those classes in the html.

 

I would move the css targeting the IE6 table into the IE6 conditional comment (I just prefer to keep all IE6 stuff together). You also don't need to use any javascript to get the menu working in IE6.

 

<!--[if IE 6]>
<style type="text/css">
.pro_linedrop table {border-collapse:collapse; margin:-1px; font-size:1em; width:0; height:0; padding:0;}
.pro_linedrop .select :hover .sub {left: 1px; margin-left:0}
</style>

 

I didn't come across any problems in FF or IE6/7 with this, so it should work.

<![endif]-->

[demon_athens]

I just made something that fixed this...I'll try to have a more clean solution but untill then...

 

I just added a new div

 

<div style="margin:0px;float:left;clear:left;">
<ul class="sub">
<li>testing </li>
</ul>
</div>

 

This somehow fixed the IE 7.0. Apparently it set up the right margin; You folks that are css guru you can explain it better

[demon_athens]

Bronzemonkey your solution was the answer

 

Mine was ok but not so clean, I also want to thank dbrimlow for all this help and links. I have allready starting reading. Now...one final task for this menu will be the pop up menu ( drop down) to have a width that is depending from the maximum chars of submenus and its not fixed. This was rather easy with javascript, with css... I really can't imagine it! If someone has some thoughts on this as well it would be great. I can search it muself if you point me to a direction

 

The final working code is:

 

@charset "utf-8";
/* CSS Document */

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/pro_left_right_line.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.pro_linedrop {
height:35px;
width:603px;
background:url(../lrimages/black_0.gif);
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
z-index:5;
margin:0; padding:0;
}
.language {
position: absolute;
z-index: 10;
height: 35px;
width: 150px;
margin-top: -25px;
margin-left: 550px;
* margin-left: 200px;
}
.pro_linedrop .select {
margin:0; 
padding:0; 
list-style:none; 
white-space:nowrap;
}

.pro_linedrop li {
float:left;
background:url(../lrimages/black_1.gif);
margin:0; padding:0;
position:relative; /* FIX for IE [by bronzemonkey] */
}

.pro_linedrop .select a {
display:block; 
height:35px; 
float:left; 
background: url(../lrimages/black_0.gif); 
padding:0 0 0 10px; 
text-decoration:none; 
line-height:33px; 
white-space:nowrap; 
color:#fff;
}

.pro_linedrop .select a b {
display:block;
padding:0 20px 0 8px; 
background:url(../lrimages/black_0.gif) right top;
}

.pro_linedrop .select li.line a b {
background:url(../lrimages/black_0a.gif) right top;

}

.pro_linedrop .select a:hover, 
.pro_linedrop .select li:hover a {
background: url(../lrimages/black_1.gif); 
padding:0 0 0 10px;
cursor:pointer; 
color:#fff;
}

.pro_linedrop .select a:hover b, 
.pro_linedrop .select li:hover a b {
display:block; 
padding:0 20px 0 8px; 
background:url(../lrimages/black_1.gif) right top; 
cursor:pointer;


}

.pro_linedrop .select li.line a:hover b, 
.pro_linedrop .select li.line:hover a b {
background:url(../lrimages/black_1a.gif) right top; 

}



.pro_linedrop .sub {
display:none;

}
.pro_linedrop ul ul {display:none;}

/* IE6 only */
.pro_linedrop table {
border-collapse:collapse; 
margin:-1px; 
font-size:1em; 
width:0; 
height:0;
padding:0;

}

.pro_linedrop .sub {
margin:0; 
padding:0;
list-style:none;

}

.pro_linedrop .sub li {background:transparent; margin:0; padding:0;}

.pro_linedrop .select :hover .sub {
/*height:130px;*/
display:block;
position:absolute;
width:170px;
top:35px;
text-align:left;
background:#fff url(../lrimages/fade.gif);
border:1px solid #aaa;
margin:0;
padding:0; 
left:0; /* FIX for IE [by bronzemonkey] */
}




.pro_linedrop .select :hover .sub li a 
{
display:block;
width: 158px;
height:25px;
line-height:22px;
float:left;
background:transparent url(../line/transparent.gif);
padding:0 6px;
margin:0;
white-space:nowrap;
color:#333;
font-size:10px;
text-align: left;
  
}

.pro_linedrop .select :hover .sub li.subline a {color:#fff;}

.pro_linedrop .select :hover .sub li a:hover,
.pro_linedrop .select :hover .sub li:hover
{color:#000; line-height:20px; position:relative; background:#fff url(../lrimages/fade.gif) left bottom; }

 

I allready put it and its working for everybody that wants to see the result. http://demo.lollypop.gr/kythnos

[demon_athens]

You also don't need to use any javascript to get the menu working in IE6.

 

Tha javascript is used to bypass another "bug" of IE 6.0 that has with PNG transparencies. Just noticed that when this png javascript fix is run along with lightbox javascript it doesn't work!! Anyway I'll open another issue for this.

 

Damn this site has gave me too many headaches

[dbrimlow]

Now...one final task for this menu will be the pop up menu ( drop down) to have a width that is depending from the maximum chars of submenus and its not fixed.

 

Uh Oh (LOL, bronzemonkey).

 

Don't spend too much time on that. You WILL be able to get it to work ... well, almost ... IE 7 is the monster for that one.

 

While it will drop down and expand the width, any background color and border hover effect will only span just the width of actual text itself - and not the whole width of the drop down box itself.

 

So far some of the finest minds of css out there have not been able to solve this problem.

[demon_athens]

hahahaha.... so I guess I will not try it

[dbrimlow]

Well, you should at least try it.

 

Who knows, you may stumble upon the solution.