IE6 IE7 <ul><li> margin or padding issue.

A link might be a help with this one.

Is the height on the list element necessary, setting hasLayout on li elements can produce screwy results in IE < 8

Hi Hugo

Thanks for taking the time to look into this for me. It is displaying just fine in IE8.

It is just the silly margin or padding going on in IE7 and IE6

The development site I am working on is here http://www.minisitehq.com/bbinn

The issue is with the navigation on the left hand side.

Would love to know what the issue is

Cheers

Bugalugs

The symbol '<' means 'Less Than' so I was referring to versions below 8.

Can you try putting the anchors into hasLayout mode you have display:block;height:auto change height:auto to height:100%; and see if that corrects things.

Hi Hugo,

Doh on the < :blushing:

Right, I have changed the height:auto; to height:100%;

No difference

Reading up on this haslayout thing now to see what I need to do to get into this "mode"...

Cheers

Bugalugs

Ah!!! I put a height:100%; into the li ul li and things seems to be working much better!!

Wonderful stuff!! Thanks

ok - working great in ie6, and ie8 now

And laying out ok in ie7 - but just in ie7 I now get no background image on the hover in the first tier of links??

Goodness this is a kerfuffle - any ideas ?

It's usually the anchor that would be the issue but fair enough it's the list this time. hasLayout is important to grasp as it sadly figures heavily in layout stability in IE6 & 7 and those browsers will continue to have a prominent slice of the market for a while; IE8 on the other hand has finally managed to code out MS horrendous coding flaw that introduced hasLayout.

A quick method of testing whether hasLayout is an issue is to use zoom:1; a this proprietary property will trigger hasLayout but not cause any other unwanted effects; not used though in production unless hidden, unless one isn't concerned with styles passing validation.

Try adding zoom:1; or height:100% to the anchor as I originally envisaged.
One reason for height:100% on the anchor is that forces IE to correctly apply the hover to to the full dimensions of the parent so a {display:block;height:100%;} will give you a clickable region that is the same as the parent dimensions.

ok - I have zoom:1; and height:100% on everything with an a

but still no background in IE7 :shrug:

hmmmm

Ah, I was making a mistake before when I testing this

I mistakenly uploaded a css file that had a bunch of *html hacks in - hence thought it was working.

I have now uploaded the css without the *html hacks, but with the height:100% and the zoom:1; and it is all as it was before - broken with too much margin on the navigation in

I tried putting this in the CSS sheet - seems to be advised in some posts -just to see what it does..

not a lot LOL

.gainlayout {zoom: 1;}

My #nav styles are now

#nav{
	margin:0px;
	padding:0px;
	list-style-type:none;
	text-align:left;
	}
 
#nav li{
	display:block;
	padding:2px 0px 0px;
	position:relative;
	margin:0px;
height:100%;
	}
 
#nav li a{
	display:block;
	padding:0px 0px 0px 15px;
	line-height:28px;
	text-transform:uppercase;
	color:#fff;
	font-size:1.4em;
	margin:0px;
height:100%;
zoom:1;
	}
#nav li ul{
	position:absolute;
	left:-999em;
	margin:0px;
	padding:0px;
	}	
#nav li ul li{
	padding:0px;
	margin:0px;
	height:100%;
	padding:6px 0px;
	line-height:normal;
	}
#nav li ul li a{
	font-family:Arial, Helvetica, sans-serif, "Arial Narrow";
	font-size:1.2em;
	color:#FFB03C;
	padding-left:15px;
	line-height:normal;
	background:url();
	text-transform:none;
	height:100%;
zoom:1;
	}
#nav li ul li a:hover{
	color:#FFFFFF;
	}
#nav li a:hover{
	background:url(<a href="http://www.minisitehq.com/tiny09/jscripts/tiny_mce/plugins/imagemanager/files/7582/navhvr.jpg" rel="nofollow">http://www.minisitehq.com/tiny09/jscripts/tiny_mce/plugins/imagemanager/files/7582/navhvr.jpg</a>);
	}
#nav li:hover a, #nav li.sfhover a{
	background:url(<a href="http://www.minisitehq.com/tiny09/jscripts/tiny_mce/plugins/imagemanager/files/7582/navhvr.jpg" rel="nofollow">http://www.minisitehq.com/tiny09/jscripts/tiny_mce/plugins/imagemanager/files/7582/navhvr.jpg</a>);
	}
#nav li.sfhover ul li.sfhover a, #nav li:hover li a, #nav li a li a:hover{
	background:url() !important;
	}
#nav li:hover ul, #nav li.sfhover ul {
	position:absolute;
	left:208px;
	width:155px;
	top:1px;
	line-height:30px;
	text-align:left;
	background-image: url(<a href="http://www.minisitehq.com/tiny09/jscripts/tiny_mce/plugins/imagemanager/files/7582/submav.jpg" rel="nofollow">http://www.minisitehq.com/tiny09/jscripts/tiny_mce/plugins/imagemanager/files/7582/submav.jpg</a>);
	}

and I am stumped trying to see what is wrong

This approach isn't going to work in IE7 or at least is proving a nightmare to sort through. In many respects it's an abomination of an upgrade that should never have been released and was a smoke screen on the part of MS to shut their detractors up.

I perhaps would not be trying to lay markup over graphics in this precise a fashion as it generally relies on exacting placement and with which there is generally trouble at some point cross browser.

I would think that the whole thing might be easier if your present light gray lines were not part of the graphic but border-bottom to the li elements this way small variances are less likely to cause issue.

Thanks Hugo,

And you know - I was thinking exactly the same thing!!

I have redone the CSS from the son of suckerfish stuff and it is better than it was - but still the odd glitch.

I will persevere and keep on keeping on - I dont believe how much time this one thing has taken!!

Hokay, apart from 1px out on the bottom of the final li - I think I am there - using a grey border in the style rather than the image.

Thanks for your help Hugo Much appreciated.

It's far better.

We can fudge that little 1px annoyance at the bottom by adding a margin-top:-1px to the ul#nav, that will need to be hidden though, best way is to have a Conditional Comment set of styles for IE and in that #nav {margin-top:-1px;} as this might possibly upset IE6 (don't know how things are looking in that browser) you might need, straight after, to do:

* html #nav {margin-top:0;}