16 replies [Last post]
bugalugs
Offline
newbie
Last seen: 9 years 48 weeks ago
Joined: 2009-09-16
Posts: 10
Points: 0

Hi All Smile

I have been trying many many things and just getting nowhere with this. I am sure there is a simple answer, I just need a kick in the right direction. Would be much appreciated Smile

I am building a site that uses a sonofsuckerfish navigation. All looks great in Firefox and IE8. But I am getting some margin or padding issue in IE6 and IE7 adding extra height to the

  • 's etc
  • I don't really want to go through and add *html and +html stuff to force this to display correctly - there must be something basic I am missing here :?

    My html is

    <ul id="nav">
    <li class="hassub"><a href="index.htm" class="lmenu">The Inn</a><ul><li><a href="history.htm" class="lmenu">History</a></li><li><a href="localArea.htm" class="lmenu">Local Area</a></li><li><a href="locationdirections.htm" class="lmenu">Location & Directions</a></li><li><a href="contactus.htm" class="lmenu">Contact Us</a></li><li><a href="gallery.htm"  >Gallery</a></li></ul></li>
    </li><li class="hassub"><a href="rest.htm" class="lmenu">Rest</a><ul><li><a href="rooms.htm" class="lmenu">Rooms</a></li><li><a href="servicefacilities.htm" class="lmenu">Service & Facilities</a></li><li><a href="availability.htm" class="lmenu">Availability</a></li></ul></li></ul>

    and the CSS is

    #nav{
    	margin:0px;
    	padding:0px;
    	list-style-type:none;
    	text-align:left;
    	}
    #nav li{
    	display:block;
    	height:28px;
    	padding:2px 0px 0px;
    	position:relative;
    	margin:0px;
    	}
     
    #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:auto;
    	}
     
    #nav li ul li{
    	padding:0px;
    	margin:0px;
    	height:auto;
    	padding:6px 0px;
    	line-height:normal;
    	}
    #nav li ul{
    	position:absolute;
    	left:-999em;
    	margin:0px;
    	padding:0px;
    	}
    #nav li a:hover{
    	background:url(navhvr.jpg);
    	}
    #nav li:hover a, #nav li.sfhover a{
    	background:url(navhvr.jpg);
    	}
    #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(submav.jpg);
    	}
     
    #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;
    	}
    #nav li ul li a:hover{
    	color:#FFFFFF;
    	}

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 4 years 31 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    A link might be a help with

    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

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    bugalugs
    Offline
    newbie
    Last seen: 9 years 48 weeks ago
    Joined: 2009-09-16
    Posts: 10
    Points: 0

    Hi Hugo Thanks for taking

    Hi Hugo Smile

    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 Smile

    Cheers

    Bugalugs

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 4 years 31 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    The symbol '<' means 'Less

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

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 4 years 31 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Can you try putting the

    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.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    bugalugs
    Offline
    newbie
    Last seen: 9 years 48 weeks ago
    Joined: 2009-09-16
    Posts: 10
    Points: 0

    Hi Hugo, Doh on the <

    Hi Hugo,

    Doh on the < :blushing:

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

    No difference Sad

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

    Cheers

    Bugalugs

    bugalugs
    Offline
    newbie
    Last seen: 9 years 48 weeks ago
    Joined: 2009-09-16
    Posts: 10
    Points: 0

    Ah!!! I put a height:100%;

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

    Wonderful stuff!! Thanks

    bugalugs
    Offline
    newbie
    Last seen: 9 years 48 weeks ago
    Joined: 2009-09-16
    Posts: 10
    Points: 0

    ok - working great in ie6,

    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 ?

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 4 years 31 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    It's usually the anchor that

    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.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 4 years 31 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Try adding zoom:1; or

    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.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    bugalugs
    Offline
    newbie
    Last seen: 9 years 48 weeks ago
    Joined: 2009-09-16
    Posts: 10
    Points: 0

    ok - I have zoom:1; and

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

    but still no background in IE7 :shrug:

    hmmmm

    bugalugs
    Offline
    newbie
    Last seen: 9 years 48 weeks ago
    Joined: 2009-09-16
    Posts: 10
    Points: 0

    Ah, I was making a mistake

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

    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

    bugalugs
    Offline
    newbie
    Last seen: 9 years 48 weeks ago
    Joined: 2009-09-16
    Posts: 10
    Points: 0

    I tried putting this in the

    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 Sad

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 4 years 31 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    This approach isn't going to

    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.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    bugalugs
    Offline
    newbie
    Last seen: 9 years 48 weeks ago
    Joined: 2009-09-16
    Posts: 10
    Points: 0

    Thanks Hugo, And you know -

    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!!

    bugalugs
    Offline
    newbie
    Last seen: 9 years 48 weeks ago
    Joined: 2009-09-16
    Posts: 10
    Points: 0

    Hokay, apart from 1px out on

    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 Smile Much appreciated.

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 4 years 31 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    It's far better. We can

    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;}

    Quote:

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me