Odd in IE only

[pahiker]

OK, you know I've been working on getting the menu to look/work right, and for the most part I have it working in all of the browsers I have access to, except for one thing in IE only.The navigation menu is suppose to be transparent, like the title in the main portion, and everywhere but IE it is. In IE it is solid white, even when hovering over it. Where did I mess up?OOPS! Forgot to include the url to the site: Here it is

/* The code below makes the menu work */	#rtnv ul	{		padding:			0; 		margin:				0;		}	#rtnv ul li {		list-style-type:	none;		border:				1px solid #060; 		position:			relative;		left:				4px;		margin:				0; 		padding:			0;		}	#rtnv ul ul {		display:			none;		}	#rtnv ul li:hover > ul {		display:			block; 		position:			absolute; 		left:				100%;		}	#rtnv li a {		display:			block; 		text-decoration:	none;		color:				#FFF;				/* Text color - black */		}	#rtnv ul ul {		width:				10em;		}/* Position the different levels */	/* Menu text */	#rtnv	{			position:		absolute; 			top:			9px;				/* from top of window */			left:			626px;				/* from left of window */			width:			12em; 				/* width of menu column */			margin:			0; 			padding:		0; 			font-family:	Verdana;			/* menu font */			font-size:		9pt;			}	#rtnv li > a {			background-color: #888;				/* item background - gray */			color:			#FFF;				/* white */			padding:		3px;			filter:			alpha(opacity=60);			opacity:		0.6;			}	#rtnv li:hover {			background-color: #090;				/* color of seleted base-level item - dark green */			filter:			alpha(opacity=70);			opacity:		0.7;			}	#rtnv li.chapter > a {			background-color: #FFF;				/* item background - white */			color:			#000;				/* color of selected sub-menu text */			}	#rtnv li.chapter:hover > ul {			top:			1.75em; 			background:		#FEFEFC;			/* color of sub-menu background */			}	/* Top level menu */	#rtnv > ul {			width:			160px;				/* item line length */			margin-left:	-6px;				/* item indent */			font-size:		85%;			}	#rtnv ul	{			border:			1px solid #060;		/* item line indent */			}	#rtnv ul li {			border-color:	#FFF;	 			/* item border color - white */			line-height:	1.25em;	#rtnv h4		{			font-size:		85%; 			border-bottom:	1px solid silver;			}

[newseed]

You might want to validate and fix the erros in your CSS first. Your CSS Validation ResultsYou are using CSS3 styles that most browsers do not support yet. You will need fix those and any other erros. You don't have to worry about the 'warnings'.

[pahiker]

Sorry for a dumb question, but what is a "parse" error? As in:

Parse Error #rtnv h4	 { font-size:	 85%; border-bottom:	1px solid silver; }Parse Error opacity=70)

Also, I know this is CSS3, but in this case it is something that is working on the left side, just not on the right.

[virthen]

The validator gives a parse error on the filter property because it's something specific to IE (from what I gathered on a google search).Also the CSS for #rtnv ul li is missing a closing bracket }Take out the filter property (and opacity), and insert the missing bracket, and your CSS will validate using W3C's validator.

[pahiker]

Also the CSS for #rtnv ul li is missing a closing bracket }Take out the filter property (and opacity), and insert the missing bracket, and your CSS will validate using W3C's validator.

No, the bracket is there, it shows on the 2nd line (after the solid: silver;). I thought that at first, but it is there.

[newseed]

No, the bracket is there, it shows on the 2nd line (after the solid: silver;). I thought that at first, but it is there.

#rtnv ul li {			border-color:	#FFF;	 			/* item border color - white */			line-height:	1.25em; 	#rtnv h4		{			font-size:		85%; 			border-bottom:	1px solid silver;			}

There is no closing bracket in the #rtnv ul li style (line-height: 1.25em; ?? no bracket here)Also, have you looked at it in IE6? There are still well over 40% of the market that uses it.

[pahiker]

OK, I fixed the bracket.As to IE6, I'm coding on a Mac and have no access to IE6. At work we use IE7, and are not allowed to install personal software. For 40% of the market (and diminishing), they will have to deal with a plainer looking site. From what I understand, the links will still work, just not look as well.

[newseed]

You probably want to take what I said about IE6 more seriously because the right nav menu you have is floating all the way to the far left and that the main background is showing through the menu in which you cannot see the menu very well.

[pahiker]

Serious or not, it's difficult to code to something that you don't have access to. IE stopped Mac development at 5, which doesn't really matter since Mac's 5 had no resemblance to Win's 5.

[newseed]

You most certainly can code for IE6 and just about any other browser that's out there.Your browser snapshot for IE6

[pahiker]

Fine, I see it. I cannot make changes and test for a browser which I do not have access to, unless you know a way that I do not.

[newseed]

I figured you would catch on with that link I provided. www.browsershots.org

[pahiker]

Yes, I caught onto that, but it only shows me how it looks, it doesn't show me if the links function, what happens when the mouse hovers, etc.

[virthen]

I don't know how well (if at all) this works, but here's something that may help you get IE6 on your computer w/IE7 (http://tredosoft.com/Multiple_IE). I know you said you can't install software, but you need to figure out a way to do your testing on IE6, because a lot of people still use it. Perhaps you can get your hands on an older PC that has IE6, or have friends w/IE6 test for you.Those are just some ideas I had, but I think the bottom line here is, unless you're willing to shut out a decent portion of people on the web, you need to find a way to make your website function correctly on IE6.

[Synook]

Serious or not, it's difficult to code to something that you don't have access to. IE stopped Mac development at 5, which doesn't really matter since Mac's 5 had no resemblance to Win's 5.

I think he's using a Mac...If you use IM or something hop on it and find someone willing to test it as you code

[pahiker]

I think he's using a Mac...If you use IM or something hop on it and find someone willing to test it as you code

IM???Yes, I am fortunate enough to work on a Mac , sadly I have to deal with Win at work.Primarily, I am authoring a book, doing it on the web is simply the media I chose. For a web developer, accessing 100% of the market may be worth the extra effort. For me to do that would be a larger learning curve than may be worth it, especially for a diminishing market. According to the stats on this site IE6 made up about 1/3 of the market for 12/2007, only 30% last month. FF has a larger following (at 40%).You guys are, from the postings, primarily web designers. For you, learning to make this site work with IE6 is something you can carry over to your next project, or a really great thing to learn. I dabble on the web, and have only one other site that I maintain. For that matter, I was slapped by another forum when I designed it because it used frames and some of the older browsers at the time couldn't access frames. Two years later the non-frame market was less than 10%; I imagine that the same will be true here, in less than 2 years the extra effort done now will be meaningless. Since this is intended as a long-term publication, and not something I will be making any money off of, I can wait out the diminishing market.Don't get me wrong, I really appreciate all of the help you people have been, and I've noted that on the acknowledgment section. I just feel that it is time to concentrate on the book itself. I am using positioning CSS to place the menu items, I don't know what the equivalent in IE6 would be, if there is one; if there isn't, then I'm not about to maintain two different "looks", one for IE6, one for everyone else.As to help from friends, I have no one who is that far back on technology, they are using IE7, FF, or (the fortunate few) Safari. I would have to make coding changes, drive to the local library (where they are still using IE6), then drive back to make more changes, then back to the library....... Or, purchase a license to use something like crossbrowsertesting.com; but, then again, I don't know what IE6 does or does not support in css.

[newseed]

IM???Yes, I am fortunate enough to work on a Mac , sadly I have to deal with Win at work.

If possilbe, install the multiple IE's to the Win machine at work and test there.

Primarily, I am authoring a book, doing it on the web is simply the media I chose. For a web developer, accessing 100% of the market may be worth the extra effort. For me to do that would be a larger learning curve than may be worth it, especially for a diminishing market. According to the stats on this site IE6 made up about 1/3 of the market for 12/2007, only 30% last month. FF has a larger following (at 40%).

Be sure to read the comments about the browser stats.

W3Schools is a website for people with an interest for web technologies. These people are more interested in using alternative browsers than the average user. The average user tends to use Internet Explorer, since it comes preinstalled with Windows. Most do not seek out other browsers. These facts indicate that the browser figures above are not 100% realistic. Other web sites have statistics showing that Internet Explorer is used by at least 80% of the users.

You guys are, from the postings, primarily web designers. For you, learning to make this site work with IE6 is something you can carry over to your next project, or a really great thing to learn. I dabble on the web, and have only one other site that I maintain. For that matter, I was slapped by another forum when I designed it because it used frames and some of the older browsers at the time couldn't access frames. Two years later the non-frame market was less than 10%; I imagine that the same will be true here, in less than 2 years the extra effort done now will be meaningless. Since this is intended as a long-term publication, and not something I will be making any money off of, I can wait out the diminishing market.

It seems that the main purpose is to provide information to visitors of all kinds whether they are rich or poor, black or white, foreign or domestic, etc. If more than 40% of those people cannot view your site correctly, what are they chances that they will bookmark it muchless come back again? If you don't care about those 40% then why bother creating the site in the first place?

Don't get me wrong, I really appreciate all of the help you people have been, and I've noted that on the acknowledgment section. I just feel that it is time to concentrate on the book itself. I am using positioning CSS to place the menu items, I don't know what the equivalent in IE6 would be, if there is one; if there isn't, then I'm not about to maintain two different "looks", one for IE6, one for everyone else.

It's far better to either have a top or left menu navigation. Right menus are very uncommon. It's like jumping into any car and you can easily drive it without any thought but when you jump into a car that has the steering wheel on the opposite side, you tend to spend time to figure things out and remember which side of the road you need to be on.

As to help from friends, I have no one who is that far back on technology, they are using IE7, FF, or (the fortunate few) Safari. I would have to make coding changes, drive to the local library (where they are still using IE6), then drive back to make more changes, then back to the library....... Or, purchase a license to use something like crossbrowsertesting.com; but, then again, I don't know what IE6 does or does not support in css.

Again, as posted by other member, you can install multiple IE's and still keep the latest version. Of course this doesn't do you any good on a Mac but you do have a Win at work and surely there are friends that have PC's that can install it. I have it installed on my XP which are version 5.5 on up to beta 8.You might want to check to see if Mac has any kind of virtual machine software that will allow you to run both Mac and Windows on the same computer.The final option is to get your site done and then hire someone to fix it for you in IE6. If you code the site pretty good, then a good coder can resolve the IE6 issues in a matter of just a few hours or less.

[virthen]

Here's another thing that I found on the web that may help you test with IE6 without having to pay any kind of license etc. virtual server.Here's a link that has some info (I didn't read it, just passing along the page) on getting IE6 on mac mac ie6.About the web stats from this site...I would hope that FF has a higher following, since this is a web site geared towards web development. But I'm sure if you look at stats for the entire internet, you'll find that IE is still the majority holder by a wider margin (of course each stats site will differ, but the major concensus will turn out about the same), and that's the market that you should be going after.Stick with standard CSS2 (ie not using internet explorer-specific styles or CSS3 which isn't fully supported yet) throughout the site, and from there, it'll be easier to get cross-browser mclovin'. If you're not sure about a particular style, you can always browse through the CSS section of this website w3schools css.If you want to achieve a transparent effect, it would be easy to just create images with the color background that you want, rather than dealing with sticky CSS. If you want to do rollover images (ie when you rollover, a darker background comes up), you can do a search for 'javascript rollover images', and also people will be able to help you with that on these forums as well.Not to sound harsh or anything, but IMO you should get rid of the browser-resize because it's kind of annoying. If users want to resize the window, they'll do it themselves. You shouldn't force it on them.

[newseed]

If you want to achieve a transparent effect, it would be easy to just create images with the color background that you want, rather than dealing with sticky CSS. If you want to do rollover images (ie when you rollover, a darker background comes up), you can do a search for 'javascript rollover images', and also people will be able to help you with that on these forums as well.

I agree that trying to use CSS 3 to achieve transparency needs to be put on hold but you don't have to use javascript to get the same visual affect by using proper CSS and image technique.

Not to sound harsh or anything, but IMO you should get rid of the browser-resize because it's kind of annoying. If users want to resize the window, they'll do it themselves. You shouldn't force it on them.

I TOTALLY CONCUR 100% with you on that one! What a annoyance.

[pahiker]

Stick with standard CSS2 (ie not using internet explorer-specific styles or CSS3 which isn't fully supported yet) throughout the site, and from there, it'll be easier to get cross-browser mclovin'. If you're not sure about a particular style, you can always browse through the CSS section of this website w3schools css.If you want to achieve a transparent effect, it would be easy to just create images with the color background that you want, rather than dealing with sticky CSS. If you want to do rollover images (ie when you rollover, a darker background comes up), you can do a search for 'javascript rollover images', and also people will be able to help you with that on these forums as well.Not to sound harsh or anything, but IMO you should get rid of the browser-resize because it's kind of annoying. If users want to resize the window, they'll do it themselves. You shouldn't force it on them.

I am trying not to use IE specific style, but it is difficult since IE doesn't behave well (even across IE). I limited the IE specific to the opacity, since there seems to be no other way around it.I also wanted to stay away from JS for two reasons, one is that I don't know it, and don't have much of a need to learn it. again, this is not my primary activity, just a means to an end. What code I have here (css) I picked up from sites that mimic what I wanted (http://meyerweb.com/eric/css/ as an example). Most css is hidden in files, so finding what you want is not easy. I have not found places that do the image swapping you are talking about.I was planning on removing the resizing, I find it annoying as well, but wanted to try it for other reasons. Primarily, to fix the size of the left-hand portion, as I don't want it to shrink and expand as the viewer changes the size of the window.As to loading IE on my Win at work, it must have gotten lost in the threads, but that is not permitted. I have IE7 there, and that is all I am allowed to have. The options for loading IE6 on a Mac all entail loading windows OS on the Mac as a secondary operating system. If I wanted windows I would buy a windows machine; I don't, which is why I have a Mac. But thanks for the suggestions.I seem to have ruffled some feathers here, and for that I apologize. But, like I said, I am not a web designer by trade, I use what I can find, or steal, to get the job done. I work on cars as a hobby, most people go to a mechanic, or will do an oil change at most. Few would tear apart an engine block to find a problem; that is what you are asking me to do, and (at this point) it is far beyond what I can do. I simply need to get the site working for the majority of people who will be visiting it. Trashing everything I've done and rewriting it, for a browser I have ZERO access to, is like taking that engine block apart to find a minor ping. Hope you understand. If it were simple to do, I would consider it; but from my point, it is not.

[virthen]

Yeah I understand your point of view and that you're frustrated so don't worry about that (I think we've all become frustrated web coding at some point). I've come across situations also that usually leave IE not working like other browsers, though I was fortunate enough to have access to any browser to be able to test. However, if things aren't working right for the majority browser (which is internet explorer), you need to figure out some way to make things work, be it redesigning the navigation, using javascript, getting someone to code the site for you etc. unless you just want to leave IE users with a wonky-looking site (that may drive them away). I mean its just like you said, you want the site working for the majority of users, and we're just trying to help you do just that.I don't know javascript either, but I can usually manipulate what's already been coded to do what I need if javascript is the easiest way for me to do whatever. If you just do a quick search, you'll find pages that give scripts that you can use, as well as examples of how to incorporate the scripts into your pages. But again if you don't want to use js, I understand...it just means you'll need to do something else.In case you're curious, if you need to access an external CSS stylesheet, you can just use your firefox browser and do a save as a complete webpage, and you'll get the CSS along with images, html etc. This is for Windows, but I'm sure something very similar exists with the Mac version.

[pahiker]

Yeah I understand your point of view and that you're frustrated so don't worry about that (I think we've all become frustrated web coding at some point). I've come across situations also that usually leave IE not working like other browsers, though I was fortunate enough to have access to any browser to be able to test. However, if things aren't working right for the majority browser (which is internet explorer), you need to figure out some way to make things work, be it redesigning the navigation, using javascript, getting someone to code the site for you etc. unless you just want to leave IE users with a wonky-looking site (that may drive them away). I mean its just like you said, you want the site working for the majority of users, and we're just trying to help you do just that.

OK, let's try a different approach. My purpose for putting the index on the right is to make this like a book. People are used to seeing book tabs on the right, pages are turned from right to left, etc. I would prefer to keep that setup, is it doable in IE6? If so, can anyone tell me how to position the index there for IE6? I currently have the menu positioned using:

	#rtnv	{			position:		absolute; 			top:			9px;		/* from top of window */			left:			626px;	/* from left of window */			width:		12em; 	/* width of menu column */			margin:		0; 			padding:		0; 			font-family:	Verdana;	/* menu font */			font-size:		9pt;			}

I don't know what IE6 does and does not support, but I thought positioning was one of those acceptable things. I did check with W3S before using it, and according to their site positioning should go back to IE4.

[virthen]

I assume when you say index, you mean the navigation...yes, you are able to place it wherever you want. You can use absolute/relative position, or you can use floats (what I would do).Here's a very simple example of having a content area and then a navigation to the right using floats, similar to your current layout. You'll notice I use float:left on both div#content and ul#navigation. Basically they float towards the left (provided there is enough width) on the page. With the margin and padding set to 0 on ul#navigation, the navigation sits flush next to the content area. Copy and paste it into an .html page and view it on FF/safari/etc. and see if you understand floating. Here's a link to the CSS float property here at w3schools (floats).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>test</title><style type="text/css">a{text-decoration:none}div#content{width:600px;height:600px;background:green;float:left}ul#navigation{float:left;margin:0;padding:0}ul#navigation li{list-style:none;background:gray}</style></head><body><div id="content">	main content</div><ul id="navigation">	<li><a href="">Cover</a></li>	<li><a href="">Introduction</a></li>	<li><a href="">Day Hikes</a></li>	<li><a href="">Backpacking Trips</a></li>	<li><a href="">Recipes</a></li>	<li><a href="">Appendices</a></li></ul></body></html>

With all that said, whether the navigation should be on the right or left comes down to your own choice. However I think most people would agree that it just looks a bit weird on the right hand side, because you'd expect the navigation on the left or at the top. When you're reading an actual book, you expect things to be a certain way, and its the same when you're on a website.

[newseed]

You don't have to trash everything. You just need to rethink how you design the web pages. If you use height: 100% and overflow: auto in the body and then add a conditional comment for IE6 and to position:absolute the menu. But in order to make it work, you must take everything else out of position absolute. Besides, from what I can see, there is no reason to use all those position absoluted except for the menu.Check the link out about how they achieve it. It works in all browsers.You will have to get away from using CSS3. It will be pretty easy to implement CSS3 later on when it's fully support than the other way around. CSS3 is still in a works and they could very well change the very styles you are using to be something else.Even a 'ping' can be a major problem later on if you don't fix it now.

[pahiker]

You don't have to trash everything. You just need to rethink how you design the web pages. If you use height: 100% and overflow: auto in the body and then add a conditional comment for IE6 and to position:absolute the menu. But in order to make it work, you must take everything else out of position absolute. Besides, from what I can see, there is no reason to use all those position absoluted except for the menu.Check the link out about how they achieve it. It works in all browsers.You will have to get away from using CSS3. It will be pretty easy to implement CSS3 later on when it's fully support than the other way around. CSS3 is still in a works and they could very well change the very styles you are using to be something else.Even a 'ping' can be a major problem later on if you don't fix it now.

OK, I tried what was suggested, then went to browsershots, it looks even worse than originally.IE6:IE7:NS9:The last 2 worked prior to the changes.URL to site

/* Styling for a standard page */	body {		height:				100%;		overflow-y:			auto;		font-family:		verdana;		background-color:	#060;				/* dark green */		color:				#000;				/* black */		}