SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu Problem with MSIE 5.5

    First off, allow me to apologize for the visual assault that is about to bombard your eyes (and your monitor). I prefer to be as thorough as possible when requesting assistance. As such, I truely am sorry. Now that that's out of the way, on to my problem.

    I'm currently working on a site re-design project for an individual who spends his time to painting miniatures for several table-top miniatures/war games (it's one of his many, many hobbies) and have run into a bit of a snag with the menu.

    Microsoft Internet Explorer 5.5 (Windows, obviously) keeps applying a left margin to the series of unordered lists that comprise the site's navigational menu when the page loads. However, hovering over the menu elements will cause the menu to render properly, save for a small margin applied to the bottom of each link in the menu. I've tested the layout in MSIE 5, 5.5, 6 and 7 (Beta 2) for Windows, Netscape 6.2, 7, 8 for Windows, FireFox 1.0.3 and Opera 8.5 for Windows. I know a few people who have Linux boxes and Macs, who were more than willing to test the new layout for me in their browsers. The layout rendered perfectly in each and every single browser, save for IE 5.5

    I'm using XHTML 1.0 Transitional being served as text/html with the standard ISO-8859-1 encoding, with the presentation being handled by CSS 2.1 (the site does contain any client-side scripts). Both the XHTML and CSS are 100% valid and error/warning free.

    Below is the XHTML I'm using for the menu. Note that the unordered lists are contained inside a <div> container. I have done this to allow for a style sheet switcher (which I will be coding in PHP rather than JavaScript) and other page elements to be displayed along the left side of the page while the content flows to the right of the parent container (just so you know, since this will become relevant when I get to the CSS, I have an ID attribute on the body tag that corresponds to the relevant page in the site):
    Code:
                    	<div id="cPanel">
                   		<div id="navTitle">
                   			<strong><span class="alt">Site </span>Navigation</strong> <span class="alt">(<a href="#content">Skip to Content</a>)</span>
                   		</div>
                  		<div id="nav">
                  			<ul>
     				<li><a href="/" id="linkHome">Home</a></li>
     				<li><a href="/minis/" id="linkMinis">Painted Miniatures</a>
     					<ul>
     						<li><a href="/minis/cav/" id="linkCAV">CAV</a></li>
     						<li><a href="/minis/battletech/" id="linkCBT">Classic BattleTech</a></li>
     						<li><a href="/minis/games-workshop/" id="linkGW">Games Workshop</a></li>
     						<li><a href="/minis/reaper-minis/" id="linkReaper">Reaper Miniatures</a></li>
     						<li><a href="/minis/talon/" id="linkTalon">Talon Games</a></li>
     						<li><a href="/minis/misc/" id="linkMisc">Miscellaneous</a></li>
     					</ul>
                   				</li>
     				<li><a href="/store/" id="linkStore">Miniatures For Sale</a></li>
      				<li><a href="/tutorials/" id="linkTutorial">How to Paint Minis</a></li>
      				<li><a href="/marauders/" id="linkBlog">Fairchild&acute;s Marauders</a></li>
      				<li><a href="/contact/" id="linkContact">Contact Fairchild&acute;s</a></li>
     				<li><a href="/links/" id="linkWeb">Related Web Sites</a></li>
                   			</ul>
                  		</div>
                  		<!--<div id="switcher">
       			<strong>Text Size (+ / -)</strong>
                  		</div>-->
                  	</div>
    Please note that I have not yet added access keys or a tab order to the menu. That is because I am debating whether I should add additional sub-categories (similar to the "Painted Miniatures" section) to the menu. Once I have made my decision I will include the access keys and tab order to the menu (and if I have enough sub-sections, I may use some JavaScript to collapse the sub-menus when they're not in use).

    Here is the CSS I am using for the menu (please note that the universal selector is the FIRST style rule in the entire stylesheet--the menu rules come later on):
    Code:
                  * {
                 		margin: 0;
                 		padding: 0;
                 }
       
                 /* SNIP */
                 
                 	/* The following rules are for the navigation section */
                 	#cPanel {
                 		float: left;
                 		width: 12em;
                 	}
                 	#navTitle {
                 		background-color: #F9F9F9;
                 		background-image: url(images/bk54.gif);
                 		background-repeat: repeat-x;
                 		border-top: 2px solid #000000;
                 		border-right: 2px solid #000000;
                 		border-bottom: 1px solid #888888;
                 		border-left: 2px solid #000000;
                 		color: inherit;
                 		font-family: Georgia, "Times New Roman", Times, serif;
                 		font-size: 1.1em;
                 		font-variant: small-caps;
                 		padding-top: 0.2em;
                 		padding-bottom: 0.2em;
                 		text-align: center;
                 	}
                 	#nav {
                 		background-color: #DDD;
                 		border-top: 0;
                 		border-right: 2px solid #000000;
                 		border-bottom: 2px solid #000000;
                 		border-left: 2px solid #000000;
                 		color: inherit;
                 	}
                 	#nav ul {
                 		list-style-type: none;
                 		text-align: left;
                 		text-indent: 1em;
                 	}
                 	#nav li ul {
                 		background-color: #EFEFEF;
                 		color: inherit;
                 		border: 0;
                 		padding-left: 0;
                 		text-indent: 2.5em;
                 	}
                 	#nav a:link, #nav a:visited {
                 		background-color:  #DDDDDD;
                 		border-top: 1px outset #000000;
                 		color: #0000FF;
                 		display: block;
                 		text-decoration: none;
                 		width: 100%;
                 	}
                 	#nav a:hover {
                 		background-color: #FFFFFF;
                 		border-top: 1px inset #000000;
                 		color: #FF0000;
                 		display: block;
                 		text-decoration: none;
                 		width: 100%;
                 	}
                 	#nav li ul a:link, #nav li ul a:visited {
                 		background-color: #EFEFEF;
                 		color: #0000FF;
                 	}
                 	#nav li ul a:hover {
                 		background-color: #FFFFFF;
                 		color: #FF0000;
                 	}
                 	#home #linkHome:link,
                 	#minis #linkMinis:link,
                 	#CAV #linkCAV:link,
                 	#CBT #linkCBT:link,
                 	#GW #linkGW:link,
                 	#reaper #linkReaper:link,
                 	#talon #linkTalon:link,
                 	#misc #linkMisc:link,
                 	#store #linkStore:link,
                 	#tutorial #linkTutorial:link,
                 	#blog #linkBlog:link,
                 	#contact #linkContact:link,
                 	#web #linkWeb:link {
                 		background-color: #AAA;
                 		color: #0000FF;
                 	}
                 	#home #linkHome:visited,
                 	#minis #linkMinis:visited,
                 	#CAV #linkCAV:visited,
                 	#CBT #linkCBT:visited,
                 	#GW #linkGW:visited,
                 	#reaper #linkReaper:visited,
                 	#talon #linkTalon:visited,
                 	#misc #linkMisc:visited,
                 	#store #linkStore:visited,
                 	#tutorial #linkTutorial:visited,
                 	#blog #linkBlog:visited,
                 	#contact #linkContact:visited,
                 	#web #linkWeb:visited {
                 		background-color: #AAAAAA;
                 		color: #0000FF;
                 	}
                 	#home #linkHome:hover,
                 	#minis #linkMinis:hover,
                 	#CAV #linkCAV:hover,
                 	#CBT #linkCBT:hover,
                 	#GW #linkGW:hover,
                 	#reaper #linkReaper:hover,
                 	#talon #linkTalon:hover,
                 	#misc #linkMisc:hover,
                 	#store #linkStore:hover,
                 	#tutorial #linkTutorial:hover,
                 	#blog #linkBlog:hover,
                 	#contact #linkContact:hover,
                 	#web #linkWeb:hover {
                 		background-color: #FFFFFF;
                 		color: #FF0000;
                 	}
    I know, I'm starting to ramble on and on and on, but there is (gasp) a method to my madness. I want to be as thorough as possible with describing my problem, though these two particular sentences aren't doing anything to help me towards that goal .

    I tried applying a left margin to the menu, which appeared to correct the problem in IE5.5, but once I'd hover over a menu option, the problem would rear its ugly head to my dismay (probably just to spite me). Furthermore, I tried inserting a conditional comment that would target ONLY Internet Explorer 5.5, but was unsucessful. MSIE 5.5 would not recognize the conditional comment, nor the style rules that were contained in it. [ (If someone (perhaps you) could point me to a resource other than Microsoft's page regarding conditional comments that shows how to target only Internet Explorer 5.5, I would really appreciate it.) Edit: Turns out my standalone version of IE 5.5 was using the installed version to identify itself. ]

    Please note that I first tested the layout using FireFox 1.0.3 (I can't seem to get 1.5.0.4 to install for some weird reason), then Opera 8.5, Netscape 8, and finally Internet Explorer 6 (all Windows, obviously). From there, I tested on Netscape 7, Netscape 6.2, Internet Explorer 5.5, 5 (again, on Windows), and then from there I had some friends check the site's layout on IE7 Beta 2, Safari and Konqueror (can't remember the respective browser versions off the top of my head, since I don't keep track of which versions they use at any given time).

    Aside from not supporting the CSS layout for IE5.5 (which I do support whenever I build or re-design a site from the ground up) is there any way I can fix this problem in Internet Explorer 5.5 without breaking the layout for other versions of Internet Explorer, or even other browsers? I would like to avoid CSS hacks if possible by serving the styles IE5.5 needs through a conditional comment (in fact, I intend to use a conditional comment). I have not employed the Box Model Hack to fix this (since as far as I can tell the rest of the layout is unaffected), nor have I employed any other CSS hacks to remedy this problem.

    I did read in Jeffery Zeldman's book Designing with Web Standards that IE<6 had a problem with margins and padding on unordered lists that were not compressed, but since I no longer have the book (I borrowed it from a public library at the time) I cannot confirm this directly. Thankfully the second edition of his book is about to hit the printers, and I will be purchasing it for my own collection. Despite stripping the margin and padding from every element via a universal selector, is it possible that this could be the cause of my problem? And if so, why would it only affect IE 5.5 and not its predecessor?

    If I may make one other (and rather small) request, please do not tell me to ditch support for Internet Explorer 5.5 or any other "older" browser unless there is no other way to solve this menu problem. I may not use it for anything other than testing, and most people have since either upgraded to Internet Explorer 6 or switched to another browser, but there are some that are literally "stuck" with IE 5.5, and having been there myself at one time, I do not wish to make them suffer unnecessarily. It's part of my job to provide support for standards compliant browsers, even if their support is only partial (though I do draw the line at IE5, Netscape 6, Mozilla FireFox 1.0/Mozilla 1.5 and Opera 7, respectively). I am also not a practicioner of the FireFox uber alles philosophy, since as I said, I prefer to support multiple browsers/browser versions on the three main operating systems (Windows, *nix, and Macintosh), save for Mac-IE, which as far as I am concerned can remain in the abyss that is the bottomless pit of obsolecense.

    Finally, in case it matters any (I doubt it, but one never knows), my operating system is Windows XP Professional Edition, with Service Pack 2 running Internet Explorer 6 as the "default" browser (no thanks to my ISP, which resets my default browser from Mozilla FireFox to Internet Explorer each time I connect). And yes, for those who prefer to debug with a working copy on a remote server, I am providing a link to the page in question below. I haven't moved the stylesheet to a separate file yet (I will be though, once this pesky little critter has been squashed flat as a bug), since I have multiple browsers open at once, and would prefer not to have another application chewing up more memory on my machine.

    And here is the link for those who prefer to work with a live copy of the code, as well as for the curious among us: http://www.fairchildsmechworks.com/s..._redesign.html

    (Edit 1: I forgot to mention that I will add the relevant meta tags once the layout is complete.)

    (Edit 2: I found out what was causing the conditional comments not to work in IE 5.5, turns out my standalone copy of IE5.5 was identifying itself as IE6.)
    Last edited by Dan Schulz; Jun 13, 2006 at 16:22.

  2. #2
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Dan,
    I took a look at your live site this morning on my standalone IE 5.5 that I'd downloaded awhile ago from the skyzyx archive, and on load it actually looks the same as in my FF and IE6. I've attached a screenshot. I have XP SP2 as well. It's a head scratcher. I tried it on my IE5 standalone and there I got the resullt you described. I then got a fresh IE 5.5 standalone from the evolt archive as skyzyx have pulled theirs, and tried again, and still it looks ok. I know this isn't helpful, but I thought it worth noting that I can't duplicate the 5.5 issue. The other place I can think of trying is my Virtual PC on my mac at home, which has Win2k on it, so if I remember I'll look it up. Sorry to be of little help.
    Attached Images Attached Images
    Last edited by carrotflowers; Jun 14, 2006 at 09:09.
    The guy is so tough I think his beard could beat up
    Nowitzki. -Gene Wojciechowski on Baron Davis |
    last.fm: lssian

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Turns out the problem is on IE5, sorry. I usually load IE 6, 5.5 and 5 side by side (in that order). I guess when I loaded the browsers up to test this layout, 5 must have loaded before 5.5. Rather odd.

    Now if I can determine the best way to fix this problem so I can get on to production. I have to have this site done in two weeks (I'll be lucky if the site owner can get me the pictures he wants on there, much less getting this layout problem solved).

  4. #4
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    np, I just hoped that would make it easier to troubleshoot. My erception is that 5 is well known to be a serious buggy pain, and hopefully the issue is documented somewhere. Now that I know it is 5, I'll try to take another look.
    The guy is so tough I think his beard could beat up
    Nowitzki. -Gene Wojciechowski on Baron Davis |
    last.fm: lssian

  5. #5
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I took one more look and I think this is the culprit- I removed the text-indent rule out of #nav li ul and #nav ul and the ie5 weirdness went away. I'd work on another way to get your spacing but I have to run...I hope that helps!
    The guy is so tough I think his beard could beat up
    Nowitzki. -Gene Wojciechowski on Baron Davis |
    last.fm: lssian


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •